Hackernoon logo

Введение в CSS Media Queries | Хакер полдень

Аватар профиля автора

Обучение веб-разработке — это путешествие, которое должен рассмотреть начинающий разработчик программного обеспечения, оно включает в себя обучение, самостоятельную мотивацию и доступ ко многим онлайн-ресурсам, также полезно иметь наставника.

HTML & CSS — отличный способ начать свой путь веб-разработки, но медиа-запросы CSS похожи на глазурь на торте, называемую адаптивной сетью.

Адаптивный веб-дизайн — это подход к веб-дизайну, который позволяет хорошо отображать веб-страницы на различных устройствах и размерах окон или экранов.

Адаптивный веб-дизайн и CSS медиа-запросы работают в тесном сотрудничестве.

CSS Media запрос

Медиа-запросы CSS — это способ нацеливания на устройства, но полезно знать, каковы размеры всех этих устройств. Они лежат в основе теории адаптивного дизайна, где мы отвечаем на наш контент, чтобы соответствовать любому окну просмотра.

Медиа-запросы используются вместе с flex box для создания адаптивного веб-сайта. Он также используется для изменения многих вещей, перечисленных ниже:

  • макет страницы в зависимости от ориентации браузера
  • это помогает сделать изображения и типографику отзывчивыми
  • ширина и высота области просмотра и устройства.

Важным компонентом адаптивного дизайна является создание правильного интерфейса для правильного устройства, поскольку на рынке имеется множество различных устройств, это может быть сложной задачей.

Как указано выше, на рынке существуют различные устройства, это означает, что использование медиазапросов CSS предполагает использование различных точек останова. Эти точки останова имеют разные размеры для разных размеров экрана.

Google определяет точки останова как точку, в которой контент вашего сайта будет реагировать, чтобы предоставить пользователю наилучший возможный макет для использования информации.

Например, после разработки веб-страницы на 17-дюймовом экране ноутбука без медиазапросов веб-страница по понятным причинам не будет удобной для пользователя в мобильном представлении. Это актуально как для веб-дизайнеров, так и для разработчиков, так как создание веб-страницы должно быть ответной реакцией в качестве основного ключевого фактора. Тем не менее, точками прерывания, которые следует указывать, обычно являются iPhone с разрешением 320px и 480px, планшет (обычно iPad с разрешением 768px и 1024px) и, наконец, значение выше 1024px.

@media screen and (max-width: 768px) {
  div.example {
    display: none;
  }
}

Тем не менее, также рекомендуется сначала спроектировать мобильный видовой экран. Затем, когда вы максимизируете представление, добавьте другие точки останова.

Чтобы узнать больше о различных размерах экрана и медиазапросах CSS, ознакомьтесь с Media_Queries Веб-сайт. Кроме того, продолжение списка различных точек останова устройства можно найти на адаптивный дизайн Веб-сайт.

Существуют различные способы вложения медиазапросов CSS в ваш HTML-файл, как указано ниже:

  • добавив его прямо в ваш файл CSS (используйте @СМИ запрос)
  • напрямую добавьте тег медиа-ссылки в ваш HTML-файл
    (используйте тег media = »в заголовке )
  • с помощью JavaScript для обслуживания соответствующих файлов CSS
  • используя смесь всего вышеперечисленного.

Он может быть связан в CSS-файле следующим образом:

<link rel="stylesheet" media="screen and (min-width: 900px)" href="widescreen.css">
Медиа-запросы CSS являются очень мощными инструментами, они используются практически во всех средах CSS, начиная с Bootstrap, Foundation, CSS материалов и т. Д. В дополнение к медиа-типам, есть и медиа-функции. Медиа-функции предоставляют более конкретные детали медиа-запросов, позволяя проверить определенные функции, такие как пользовательский агент или устройство отображения, проверить медиа-запросы w3schools страница в Интернете.

Как говорится,

Изучение HTML и CSS намного сложнее, чем раньше. Адаптивный веб-дизайн добавляет больше уровней сложности для дизайна и разработки веб-сайтов.
— Джейкоб Летт.

Комментарии

Теги

Баннер Noonification

Подпишитесь, чтобы получать ежедневные обзоры лучших технических историй!





Источник: Введение в CSS Media Queries | Хакер полдень


Обратная ссылка при копировании статьи: Введение в CSS Media Queries | Хакер полдень

Leave a comment