Содержание

Max-width, max-height, min-width, min-height — учебник CSS

Несколько уроков назад мы рассматривали свойства width и height для установки фиксированной ширины и высоты элемента. Но современный CSS не ограничивается этими свойствами и предлагает нам намного более гибкую настройку стилей.

Свойства min-width/min-height и max-width/max-height позволяют задавать минимальную и максимальную ширину/высоту соответственно. Разберем их по порядку:

  • min-width — с помощью этого свойства вы можете указать минимальную ширину элемента. Например, если вы зададите блоку стиль min-width: 50px, то ширина блока может стать больше, но она никогда не станет меньше, чем 50 пикселей. Это очень удобно, например, при создании адаптивной верстки, когда при определенных размерах экрана элемент с относительной шириной становится слишком узким. Свойство min-width позволяет предотвратить такие искажения.
  • min-height — работает аналогично предыдущему свойству, но только по отношению к высоте элемента.
    Безусловно, это тоже очень полезное свойство в практике, которое позволяет задать минимальную высоту элемента.
  • max-width — как вы уже догадались, это свойство позволяет задать максимально допустимую ширину элемента. Например, элемент со стилем max-width: 960px может иметь ширину меньше максимальной, но он никогда не станет больше, чем 960 пикселей. Данное свойство удобно использовать при создании адаптивной разметки, когда вам необходимо, чтобы элемент адаптировался под ширину экрана любого устройства, но при этом не слишком широко разъезжался на больших экранах.
  • max-height
    — работает аналогично предыдущему свойству, только по отношению к высоте. Но, как мы уже говорили ранее, лучше не играть с ограничением высоты элемента без крайней надобности.
  • auto — это значение можно использовать для отмены действия свойства.

Итак, все эти свойства позволяют легко контролировать допустимые размеры элементов, при этом не фиксируя их намертво, как это делают обычные свойства width и height. Их можно комбинировать, задавая для одного элемента минимальную и максимальную ширину/высоту. Значения можно устанавливать в любых единицах измерения CSS. Словом, все возможности для реализации очень гибкой верстки.


div {
	width: 100%;
	min-width: 100px;
	max-width: 600px;
}
Что с кроссбраузерностью?

Поддержка браузерами свойств max-width, max-height, min-width, min-height практически стопроцентная. Данную запись не понимает только Internet Explorer 6.


Далее в учебнике: «плавающие» элементы и свойство float.

@Media min-width & max-width — программирование

У меня есть эта настройка @media:

HTML

<head>
  <meta name="viewport" content="width=device-width, user-scalable=no" />
</head>

CSS

@media screen and (min-width: 769px) {
    /* STYLES HERE */
}

@media screen and (min-device-width: 481px) and (max-device-width: 768px) { 
    /* STYLES HERE */
}

@media only screen and (max-device-width: 480px) {
    /* STYLES HERE */
}

С помощью этой настройки он работает на iPhone, но он не работает в браузере.

Это потому, что у меня уже есть device в мета и, возможно, вместо max-width:480px?

Ответ 1

Я нашел лучший способ написать свой CSS по умолчанию для старых браузеров, так как старые браузеры, в том числе 5.5, 6, 7 и 8. Не могут читать @media. Когда я использую @media, я использую это так:

<style type="text/css">
    /* default styles here for older browsers. 
       I tend to go for a 600px - 960px width max but using percentages
    */
    @media only screen and (min-width: 960px) {
        /* styles for browsers larger than 960px; */
    }
    @media only screen and (min-width: 1440px) {
        /* styles for browsers larger than 1440px; */
    }
    @media only screen and (min-width: 2000px) {
        /* for sumo sized (mac) screens */
    }
    @media only screen and (max-device-width: 480px) {
       /* styles for mobile browsers smaller than 480px; (iPhone) */
    }
    @media only screen and (device-width: 768px) {
       /* default iPad screens */
    }
    /* different techniques for iPad screening */
    @media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait) {
      /* For portrait layouts only */
    }

    @media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape) {
      /* For landscape layouts only */
    }
</style>

Но вы можете делать все что угодно с вашим @media. Это всего лишь пример того, что я нашел для меня лучше всего при создании стилей для всех браузеров.

CSS спецификации iPad.

Также! Если вы ищете @media print{} версию, вы можете использовать @media print{}

Ответ 2

Основная проблема заключается в использовании max-device-width vs plain old max-width.

Использование ключевого слова «device» предназначено для физического измерения экрана, а не ширины окна браузера.

Например:

@media only screen and (max-device-width: 480px) {
    /* STYLES HERE for DEVICES with physical max-screen width of 480px */
}

Против

@media only screen and (max-width: 480px) {
    /* STYLES HERE for BROWSER WINDOWS with a max-width of 480px. 
       This will work on desktops when the window is narrowed.  */
}
Ответ 3

Правильное значение для атрибута content должно включать initial-scale вместо:

<meta name="viewport" content="width=device-width, initial-scale=1">
                                                   ^^^^^^^^^^^^^^^
Ответ 4

Используйте просто

@media only screen and (max-width: 600px) and (min-width: 400px)  {
//Put your CSS here for 400px to 600px width devices //
}

max-width | CSS | WebReference

Устанавливает максимальную ширину элемента. Значение ширины элемента будет вычисляться в зависимости от значений установленных свойств width, max-width и min-width. В табл. 1 показано, чем руководствуется браузер при совместном использовании указанных стилевых свойств.

Табл. 1. Ширина элемента
Значения свойств Ширина
min-width < width < max-width width
    width < max-width width
    width > max-width max-width
min-width > width > max-width min-width
min-width > width < max-width min-width

Данные из таблицы следует понимать следующим образом. Если значение ширины (width) больше значения max-width, то ширина элемента принимается равной значению max-width.

Краткая информация

Значение по умолчанию none
Наследуется Нет
Применяется Ко всем элементам, кроме строчных и таблиц
Анимируется Да

Синтаксис

max-width: <размер> | <проценты> | none

Обозначения

Описание Пример
<тип> Указывает тип значения. <размер>
A && B Значения должны выводиться в указанном порядке. <размер> && <цвет>
A | B Указывает, что надо выбрать только одно значение из предложенных (A или B). normal | small-caps
A || B Каждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке. width || count
[ ] Группирует значения. [ crop || cross ]
* Повторять ноль или больше раз. [,<время>]*
+ Повторять один или больше раз. <число>+
? Указанный тип, слово или группа не является обязательным. inset?
{A, B} Повторять не менее A, но не более B раз. <радиус>{1,4}
# Повторять один или больше раз через запятую. <время>#

Значения

В качестве значений принимаются пиксели (px), проценты (%) и другие единицы измерения, принятые в CSS. Отрицательные значения не допускаются.

none
Отменяет действие этого свойства.

Пример

<!DOCTYPE html> <html> <head> <meta charset=»utf-8″> <title>Версия сайта для мобильных устройств</title> <style media=»only screen and (max-device-width:480px)»> body { max-width: 480px; /* Максимальная ширина страницы в пикселях */ } </style> </head> <body> <h2>Текст заголовка</h2> <p>Текст примера</p> </body> </html>

В данном примере ширина страницы ограничена размером 480 пикселей для всех наладонных устройств. К ним относятся КПК, смартфоны и другие устройства, способные отображать HTML-документы.

Объектная модель

Объект.style.maxWidth

Спецификация

Каждая спецификация проходит несколько стадий одобрения.

  • Recommendation (Рекомендация) — спецификация одобрена W3C и рекомендована как стандарт.
  • Candidate Recommendation (Возможная рекомендация) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
  • Proposed Recommendation (Предлагаемая рекомендация) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
  • Working Draft (Рабочий проект) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
  • Editor’s draft (Редакторский черновик) — черновая версия стандарта после внесения правок редакторами проекта.
  • Draft (Черновик спецификации) — первая черновая версия стандарта.

Браузеры

В таблице браузеров применяются следующие обозначения.

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

Число указывает версию браузера, начиная с которой свойство поддерживается.

Автор и редакторы

Автор: Влад Мержевич

Последнее изменение: 24.04.2020

Редакторы: Влад Мержевич

Media min width and max width • Вэб-шпаргалка для интернет предпринимателей!

Мне часто задают вопросы вроде: « Стоит ли использовать медиа-запросы (media queries) min-width или max width CSS ? Те, кто знаком с адаптивным дизайном, сочтут этот вопрос странным, так как знают, что все зависит от конкретного случая. Сегодня я рад поделиться с вами собственным мнением о том, что на самом деле означает «зависит от конкретного случая ».

Ориентир на настольные ПК и max-width

Большая часть разработчиков до сих пор ориентируется только на пользователей ПК. Часто осознание ситуации приходит, когда становится ясно, сколько сил было потрачено впустую на компоненты для ПК, которые все реже востребованы из-за растущего числа мобильных пользователей. При анализе стилей подобных сайтов чаще всего встречается CSS media max width .

Если дизайн разрабатывался в первую очередь под настольные ПК, значит весь CSS должен быть насыщен объемным кодом для других ключевых точек ( breakpoints ). Если определенная ширина, заданная для ПК, является точкой отсчета, и мы не станем изменять и переписывать наш CSS , то вполне логично будет поменять в базовых стилях значения ширины окна просмотра на те, которые мы собираемся применять к экранам меньшего размера.

Вот пример, которым я часто пользуюсь ( предполагая, что .related принимает форму боковой панели ):

Такой подход при использовании со множеством компонентов может существенно увеличить объем CSS завершенного проекта. Но так как блочные элементы по умолчанию занимают 100% ширины родительского элемента, то разумнее было бы прописать все следующим образом:

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

max-width вместо более подходящего решения

Есть несколько причин использования в CSS min width max width :

  • Если вы получили дизайн только для настольной версии сайта. Если вы получили настольную версию дизайна и несколько дополнительных вариантов для мобильных устройств. В таких случаях можете использовать max-width , но только временно;
  • Вы внедряете адаптивный дизайн в уже работающий сайт, и код его стилей нельзя изменять;
  • Вы пытаетесь компенсировать отсутствие медиа-запросов, и пытаетесь реализовать это с помощью CSS вместо JavaScript .

Так что же лучше использовать?

Обращайте внимание на стандартный вариант отображения конкретного элемента. Если вам нужно переписывать стандартное состояние для меньших экранов, то используйте max-width . Если элемент можно использовать на меньших экранах и при стандартном состоянии, применяйте min-width только в тех случаях, когда элемент должен отличаться от стандартного состояния. И конечно же, я рекомендую вам позволить контенту определять, что и как должно происходить.

Таблицы – отличный пример использования CSS div max width для изменения стандартного состояния элемента, чтобы он лучше отображался на маленьких экранах. Представьте таблицу, контента в которой слишком много, чтобы отображать его полностью на маленьких устройствах. В таком случае мы можем применить следующий код:

Этот код позволит нам преобразовать каждую строку ( и ячейку ) в блок. В результате таблица может стать длинной по вертикали, но зачастую это меньшее из зол. Я имею в виду длинные таблицы, которые приходится прокручивать по горизонтали. В таких ситуациях лучше всего оставить таблицы без изменений, за исключением кода для тех браузеров, которые понимают медиа-запросы, и случаев, когда ширина экрана не превышает определенного значения ( 30em в нашем случае ).

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

Вкратце: позвольте стандартному состоянию элементов помочь вам определить, какой медиа-запрос использовать.

Данная публикация представляет собой перевод статьи « Choosing between min-width and max-width media queries » , подготовленной дружной командой проекта Интернет-технологии.ру

Статья, в которой познакомимся с медиа запросами и научимся применять их для создания адаптивных сайтов. Рассмотрим основные конструкции media запросов для использования их в вёрстке страниц с использованием фреймворков Bootstrap 3 и Bootstrap 4.

Что такое медиа запросы?

Медиа запросы (media queries) — это правила CSS, которые позволяют управлять стилями элементов в зависимости от значений технических параметров устройств. Иными словами, это конструкции, которые позволяют определять на основании некоторых условий какие стили необходимо использовать на веб-странице, а какие нет.

Медиа запросы появились в спецификации CSS3 и на сегодняшний день поддерживаются во всех современных браузерах (Chrome 4+, Firefox 3.5+, IE 9+, Opera 9+, Safari 4+).

Поддержка браузерами CSS3 медиа запросов (media queries)

Медиа запросы предназначены для создания адаптивных дизайнов сайтов. Адаптивный дизайн отличается от других тем, что он может «приспосабливаться» (видоизменяться) в зависимости от того, какую ширину экрана имеет устройство (браузер). Более подробно познакомиться с адаптивным дизайном можно в статье «Что такое адаптивная разметка».

Но при создании адаптивных веб-страниц также необходимо обратить внимание на метатег viewport. Данный тег обеспечивает корректное отображение дизайнов адаптивных сайтов на экранах устройств, имеющих высокую плотность пикселей. Иными словами, он устанавливает соответствие между CSS и физическим разрешением веб-страницы. Более подробно разобраться, как работает метатег viewport можно в статье «Знакомство с meta viewport».

Подключение метатега viewport к странице в большинстве случаях осуществляется так:

Синтаксис медиа запросов

Для создания медиа запросов используется следующий синтаксис:

Основные типы устройств:

  • all — все устройства (по умолчанию).
  • print — принтеры и режим предварительного просмотра страницы перед печатью.
  • screen — устройства с дисплеями.
  • and — требует обязательного выполнения всех указанных условий.
    Например:Стили CSS в вышеприведённом примере выполняться только в том случае, если страница будет выводиться на устройство с экраном, иметь область просмотра более 1200 пикселей в ширину, а также находиться в альбомном режиме.
  • , (запятая) — требует обязательного выполнения хотя бы одного из указанных условий в медиа запросе.Стили CSS в этом примере будут применяться к странице в двух случаях. Т.е. тогда, когда устройство будет иметь viewport не менее 544 пикселей (включительно) или ориентацию landscape.
  • not — предназначен для отрицания указанного условия. Имеет по отношению к оператору and меньший приоритет, т.е. оператор not всегда выполняется после and .Стили CSS, находящиеся в этом правиле, будут применены к странице только в том случае, если устройство не является screen и не будет иметь портретную ориентацию. А также они (стили CSS) будут применены к элементам документа ещё тогда, когда устройство (браузер) будет иметь ширину рабочей области не менее 992 пикселя (включительно).
    Т.е. запрос в вышеприведённом примере будет обрабатываться так:

Медиа функции

Для составления условия в @media можно использовать следующие фукнции:

  • width — указывает требования к ширине области просмотра устройства (браузера).
  • min-width — задаёт минимальную ширину области viewport в px , em или других единицах.
  • max-width — указывает на то, какой должна быть максимальная рабочая область устройства (браузера).
  • height , min-height и max-height — задают требования аналогично вышеприведённым функциям, но в отношении высоты viewport.
  • orientation — функция, которая проверяет то, в каком режиме ( portrait или landscape ) отображается страница.
    Пример, в котором в зависимости от ориентации экрана, отображается одна или другая картинка:
  • aspect-ratio ( min-aspect-ratio , max-aspect-ratio ) — позволяют указать то, как ширина устройства должна относиться к высоте. В качестве значений допускается использовать только целые значения.
  • resolution ( min-resolution , max-resolution ) — указывает разрешение (плотность пикселей) устройства вывода. В качестве единиц измерения разрешения используются следующие величины: dpi (количество точек на дюйм), dpcm (количество точек на сантиметр), dppx (количество точек на пиксель).

Использование медиа-запросов при подключении файлов CSS

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

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

Медиа запросы для Bootstrap 3

Организация media queries в порядке возрастания классов устройств xs, sm, md и lg (по умолчанию):

Вышеприведённые запросы необходимо использовать только в указанном порядке.

Для того чтобы media запросы можно было применять в какой угодной последовательности, их необходимо расширить включив в них дополнительно выражение max-width . Это заставит их работать только в указанном диапазоне.

Медиа запросы для Bootstrap 4

Синтаксис медиа-запросов для Bootstrap 4, которые можно использовать только в следующем порядке (последовательного увеличения минимальной ширины viewport):

Список media запросов для фреймворка Bootstrap 4, которые можно применять только в обратном порядке (в порядке убывания ширины области просмотра окна браузера):

Перечень медиа-запросов для Bootstrap 4, которые можно использовать в таблице стилей в любой последовательности:

Код JavaScript, учитывающий параметры устройств

Наиболее простой способ создания кода JavaScript, учитывающий параметры устройств (аналогично CSS медиа запросам), осуществляется с помощью метода matchMedia объекта window .

Осуществляется это следующим образом:

Например, эту возможность можно применить для асинхронной загрузки картинок в зависимости от того какой размер viewport имеет устройство (браузер).

Метод matchMedia не поддерживается Internet Explorer 9 и другими старыми браузерами. Для того чтобы обеспечить эту функциональность в старых браузерах можно воспользоваться методом mq библиотеки Modernizr.

Поддержка браузерами метода matchMedia (JavaScript) — ноябрь 2016

В 2001 году в HTML4 и CSS2 была введена поддержка аппаратно-зависимых таблиц стилей, позволившая создавать стили и таблицы стилей для определенных типов устройств. В качестве медиа-типов были определены следующие: aural , braille , handheld , print , projection , screen , tty , tv . Таким образом, браузер применял таблицу стилей только в случае, когда активизировался данный тип устройства.

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

В HTML4 медиа-запрос записывался следующим образом:

Внутри таблицы стилей также можно было объявить, что блоки объявлений должны применяться к определенным типам носителей:

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

Текущий синтаксис HTML5 и CSS3 напрямую ссылается на первую спецификацию Media Queries, обновляя правила для HTML. Также был расширен список характеристик медиа-носителей.

Медиазапросы, характеристики устройств и разрешения экрана

  • Содержание:
  • 1. Что такое медиа-запрос
  • 2. Логические операторы
  • 3. Тип носителя
  • 4. Характеристики носителя
  • 5. Метатег viewport
  • 6. На какие разрешения экрана нужно ориентироваться
  • 7. Стратегии использования медиа-запросов
Поддержка браузерами

IE: 9.0 (кроме вложенных медиазапросов)
Edge: 12.0
Firefox: 3.5
Chrome: 26.0
Safari: 6.1
Opera: 10.1
iOS Safari: 7.1
Android: 4.4
Chrome for Android: 55.0

1. Что такое медиа-запрос

В общем случае медиа-запрос состоит из ключевого слова, описывающего тип устройства (необязательный параметр) и выражения, проверяющего характеристики данного устройства. Из всех характеристик чаще всего проверяется ширина устройства width . Медиа-запрос является логическим выражением, которое возвращает истину или ложь.

Медиа-запросы могут быть добавлены следующими способами:

1) С помощью HTML:

2) С помощью правила @import внутри элемента

4) Внутри таблицы стилей style.css:

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

Для поддержки медиа-запросов в старых браузерах можно воспользоваться JavaScript-библиотекой css3-mediaqueries.js , доступную по адресу https://code.google.com/archive/p/css3-mediaqueries-js/.

2. Логические операторы

С помощью логических операторов можно создавать комбинированные медиазапросы, в которых будет проверяться соответствие нескольким условиям.

2.1. Оператор and

Оператор and связывает друг с другом разные условия:

Стили этого запроса будут применяться только для экранных устройств с шириной области просмотра не более 600px .

Стили этого запроса будут применяться для всех устройств при ширине области просмотра от 600px до 800px включительно.

Правило @media all and (max-width: 600px) <. >равнозначно правилу @media (max-width: 600px) <. >.

2.2. Оператор запятая

Оператор запятая работает по аналогии с логическим оператором or .

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

2.3. Оператор not

Оператор not позволяет сработать медиазапросу в противоположном случае. Ключевое слово not добавляется в начало медиазапроса и применяется ко всему запросу целиком, т.е. запрос

будет эквивалентен запросу

Если медиазапрос составлен с использованием оператора запятая, то отрицание будет распространяться только на ту часть, которая идет до запятой, т.е. запрос

будет эквивалентен запросу

2.4. Оператор only

Оператор only используется, чтобы скрыть стили от старых браузеров (поддерживающих синтаксис медиа-запросов CSS2).

Эти браузеры ожидают список медиа-типов, разделённых запятыми. И, согласно спецификации, они должны отсекать каждое значение непосредственно перед первым неалфавитно-цифровым символом, который не является дефисом. Таким образом, старый браузер должен интерпретировать предыдущий пример как media=»only» . Поскольку данного типа медиа-типа не существует, то и таблицы стилей будут игнорироваться.

3. Тип носителя

Тип носителя представляет собой тип устройства, например, принтеры, экраны.

Таблица 1. Тип носителя
Значение Описание
all Подходит для всех типов устройств.
print Предназначен для страничных материалов и документов, просматриваемых на экране в режиме предварительного просмотра печати.
screen Предназначен в первую очередь для экранов цветных компьютерных мониторов.
speech Предназначен для синтезаторов речи.

CSS2.1 и Media Queries 3 определяли несколько дополнительных типов, таких как aural , braille , embossed , projection , tty , tv и handheld , но они приняты устаревшими в Media Queries 4 и не будут использоваться.

4. Характеристики носителя

К характеристикам медианосителя относятся проверяемые параметры устройства. Значения, которые используются при задании характеристик, являются контрольными точками.

Таблица 2. Характеристики носителя
Параметр Описание
width Проверяет ширину области просмотра. Значения задаются в единицах длины, px , em и т.д., например, (width: 800px) . Обычно для проверки используются минимальные и максимальные значения ширины.
min-width применяет правило если ширина области просмотра больше значения, указанного в запросе, max-width — ширина области просмотра меньше значения, указанного в запросе.
height Проверяет высоту области просмотра. Значения задаются в единицах длины, px , em и т.д., например, (height: 500px) . Обычно для проверки используются минимальные и максимальные значения высоты.
min-height применяет правило если высота области просмотра больше значения, указанного в запросе, max-height — высота области просмотра которого меньше значения, указанного в запросе.
aspect-ratio Проверяет соотношение ширины к высоте области просмотра. Широкоэкранный дисплей с соотношением сторон 16:9 может быть помечен как (aspect-ratio: 16/9) .
min-aspect-ratio проверяет минимальное соотношение, max-aspect-ratio — максимальное соотношение ширины к высоте области просмотра.
orientation Проверяет ориентацию области просмотра. Принимает два значения: (orientation: portrait) и (orientation: landscape) .
resolution Проверяет разрешение экрана (количество пикселей). Значения также могут проверять количество точек на дюйм (dpi) или количество точек на сантиметр (dpcm), например, (resolution: 300dpi) .
min-resolution проверяет минимальное разрешение экрана, max-resolution — максимальное.

grid

Проверяет, относится ли определенное устройство к устройствам с фиксированным размером символов. Размеры букв на таком устройстве занимают одинаковую ширину и высоту и выстраиваются по заданной сетке. К подобным устройствам можно отнести терминалы, а также телефоны, которые поддерживают только один шрифт.

—>

color Проверяет количество бит на каждый из цветовых компонентов устройства вывода. Например, (min-color: 4) означает, что экран конкретного устройства должен иметь 4-битную глубину цвета.
min-color проверяет минимальное количество бит, max-color — максимальное количество бит. color-index Проверяет количество записей в таблице подстановки цветов. В качестве значения указывается положительное число, например, (color-index: 256) .
min-color-index проверяет минимальное количество записей, max-color-index — максимальное количество записей. monochrome Проверяет количество битов на пиксель монохромного устройства. Значение задается целым положительным числом, например, (min-monochrome: 8) .
min-monochrome проверяет минимальное количество битов, max-monochrome — максимальное количество битов. -webkit-device-pixel-ratio Задаёт количество физических пикселей устройства на каждый CSS-пиксель.

device-width , device-height , device-aspect-ratio являются устаревшими API, они удалены из Media Queries Level 4.

5. Метатег viewport

Для управления разметкой в мобильных браузерах используется метатег viewport . Изначально данный тег был представлен разработчиками Apple для браузера Safari на iOS. Мобильные браузеры отображают страницы в виртуальном окне просмотра, которое обычно шире, чем экран устройства. С помощью метатега viewport можно контролировать размер окна просмотра и масштаб.

Страницы, адаптированные для просмотра на разных типах устройств, должны содержать в разделе метатег viewport .

Свойство width определяет виртуальную ширину окна просмотра, значение device-width — физическую ширину устройства. Другими словами, width отражает значение document.documentElement.clientWidth , а device-width — screen.width .

При первой загрузке страницы свойство initial-scale управляет начальным уровнем масштабирования, initial-scale=1 означает, что 1 пиксель окна просмотра = 1 пиксель CSS.

Рис. 2. Разница между width и device-width

6. На какие размеры экрана нужно ориентироваться

При составлении медиазапросов нужно ориентироваться на так называемые переломные (контрольные) точки дизайна, т.е. такие значения ширины области просмотра, в которых дизайн сайта существенно меняется, например, появляется горизонтальная полоса прокрутки. Чтобы определить эти точки, нужно открыть сайт в браузере и постепенно уменьшать область просмотра.

Чтобы проверить, как выглядит ваш сайт на разных устройствах, можно воспользоваться сервисом Responsive design testing for the masses.

7. Стратегии использования медиа-запросов

Для создания дизайна, позволяющего лучшим образом отображать сайт на различных устройствах, используют общие стратегии медиа-запросов:
1) Уменьшение количества колонок (столбцов) и постепенная отмена обтекания для мобильных устройств.
2) Использование свойства max-width вместо width при задании ширины блока-контейнера.
3) Уменьшение полей и отступов на мобильных устройствах (например, нижних отступов между заголовком и текстом, левого отступа для списков и т.п.).
4) Уменьшение размеров шрифтов для мобильных устройств.
5) Превращение линейных навигационных меню в раскрывающиеся.
6) Скрытие второстепенного содержимого на мобильных устройствах с помощью display: none .
7) Подключение фоновых изображений уменьшенных размеров.

Рекомендуем к прочтению

CSS правило @media

width Ширина окна просмотра. css2
height Высота окна просмотра.
orientation Ориентация окна просмотра.
scan Сканирование окна просмотра.
aspect-ratio Соотношение ширины и высоты.
grid Определяет, основано ли выходное устройство на сеточной системе или на растровой графике.
color Определяет количество бит на цветовой компонент выходного устройства. Если устройство не является цветным, значением будет 0.
color-gamut Примерная шкала цветов, поддерживаемая пользовательским агентом и выходным устройством.
color-index Определяет количество компонентов таблицы цветов выходного устройства. Если устройство не использует таблицу цветов, значением будет 0.
inverted-colors Определяет, может ли браузер или операционная система инвертировать цвета.
hover Определяет, дает ли возможность первичный механизм ввода навести указатель мыши на элемент.
any-hover Определяет, дает ли возможность доступный механизм ввода навести указатель мыши на элемент.
any-pointer Определяет, является ли доступный механизм ввода указывающим устройством или нет.
light-level Определяет уровень яркости.
max-aspect-ratio Максимальное соотношение ширины и высоты отображаемой области.
max-color Максимальное количество бит на каждый цветовой компонент выходного устройства.
max-color-index Максимальное количество цветов, которое может отобразить браузер.
max-height Максимальная высота отображаемой области.
max-monochrome Максимальное количество бит на цвет на монохромном устройстве.
max-resolution Максимальное разрешение устройства.
max-width Максимальная ширина отображаемой области.
min-aspect-ratio Минимальное соотношение ширины и высоты отображаемой области.
min-color Минимальное количество бит на каждый цветовой компонент выходного устройства.
min-color-index Минимальное количество цветов, которое может отобразить браузер.
min-height Минимальная высота отображаемой области.
min-monochrome Минимальное количество бит на цвет на монохромном устройстве.
min-resolution Минимальное разрешение устройства.
min-width Минимальная ширина отображаемой области.
monochrome Определяет количество бит на пиксель. Если устройство не является монохромным, значением будет 0.
orientation Ориентация окна просмотра.
overflow-block Определяет, каким образом выходное устройство контролирует контент, который выходит за границы окна просмотра по направлению оси блока.
overflow-inline Определяет, может ли прокручиваться контент, который выходит за границы окна просмотра по направлению строчной оси.
pointer Определяет, является ли первичный механизм ввода указывающим устройством.
resolution Определяет разрешение выходного устройства.
scripting Определяет, доступны ли языки сценариев.
update Определяет, как быстро выходное устройство может изменить внешний вид контента.

Логика применения CSS Media Queries

Media Queries определяют область действия правил стилей. Сегодня я предлагаю вам рассмотреть логику применения Media Queries — неотъемлемой часть спецификации CSS3. Применение данных правил упрощает верстку страниц, в особенности где используются адаптивный дизайн, выводимые циклом элементы и другое.

If (Если)

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

<!--[if IE 8]><link href="/ie8.css" rel="stylesheet" media="all" /><![endif]-->

And (И)

Объединение условий.

@media (min-width: 600px) and (max-width: 800px) { html { background: red; } }

Or (Или)

Перечисление

@media (max-width: 600px), (min-width: 800px) { html { background: red; } }

Технически, запятая относится к перечислению, но по факту работает как элемент «или».Not (Не)

Обратная логика с элементом Not.

@media not all and (max-width: 600px) { html { background: red; } }

Данное выражение работает так, not x and y = not (x and y) ≠ (not x) and y. Т.е. оно не работает индивидуально для части с указанием max-width, хотя и часть написана через and. Вот если бы была запятая, тогда да.

Эксклюзивный

Когда необходимы эксклюзивные правила.

@media (max-width: 400px) { html { background: red; } }
@media (min-width: 401px) and (max-width: 800px) { html { background: green; } }
@media (min-width: 801px) { html { background: blue; } }

Логически это работает как переключатель состояний, но при этом имея значение по-умолчанию.

Переопределение

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

@media (min-width: 400px) { html { background: red; } }
@media (min-width: 600px) { html { background: green; } }
@media (min-width: 800px) { html { background: blue; } }

Такая схема будет работать, потому что условия отсортированы правильно. Если изменить порядок то в окне браузера шириной более 800px будет красный фон.

Сначала для мобильных

Прописываете сначала стили для маленьких экранов, а потом переопределяете для больших. Тут главное свойство min-width.

html { background: red; }
@media (min-width: 600px) { html { background: green; } }

Сначала для настольных компьютеров

Прописываете сначала стили для больших экранов, а потом переопределяете для маленьких. Тут главное свойство max-width.

html { background: red; }
@media (max-width: 600px) { html { background: green; } }

Необычные

Вы можете все усложнить насколько хотите.

@media only screen and (min-width: 100px),
not all and (min-width: 100px),
not print and (min-height: 100px),
(color),
(min-height: 100px) and (max-height: 1000px),
handheld and (orientation: landscape) {
html { background: red; }
}

Обратите внимание на ключевое слово only, оно было использовано для предотвращения использования стиля для браузеров не поддерживающих Media Queries.

Оригинал статьи.

← Увеличиваем количество символов в поиске Joomla 1.5    Включение вывода ошибок в PHP →

диапазонов медиазапросов › zzzzBov.com

Спецификация Media Queries Level 4 представила новый синтаксис диапазона для медиазапросов.

  @media (480 пикселей <= ширина < 768 пикселей)  

Это особенно полезно, поскольку медиа-запросы min-* и max-* всегда включали свои граничные значения.

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

  @media (максимальная ширина: 768 пикселей) {
  .пример {
    отступ: 10 пикселей;
    ширина: 100%;
  }
}

@media (минимальная ширина: 768 пикселей) {
  .пример {
    // о, о! Будут применяться как поля, так и отступы.
    // когда ширина браузера ровно 768 пикселей 😱
    поле: 15 пикселей;
    ширина: 200 пикселей;
  }
}  

Классическое решение — убедиться, что граничные значения отличаются на 1 пиксель.

  @media (максимальная ширина: 767 пикселей) {...}
@media (минимальная ширина: 768 пикселей) {...}  

Это прекрасно работает для единиц измерения px , но может быть проблематичным для значений em .

  @media (макс. ширина: 29em) {...}
@media (min-width: 30em) {...} //значительный пробел  

Поскольку em единиц могут быть изменены пользователем с помощью настроек размера шрифта браузера, я обычно использовал 0,001 в качестве значения «эпсилон», чтобы убедиться, что значения em меньше, чем 1px друг от друга, при этом не вызывая перекрытия диапазона:

  @media (макс. ширина: 29,999 em) {...}
@media (минимальная ширина: 30em) {...}  

Синтаксис диапазона для медиа-запросов упрощает это, допуская как включающие, так и исключающие границы для границ min-* и max-*:

  @media (ширина < 30em) {...}
@media (ширина <= 30em) {...}  

К сожалению, в настоящее время медиа-запросы диапазона почти не поддерживаются браузерами.

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

Отклоненные медиа-запросы

Первая функция медиазапроса, необходимая для обработки непересекающихся диапазонов медиазапросов, — это оператор , а не медиазапроса.

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

Оператор , а не отменяет весь медиа-запрос, к которому он применяется. Например, не экран и (минимальная ширина: 480 пикселей) соответствует устройствам без экрана, ширина которых меньше 480 пикселей. Логику лучше было бы выразить как не (экран и (мин-ширина: 480 пикселей)) , хотя в противном случае это могло бы выглядеть как (не экран) и (мин-ширина: 480 пикселей) .

Более того, оператор , а не применяется только к одному медиа-запросу, даже если в список медиа-запроса в объявлении @media включено несколько.

Например, @media not screen, (min-width: 480px) лучше представить как (не screen) или (min-width: 480px) , хотя может показаться, что его следует применять как не (экран или (минимальная ширина: 480 пикселей) , учитывая, как не ведет себя с и .

Кроме того, для оператора , а не требуется избыточный и многословный тип носителя. Вместо того, чтобы использовать @media not (min-width: 480px) , вам нужно будет использовать @media not all и (min-width: 480px) .

Со всеми этими предостережениями может быть трудно понять, как отрицательные медиа-запросы могут быть полезны для диапазонов медиа-запросов. Преимущество инвертированного диапазона заключается в том, что он включает границы min-* и max-*...

... к эксклюзивным границам max-* и min-* соответственно.

@media not all and (max-width: 30em) {...} и @media (max-width: 30em) {...} создают бесшовный диапазон с первым медиазапросом, представляющим ширину на меньше чем 30em, и второй медиа-запрос, представляющий ширину , большую или равную 30em.

Хотя это и полезно, мы по-прежнему не можем создать единый медиа-запрос с верхней и нижней границами, где одна включает, а другая исключает.Для этого нам нужна еще одна функция...

Вложенные мультимедийные запросы

Вторая функция медиазапроса, необходимая для обработки непересекающихся диапазонов медиазапроса, — это вложенность медиазапроса.

При использовании вложенных медиа-запросов одно объявление @media может применяться со вторым объявлением @media , которое также применяется в первом. Поскольку это отдельные объявления, оператор , а не применяется только к одному, и они по-прежнему объединяются, как если бы они были объединены с и :

.
  @экран мультимедиа {
  @media (минимальная ширина: 30em) {
    // это применимо только к экранам с шириной больше или равной 30em (480px)
  }
}  

Nesting довольно хорошо поддерживается браузерами, за исключением IE11.На момент написания статьи оставалось всего несколько месяцев до того, как Microsoft прекратит поддержку IE.

Теперь все вместе

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

Если мы хотим включить нижние границы, используйте min-width для обеих границ:

  @media (минимальная ширина: 30em) {
  @media не все и (мин. ширина: 64em) {
    .пример { … }
  }
}  

Это эквивалентно

  @media (30em <= ширина < 64em) {
  .пример { … }
}  

Если мы хотим включить верхние границы, используйте max-width для обеих границ:

  @media не все и (макс. ширина: 30em) {
  @media (максимальная ширина: 64em) {
    .пример { … }
  }
}  

Это эквивалентно

  @media (30em < ширина <= 64em) {
  .пример { … }
}  

тл;др:

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

.
  @media (минимальная ширина: [нижняя граница]) {
  @media не все и (минимальная ширина: [верхняя граница]) {
    .пример { … }
  }
}  

и, может быть, через пару лет вы сможете упростить это до

.
  @media ([нижняя граница] <= ширина < [верхняя граница]) {
  .пример { … }
}  

минимальная и максимальная ширина в медиа-запросах

Адаптивный веб-сайт называется динамическим веб-сайтом, который меняет свою структуру в зависимости от устройства, на котором он отображается. Он может изменить свое поведение в зависимости от ширины экрана, разрешения экрана, ориентации и т. д. устройства.Теперь, чтобы сделать такой сайт, разработчики используют медиа-запросы. Здесь, в этой статье, обсуждаются следующие темы.
  1. Медиа-запрос
  2. Точки останова CSS
  3. Минимальная ширина
  4. Максимальная ширина
  5. Сочетание обоих
  6. Когда использовать что: min-width или max-width

Медиа-запрос

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

Эти запросы в основном позволяют изменять веб-макет в зависимости от типа устройства, такого как настольный компьютер, ноутбук, мобильное устройство и т. д. Здесь мы показали вам, как определить мультимедийный запрос.

Синтаксис

Экран @media и (min-width:420px) и (max-width:650px)

@rule

тип носителя

функция мультимедиа

функция мультимедиа

оператор

оператор

Медиа-запрос всегда начинается с правила @media и требует, чтобы вы указали тип носителя, к которому должен применяться запрос.Затем вам нужно указать тип мультимедиа экрана и использовать такие операторы, как «и», чтобы объединить такие функции мультимедиа, как минимальная или максимальная ширина.

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

Точки останова CSS

Точками останова в CSS называются те точки, в которых структура веб-сайта изменяется в соответствии с размером экрана типа устройства. Точки останова определяются либо на основе типа устройства, либо на основе типа контента.Ниже приведены некоторые общие точки останова.

  1. Для мобильных устройств: от 320 до 480 пикселей
  2. Для планшетов и iPad: от 481 до 768 пикселей
  3. Для ноутбуков: от 769 до 1024 пикселей
  4. Для настольных компьютеров: от 1025 до 1200 пикселей

При чтении объяснений выше вы, должно быть, заметили, что мы использовали две медиа-функции min-width и max-width. Вам должно быть интересно, что это такое и когда их использовать. Ниже мы предоставили вам все необходимые детали.

Минимальная ширина

Функция носителя min-width указывает минимальную ширину определенного устройства.Например, в приведенном выше разделе мы указали ширину экрана в зависимости от типа устройства, например, минимальная ширина экрана мобильных устройств составляет 320 пикселей.

Пример

Экран @media и (минимальная ширина: 600 пикселей) {

p {

размер шрифта: 16 пикселей;

}

}

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

Максимальная ширина

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

Пример

Экран @media и (максимальная ширина: 700 пикселей) {

p {

размер шрифта: 25 пикселей;

}

}

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

Сочетание обоих

Вы также можете использовать обе мультимедийные функции вместе, объединив их с оператором «и».

Пример

P {

стиль шрифта: полужирный;

}

Экран @media и (минимальная ширина: 600 пикселей) и (максимальная ширина: 700 пикселей) {

p {

стиль шрифта: курсив;

}

}

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

Когда использовать что: min-width или max-width

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

Между тем, если вы разрабатываете сначала для более крупных устройств, используйте max-width, а затем соответствующим образом настройте для меньших устройств.

Заключение

Min-width и max-width — это медиа-функции, соответствующие определенному медиа-типу, указанному в медиа-запросе.Минимальная ширина указывает минимальную ширину экрана конкретного устройства, в то время как функция мультимедиа максимальной ширины указывает максимальную ширину экрана конкретного устройства. Если вы сначала разрабатываете свой веб-сайт для небольших устройств, установите начальные точки останова с минимальной шириной, тогда как, если вы сначала разрабатываете дизайн для больших устройств, используйте максимальную ширину. В этом посте подробно обсуждаются функции мультимедиа min-width и max-width вместе с соответствующими примерами.

Выбор между медиа-запросами минимальной и максимальной ширины — The Haystack

Мне часто задают вариант следующего вопроса:

Должен ли я использовать медиа-запросы минимальной или максимальной ширины?

Очевидный ответ, конечно же, «да».Но знаете, о чем спрашивают: какой из двух лучше ?

Тем, для кого адаптивный дизайн стал второй натурой, этот вопрос может показаться странным, и они знают, что ответ — «это зависит». Но, увидев множество реализаций адаптивного дизайна, я понял, что многие дизайнеры и разработчики не совсем уверены. И я рад поделиться своим собственным мнением о том, что означает «это зависит» в отношении этого конкретного вопроса.

Рабочий стол первый и максимальная ширина

Приличное количество дизайнеров/разработчиков по-прежнему считают «рабочий стол» своим основным воплощением дизайна, а другие (как правило, меньшие) размеры — второстепенными; часто они появляются как второстепенные мысли, поскольку могут быть значительные визуальные подсказки относительно количества усилий, затраченных на эти другие размеры экрана по сравнению с их аналогами для настольных компьютеров.Часто, когда кто-то исследует CSS этих сайтов, `max-width` является предпочтительной медиа-функцией.

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

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

 
.содержание {
  ширина: 60%;
}

.Связанный {
  ширина: 40%;
}

Экран @media и (максимальная ширина: 37,4 em) {
  .содержание,
  .Связанный {
    ширина: 100%;
  }
}
 
 

В приведенном выше примере многое упущено, но я уверен, что вы поняли идею.Этот подход, когда он используется для множества компонентов, может значительно увеличить количество CSS, необходимого для завершения проекта. Но главная проблема заключается в том, насколько это нелогично, потому что, если учесть тот факт, что элементы блочного уровня по умолчанию на 100% являются их родителем, то следующее имеет гораздо больше смысла:

 
Экран @media и (минимальная ширина: 37,5 em) {
  .содержание {
    ширина: 60%;
  }

  .Связанный {
    ширина: 40%;
  }
}
 
 

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

Использование max-width вопреки здравому смыслу

Есть несколько причин, по которым, даже если вы знаете лучше, вы можете сознательно выбрать подход, аналогичный описанному выше подходу max-width :

  1. Вы разработчик, и вы получили от дизайнера композицию только для настольных компьютеров, в первую очередь для настольных компьютеров или других размеров.Как ты можешь знать? Если вы разрабатывали или получали дизайны только для настольных компьютеров, это то, с чем вы имеете дело. Если у вас есть хороший детализированный дизайн настольного компьютера с добавлением нескольких примеров «мобильных» или «планшетных», это то, с чем вы имеете дело. В этих случаях да пребудет с вами max-width , если только у вас нет бюджета и/или графика, позволяющего проводить рефакторинг во время разработки.
  2. Вы делаете существующий веб-сайт адаптивным, а существующий CSS является багажом дизайна, который вы унаследовали и не можете изменить по какой-либо причине.
  3. Вы компенсируете тот факт, что в настоящее время у нас нет запросов к элементам, и вы обрабатываете это с помощью CSS вместо использования полифилла JavaScript для несуществующей спецификации.

Итак, что лучше всего использовать?

Вот мое разъяснение «это зависит» для этого конкретного вопроса. И помните, что это всего лишь мое мнение, основанное на собственном опыте: посмотрите на отображение данного элемента по умолчанию. Если вам нужно переопределить это значение по умолчанию для небольших экранов, используйте max-width .Если значение по умолчанию можно использовать на маленьких экранах, используйте min-width и только тогда, когда элемент должен отличаться от значения по умолчанию. И, конечно же, я рекомендую позволить контенту определять, где это происходит.

Хорошим примером использования max-width для переопределения отображения элемента по умолчанию, чтобы он лучше работал на небольших экранах, является использование таблиц. Представьте себе таблицу, которая содержит слишком много содержимого для отображения в форме по умолчанию на маленьких экранах. Один подход может быть:

 
Только экран @media и (max-width: 30em) {
  .большой стол тр,
  .big-таблица тд {
    дисплей: блок;
  }
}
 
 

Это превращает каждую строку (и ячейку) в блок на узких экранах. Таблица может стать довольно длинной по вертикали, и обычно требуется больше стилей, но часто это лучше, чем горизонтальная прокрутка вперед и назад, которая в противном случае потребовалась бы для чтения содержимого.

В этом случае имеет смысл оставить таблицу в форме по умолчанию, за исключением браузеров, которые понимают медиа-запрос и где экран не больше, чем, в данном случае, 30em .

Другие элементы (я бы рискнул сказать, что большинство других элементов), которые имеют значения по умолчанию, которые отлично работают на меньших экранах, требуют изменения только при необходимости на больших экранах ; использование min-width - это хороший выбор.

Короче говоря: пусть значения элементов по умолчанию помогают определить, какую медиа-функцию использовать в ваших медиа-запросах.

Спасибо Брэду Фросту за обзор. У него также есть пост с похожими темами.

Разница между свойствами CSS width, min-width и max-width

Фотография на обложке от Маркуса Списке на Unsplash.

CSS имеет три свойства, связанные с шириной:

  • ширина
  • минимальная ширина
  • максимальная ширина

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

Реальность такова, что они ведут себя одинаково в определенных ситуациях, но у них есть свои отличия.Об этом мы и поговорим в этой статье.

Сначала мы подробно обсудим свойства с наглядными примерами. Затем мы обсудим их сходства и различия.

Давайте погрузимся.


ширина свойство

Свойство width используется для определения ширины элемента при отображении в браузере. Рассматриваемый элемент должен быть изображением, элементом уровня блока или встроенным элементом , имеющим свойство display блока или встроенный блок .

Свойство принимает в качестве значений комбинацию из чисел и допустимых единиц измерения CSS.

  /**
 * Единица em может быть заменена другими единицами, такими как
 * px, %, vmin, vmax и т.д.
 */
.селектор {
    ширина: 30см; /* Занимаем 30em родительского контейнера */
}
  
Войти в полноэкранный режимВыйти из полноэкранного режима

Свойство min-width

Это свойство, как следует из названия, определяет минимальную ширину блочного элемента (или изображения) при отображении в браузере.Это означает, что если дочерний элемент имеет минимальную ширину , например. 0.1em элемент будет занимать всю ширину родителя. У него есть особый вариант использования, который мы обсудим позже.

Он имеет хорошую поддержку браузеров, поэтому вы можете быть уверены в его использовании.

Подобно свойству width , оно принимает в качестве значений комбинацию чисел и допустимых единиц измерения CSS.

  /**
 * Единица em может быть заменена другими единицами, такими как
 * px, %, vmin, vmax e.т.к.
 */
.селектор {
    минимальная ширина: 30em; /* Занять не менее 30em родительского контейнера */
}
  
Войти в полноэкранный режимВыйти из полноэкранного режима

Свойство max-width

Свойство max-width определяет максимальную ширину блочного элемента (или изображения) при отображении на экране браузером.

Это означает, что если дочерний элемент имеет максимальную ширину меньше, чем контейнер родителя, он будет занимать указанную ширину, но если он имеет максимальную ширину , равную ширине контейнера родителя, он будет занимать всю родительскую область. ширина.

В большинстве случаев max-width ведет себя как свойство width , но не всегда, как мы увидим позже.

  /**
 * Единица em может быть заменена другими единицами, такими как
 * px, %, vmin, vmax и т.д.
 */
.селектор {
    максимальная ширина: 30em; /* Занимают не более 30em родительского контейнера */
}
  
Войти в полноэкранный режимВыйти из полноэкранного режима

На изображении ниже дочерний элемент имеет значение max-width 30em .В этом окне просмотра оно ведет себя так же, как свойство width при сравнении.

Теперь давайте обсудим их сходства и различия.

Сходства и различия между шириной , min-width и max-width

Сходства

Все три свойства похожи в следующем:

  • Они определяют ширину элемента.
  • В качестве значений они принимают числа и допустимые единицы измерения CSS.
  • Работа над элементами блочного уровня или любыми элементами, имеющими свойство display , отличное от inline . Изображение является исключением.

Отличия

Между этими свойствами есть три основных различия, а именно:

  • Размер
  • Медиа-запросы для адаптивного веб-дизайна
  • Адаптивные изображения

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

ширина размер

Размер фиксирован. Следовательно, дочерний элемент шириной 30em будет одинаковым независимо от области просмотра браузера.

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

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

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

Но когда мы уменьшаем ширину до 10em , мы получаем следующий результат:

минимальная ширина размер

Значение свойства min-width позволит дочернему элементу занимать всю ширину своего родительского контейнера, если значение достаточно велико и окно просмотра браузера больше (как мы видели ранее).

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

Кроме того, когда область просмотра уменьшается, в браузере происходит переполнение, как показано на изображении ниже.

Но когда мы уменьшаем ширину дочерних элементов до 10em , что меньше ширины области просмотра, дочерний элемент становится той же ширины, что и родительский элемент.

максимальная ширина размер

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

Для начала мы уменьшим область просмотра, и результат будет таким же, как если бы мы уменьшили область просмотра для свойства width .

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

Когда максимальная ширина уменьшается до 10em в этом окне просмотра, оно будет вести себя как свойство width .

Медиа-запросы для адаптивного веб-дизайна

Философия адаптивного веб-дизайна заключается в том, чтобы дизайн адаптировался к разным разрешениям экрана от мобильного до настольного компьютера, как впервые предложил Итан Маркотт в 2010 году.

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

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

Эта ширина является минимальной шириной . Можете ли вы угадать свойство, которое мы будем использовать? Это свойство min-width . Минимальная ширина , при которой дизайн разрывается, предоставляется как значение свойства min-width . Это значение увеличивается каждый раз, когда дизайн ломается, и дизайнерам нужно изменить макет дизайна.

Этот подход является рекомендуемой практикой под названием дизайн для содержимого, а не разрешения устройства .

  @media screen and (min-width: 48em) { /* Обратите внимание на свойство min-width */
    /**
     * Блоки кода в этом медиа-запросе
     * будет работать только для устройств с по крайней мере
     * 48см. Предполагая размер шрифта по умолчанию 16px,
     * это будет 48 * 16 = 768px. 768px это минимум
     * ширина устройства iPad (по состоянию на август 2020 г.).
     */
}
  
Войти в полноэкранный режимВыйти из полноэкранного режима

Свойство max-width весьма полезно, когда дизайн изначально предназначен для больших разрешений и его необходимо уменьшить для меньших.

  @media screen and (max-width: 48em) { /* Обратите внимание на свойство max-width */
    /**
     * Блоки кода в этом медиа-запросе
     * будет работать только для устройств с не более чем
     * 48em, т.е. размеры экрана 768px и ниже.
     * Предполагается, что размер шрифта по умолчанию составляет 16 пикселей.
     */
}
  
Войти в полноэкранный режимВыйти из полноэкранного режима

Свойство width не является хорошим кандидатом для изменения содержимого при адаптивном веб-дизайне.

Адаптивные изображения

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

Теперь вопрос: как сделать изображения адаптивными?

Ответ прост: max-width . Вот чем это свойство отличается от своих аналогов, т.е.е. ширина и минимальная ширина .

В некоторых случаях свойство width сделает ваши изображения "отзывчивыми", когда вы заставите изображения занимать всю ширину своего родительского контейнера.

  .изображение-селектор {
    ширина: 100%;
}
  
Войти в полноэкранный режимВыйти из полноэкранного режима

Рекомендуется использовать свойство max-width .

  .изображение-селектор {
    максимальная ширина: 100%; /* Никогда не превышайте родительский контейнер.*/
}
  
Войти в полноэкранный режимВыйти из полноэкранного режима

Свойство min-width является запретной зоной для адаптивных изображений, поскольку существует высокая вероятность того, что изображение выйдет за пределы своего родительского контейнера, а иногда это может привести к искажению изображения.

Эти различия приведены в следующей таблице.

Различия ширина минимальная ширина максимальная ширина
Размеры Исправлено.Следовательно, дочерний элемент, имеющий ширину 45% , 45em или другие значения свойства width , будет одинаковым независимо от области просмотра браузера. В нижнем окне просмотра ширина дочернего элемента будет равна ширине родительского контейнера. Когда область просмотра становится меньше, это может привести к переполнению области просмотра браузера или родительского контейнера. Значение свойства min-width позволит дочернему элементу занимать всю ширину своего родительского контейнера, если значение достаточно велико и окно просмотра браузера больше.В более низком окне просмотра это вызовет переполнение в окне просмотра браузера, но когда значение min-width меньше, чем окно просмотра, тогда ширина дочернего элемента будет равна ширине родителя. В большинстве случаев дочерний элемент, имеющий свойство max-width , будет вести себя как свойство width , но когда область просмотра браузера будет уменьшена, вы увидите разницу в размере по сравнению со свойством width и в определенном окне просмотра size ширина дочернего элемента будет равна ширине родителя.
Медиа-запросы для адаптивного веб-дизайна Плохо Очень хорошо Хорошо
Адаптивные изображения Хорошо Плохо Очень хорошо ( настоятельно рекомендуется )

Заключение

В этой статье мы обсудили свойства width , min-width и max-width , включая их сходства и различия, но это не исчерпывающий и не исчерпывающий список.Я призываю вас к дальнейшим исследованиям.

Если у вас есть вопросы, с удовольствием отвечу на них в комментариях.

Общие мультимедийные запросы · GitHub

/* Это небольшая выборка различных подходов к медиа-запросам.
Пункт : они повсюду. Часть "проблемы" (если можно позвонить по номеру
это что) может быть связано с целевой аудиторией каждого сайта/фреймворка.Еще
может заключаться в том, что его действительно сложно протестировать на множестве разных устройств.
В любом случае, было бы неплохо, если бы была стандартная базовая линия, которую
можно использовать в качестве отправной точки для обеспечения максимальной совместимости и охвата. */
/* ============================================== ===========================
Каркасы
================================================ ========================= */
/* [Bootstrap](http://twitter.github.com/bootstrap/)
================================================ ========================= */
@media (минимальная ширина: 768 пикселей) и (максимальная ширина: 979 пикселей) {}
@media (максимальная ширина: 767 пикселей) {}
@media (минимальная ширина: 1200 пикселей) {}
@media (минимальная ширина: 768 пикселей) и (максимальная ширина: 979 пикселей) {}
@media (максимальная ширина: 767 пикселей) {}
@media (максимальная ширина: 480 пикселей) {}
@media (максимальная ширина: 979 пикселей) {}
@media (минимальная ширина: 980 пикселей) {}
/* [320 и выше](http://stuffandnonsense.co.uk/projects/320andup/)
================================================ ========================= */
Только экран @media и (минимальная ширина: 480 пикселей) {}
Только экран @media и (минимальная ширина: 600 пикселей) {}
@media только экран и (минимальная ширина: 768 пикселей) {}
@media только экран и (минимальная ширина: 992px) {}
@media только экран и (минимальная ширина: 1382px) {}
@медиа
только экран и (-webkit-min-device-pixel-ratio: 1.5),
только экран и (min--moz-device-pixel-ratio: 1,5),
только экран и (min-device-pixel-ratio: 1,5) {}
/* [Система Золотой сетки](http://goldengridsystem.com/)
================================================ ========================= */
@media screen and (min-width: 40em) {} /* 640px */
@media screen and (min-width: 45em) {} /* 720px */
экран @media и (min-width: 55.5em) {} /* 888px */
@media screen and (min-width: 61.5em) {} /* 984px */
@media screen and (min-width: 75em) {} /* 1200px */
@media screen and (min-width: 87em) {} /* 1392px */
@media screen and (min-width: 105em) {} /* 1680px */
@media screen and (min-width: 117em) {} /* 1872px */
@media screen and (min-width: 130em) {} /* 2080px */
/* [Гибкая базовая сетка](http://fluidbaselinegrid.ком/)
================================================ ========================= */
Только экран @media и (минимальная ширина: 320 пикселей) {}
Только экран @media и (минимальная ширина: 480 пикселей) {}
Только экран @media и (минимальная ширина: 600 пикселей) {}
@media только экран и (минимальная ширина: 768 пикселей) {}
@media только экран и (минимальная ширина: 1024px) {}
Только экран @media и (минимальная ширина: 1280 пикселей) {}
Только экран @media и (минимальная ширина: 1400 пикселей) {}
/* ============================================== ===========================
веб-сайтов
================================================ ========================= */
/* [Бостон глобус](http://www.bostonglobe.com/)
================================================ ========================= */
/* глобус-main.css */
@media (максимальная ширина устройства: 480 пикселей) {}
Экран @media и (минимальная ширина: 480 пикселей), напечатайте {}
Экран @media и (минимальная ширина: 480 пикселей) и (максимальная ширина: 639 пикселей), напечатайте {}
@media screen и (минимальная ширина: 481px) и (max-width: 799px), print {}
Экран @media и (минимальная ширина: 788 пикселей) и (максимальная ширина: 1050 пикселей), напечатайте {}
Экран @media и (max-width:639px) {}
Экран @media и (минимальная ширина: 640 пикселей) и (максимальная ширина: 809 пикселей), напечатайте {}
Экран @media и (минимальная ширина: 600 пикселей), напечатайте {}
Экран @media и (минимальная ширина: 640 пикселей), напечатайте {}
Экран @media и (минимальная ширина: 810 пикселей), напечатайте {}
Экран @media и (минимальная ширина: 810 пикселей) {}
Экран @media и (минимальная ширина: 810 пикселей) и (максимальная ширина: 930 пикселей) {}
Экран @media и (минимальная ширина: 931px) {}
Экран @media и (минимальная ширина: 900 пикселей) {}
Экран @media и (минимальная ширина: 1100 пикселей) {}
Экран @media и (минимальная ширина: 1200 пикселей) {}
Экран @media и (минимальная ширина: 1400 пикселей){}
@media print {}
/* [Hicksdesign](http://hicksdesign.co.uk/)
================================================ ========================= */
@media портативный компьютер и (макс. ширина: 480 пикселей),
Экран и (максимальная ширина устройства: 480 пикселей),
Экран и (максимальная ширина: 600 пикселей) {}
Экран @media и (минимальная ширина: 920 пикселей) {}
Экран @media и (минимальная ширина: 1350 пикселей) {}
Экран @media и (минимальная ширина: 1500 пикселей) {}
Только экран @media и (max-device-width: 480px) {}
Только экран @media и (минимальная ширина устройства: 768 пикселей) и (максимальная ширина устройства: 1024 пикселей) {}
/* [Саймон Коллисон](http://colly.ком/)
================================================ ========================= */
@media (минимальная ширина устройства: 1024 пикселей) и (максимальная ширина: 989 пикселей),
Экран и (максимальная ширина устройства: 480 пикселей),
(максимальная ширина устройства: 480 пикселей) и (ориентация: горизонтальная),
(минимальная ширина устройства: 481 пикселей) и (максимальная ширина устройства: 1024 пикселей) и (ориентация: книжная) {}
@media (минимальная ширина устройства: 1024 пикселей) и (максимальная ширина: 509 пикселей),
(максимальная ширина устройства: 480 пикселей) и (ориентация: книжная) {}
/* [Итан Маркотт](http://ethanmarcotte.ком/)
================================================ ========================= */
экран @media и (max-device-width: 480px),
Экран и (максимальная ширина: 600 пикселей) {}
Экран @media и (минимальная ширина: 600 пикселей) {}
Экран @media и (минимальная ширина: 860 пикселей) {}
Экран @media и (минимальная ширина: 1200 пикселей) {}
/* [Национальная безопасность](http://www.hsgac.senate.gov/)
================================================ ========================= */
Только экран @media и (максимальная ширина: 1265 пикселей) {}
Только экран @media и (максимальная ширина: 960 пикселей) {}
Только экран @media и (максимальная ширина: 767 пикселей) {}
Только экран @media и (макс. ширина: 479 пикселей) {}
@media только экран и (минимальная ширина: 961px) {}
Только экран @media и (минимальная ширина: 1200 пикселей) {}
/* [(Новый) Myspace](http://new.myspace.com/)
================================================ ========================= */
@media все и (макс. ширина: 950 пикселей) {}
@media все и (макс. ширина: 800 пикселей) {}
@media все и (макс. ширина: 700 пикселей) {}
@media все и (макс. ширина: 480 пикселей) {}
@media все и (макс. ширина: 350 пикселей) {}
@media все и (максимальная высота: 650 пикселей) {}
@media все и (максимальная высота: 500 пикселей) {}
@media все и (минимальная высота: 650 пикселей) {}
@media все и (минимальная высота: 600 пикселей) {}
@media все и (минимальная ширина: 900 пикселей) {}
@media все и (минимальная ширина: 1000 пикселей) и (минимальная высота: 550 пикселей) {}
@media все и (минимальная ширина: 1000 пикселей) и (минимальная высота: 700 пикселей) {}
@media все и (минимальная высота: 900 пикселей) {}
@media все и (максимальная высота: 480 пикселей) и (ориентация: книжная) {}
@media все и (максимальная высота: 480 пикселей) и (ориентация: альбомная) {}
/* [dConstruct](http://2012.dconstruct.org/)
================================================ ========================= */
Только экран @media и (минимальная ширина: 45em) и (максимальная ширина: 55em) {}
Только экран @media и (минимальная ширина: 50em) и (максимальная ширина: 55em) {}
@media только экран и (минимальная ширина: 55em) {}
@media только экран и (минимальная ширина: 65em) {}
@media только экран и (минимальная ширина: 70em) {}
@media только экран и (минимальная ширина: 72em) {}
@media только экран и (минимальная ширина: 85em) {}
@media только экран и (минимальная ширина: 95em) {}

Как настроить таргетинг на настольные компьютеры, планшеты и мобильные устройства с помощью Media Query?

< HTML

< >

< Название > Средства массовой информации < / Название >

< <

/ * Запрос на медиа для мобильных устройств * /

@ media (max-width: 480px) {

             body {

                         цвет фона: красный;

} }

}

/ * Media Query для таблеток с низким разрешением, iPads * /

@media (мин ширина: 481px ) и (max-width: 767px) {

             body {

                         background-color: yellow;

}

}

}

/ * Media Query для таблеток iPads Портрет портрета * /

@media (мин ширина: 768px) и (max-width: 1024px){

             body {

                         background-color: blue;

} }

}

/ * Смесительный запрос для ноутбуков и настольных компьютеров * /

@media (мин ширина: 1025px) и (max-width: 1280px){

             body {

                         цвет фона: зеленый;

} }

}

/ * Media Query для больших экранов * /

@media (мин ширина: 1281пкс) {

             body {

                 цвет фона: белый;

}

}

} }

>

>

< тело стиль = "выравнивание текста: по центру;" >

< H2 > GeeksForGeeks H2 >

< H3 > СМИ H3 >

Body >

>

0 Узнайте о CSS СМИ для всех устройств @ Twentysixforty

CSS СМИ для всех устройств Обзор.

В этом учебном пособии вы узнаете, что такое мультимедийные запросы CSS, различные типы мультимедиа, синтаксис мультимедийных запросов CSS и как использовать мультимедийные запросы CSS для всех устройств. Я также объясню подходы, ориентированные на мобильные устройства и настольные компьютеры, 3 типа медиа-запросов Bootstrap CSS и где размещать медиа-запросы в вашей таблице стилей.

Быстрый секс.

Что такое мультимедийные запросы CSS?

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

Типы носителей.

Медиа-запросы CSS позволяют нам ориентироваться на 3 типа медиа: экран, печать, речь и все. Если тип носителя не объявлен, будут использоваться все.

Тип носителя экрана.

Тип носителя экрана используется для компьютерных экранов. Настольные компьютеры, ноутбуки, планшеты и мобильные устройства.

Тип носителя для печати.

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

Тип носителя речи.

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

Все типы носителей.

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

Синтаксис медиазапроса CSS.

Первая часть синтаксиса медиа-запроса — @media. После этого вы можете объявить тип носителя, если хотите. Если тип носителя не объявлен, будет использоваться All.Далее идет логический оператор и вы можете использовать Или, Не или И. Наконец, вы должны включить хотя бы одно выражение. Пример:

  экран @media и (минимальная ширина: 992px){
п{
цвет: #0000ff;
}
}
  

Приведенный выше код сделает весь текст абзаца синим цветом на всех экранах, ширина которых превышает 992 пикселя.

Должен ли я использовать Mobile-First или Desktop-First?

Я не собираюсь здесь вдаваться в дебаты о дизайне, ориентированном на мобильные устройства и настольные компьютеры, но вот краткое объяснение различных подходов.

Мобильный подход.

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

Настольный подход.

Подход, ориентированный на настольные компьютеры, или Graceful Degradation, предполагает разработку веб-сайта специально для настольных устройств.После того, как первоначальный дизайн сделан, сайт модифицируется для работы на планшетах и ​​мобильных устройствах. Десктопная версия сайта является приоритетной при таком подходе.

Запросы мультимедиа Bootstrap CSS.

Bootstrap — очень популярный интерфейсный инструментарий, используемый для создания адаптивных веб-сайтов. Ниже приведены контрольные точки Bootstrap CSS по умолчанию, которые вы можете использовать. Существует множество других наборов контрольных точек CSS для всех типов устройств. Если вам нужен более конкретный набор медиа-запросов, посетите этот веб-сайт: CSS Tricks.

  /* Bootstrap 4 Mobile First Breakpoints */
// Маленькие устройства (телефоны с горизонтальной ориентацией, 576 пикселей и выше)
@media (минимальная ширина: 576 пикселей) {
}
// Средние устройства (планшеты, 768px и выше)
@media (минимальная ширина: 768 пикселей) {
}
// Большие устройства (десктопы, 992px и выше)
@media (минимальная ширина: 992 пикселя) {
}
// Очень большие устройства (большие рабочие столы, 1200 пикселей и выше)
@media (минимальная ширина: 1200 пикселей) {
}
  
  /* Начальные точки останова Bootstrap 4 Desktop */
// Большие устройства (рабочие столы, менее 1200 пикселей)
@media (максимальная ширина: 1199.98px) {
}
// Средние устройства (планшеты, менее 992 пикселей)
@media (максимальная ширина: 991,98 пикселей) {
}
// Маленькие устройства (телефоны с горизонтальной ориентацией, менее 768 пикселей)
@media (максимальная ширина: 767,98 пикселей) {
}
// Очень маленькие устройства (портретные телефоны, менее 576 пикселей)
@media (максимальная ширина: 575,98 пикселей) {
}
  
  /* Начальная загрузка 4 целевых точки останова */
// Очень большие устройства (большие рабочие столы, 1200 пикселей и выше)
@media (минимальная ширина: 1200 пикселей) {
}
// Большие устройства (десктопы, 992px и выше)
@media (минимальная ширина: 992px) и (максимальная ширина: 1199.98px) {
}
// Средние устройства (планшеты, 768px и выше)
@media (минимальная ширина: 768 пикселей) и (максимальная ширина: 991,98 пикселей) {
}
// Маленькие устройства (телефоны с горизонтальной ориентацией, 576 пикселей и выше)
@media (минимальная ширина: 576 пикселей) и (максимальная ширина: 767,98 пикселей) {
}
// Очень маленькие устройства (портретные телефоны, менее 576 пикселей)
@media (максимальная ширина: 575,98 пикселей) {
}
  

Где размещать медиа-запросы CSS в таблице стилей?

Медиа-запросы CSS следует размещать в нижней части таблицы стилей.

Добавить комментарий

Ваш адрес email не будет опубликован.