Max width media: CSS3-медиазапросы

CSS media запросы: max-width и max-height

Я хочу использовать условие AND в запросе media. Я использую следующий код, но он не работает

@media screen and (max-width: 995px AND max-height: 700px) {
}

css

responsive-design

media-queries

Поделиться

Источник

Yadhu Babu    

31 января 2017 в 06:54

3 ответа

• jquery max-height и max-width возвращают неправильные значения

  у меня проблема с максимальной шириной и максимальной высотой. допустим, у меня есть следующее правило css: img.item { max-width: 325px; max-height: 390px; } и следующий img В моем документе: <img class=item…

• css media запрос max-device-width

  Если у меня есть css 3 media запрос для max-device-width, меняется ли это при изменении ориентации устройства? Например, если iPhone переходит от портрета к пейзажу, меняется ли max-device-width?

4

В нем отсутствуют скобки закрытия и открытия до и после логического оператора

@media (max-width: 995px) and (max-height: 700px) { . .. }

Поделиться

Lex    

31 января 2017 в 07:00

2

Самый правильный и простой способ написать это:

@media screen and (max-width: 995px) and (max-height: 700px) {

}

Поделиться

Kevin Jimenez    

31 января 2017 в 06:59

0

Используйте запятую, чтобы указать два (или более) разных правила:

@media screen and (max-width: 995px) , screen and (max-height: 700px) {
 ...
}

От https://developer.mozilla.org/ru/CSS/Media_queries/

…Кроме того, вы можете объединить несколько запросов media в список, разделенный запятыми; если какой-либо из запросов media в списке имеет значение true, применяется связанная таблица стилей. Это эквивалентно логической операции «or».

Поделиться

Awadhesh verma    

31 января 2017 в 06:59

• Несколько media-запросов: max-width или max-height

  Этот вопрос похож на CSS media запросов: max-width OR max-height , но так как моя репутация недостаточно высока, я не могу добавить комментарий (вопрос) к ответу и хочу добавить к исходному вопросу. Как и плакат в другой теме, у меня есть media запросов с определенными спецификациями для DIVs….

• firefox css max-width и max-height внутри max-height div

  У меня есть div с максимальной высотой и изображением внутри него, которое должно использовать max-width:100% и max-height:100%. В chromium это работает, но firefox использует только max-width и игнорирует max-heigth. div#overlaycontent{ position:relative; overflow:hidden; height:100%;…

Похожие вопросы:

Media логический оператор запроса AND (max-width и max-height)

Я использую вертикальную навигационную панель на @media (min-height: 490px) ; если высота меньше, она превращается в горизонтальную навигационную панель. Он должен рухнуть ONLY, если…

CSS media запросов: max-width OR max-height

При написании запроса CSS media можно ли каким-либо образом указать несколько условий с помощью логики OR? Я пытаюсь сделать что-то вроде этого: /* This doesn’t work */ @media screen and (max-width:…

Изображение max-width не работает в запросе media

У меня возникла проблема с max-width/max-height внутри media запросов. В основном происходит то, что у меня есть галерея изображений, которая использует jQuery для отображения модального окна. Это…

jquery max-height и max-width возвращают неправильные значения

у меня проблема с максимальной шириной и максимальной высотой. допустим, у меня есть следующее правило css: img.item { max-width: 325px; max-height: 390px; } и следующий img В моем документе:…

css media запрос max-device-width

Если у меня есть css 3 media запрос для max-device-width, меняется ли это при изменении ориентации устройства? Например, если iPhone переходит от портрета к пейзажу, меняется ли max-device-width?

Несколько media-запросов: max-width или max-height

Этот вопрос похож на CSS media запросов: max-width OR max-height , но так как моя репутация недостаточно высока, я не могу добавить комментарий (вопрос) к ответу и хочу добавить к исходному вопросу….

firefox css max-width и max-height внутри max-height div

У меня есть div с максимальной высотой и изображением внутри него, которое должно использовать max-width:100% и max-height:100%. В chromium это работает, но firefox использует только max-width и…

Использование max-width, max-height в сочетании с width, height

Я начинаю изучать css, и я пишу код на основе курса, который смотрю. Автор написал стиль для изображений левой панели так, чтобы они выглядели следующим образом: .left-side img{ width: 100%; height:…

CSS Media запросы относительно свойства max-width, чтобы сделать размер 1024px для планшета и рабочего стола

Я все еще пытаюсь понять, как работают запросы media. У меня есть два запроса media, один из которых нацелен на максимальную ширину: 1024px , а другой-на max-device-width: 1024px для планшета….

Почему некоторые запросы max-width media используют .98px

Недавно я заметил, что Bootstrap V4 изменил свои запросы media с @media screen and (max-width: 991) на @media screen and (max-width: 991.98px) . Разве эти дополнительные .98px что-нибудь меняют?…

Несколько media-запросов: max-width или max-height

Этот вопрос похож на CSS media запросов: max-width OR max-height, но так как моя репутация недостаточно высока, я не могу добавить комментарий (вопрос) к ответу и хочу добавить к исходному вопросу.

Как и плакат в другой теме, у меня есть media запросов с определенными спецификациями для DIVs.

@media only screen and (min-width:460px){
.center{width:250px;}
}

@media only screen and (min-width:960px){
.center{width:350px;)
}

Теперь я хочу, чтобы центр DIV был шириной 250 пикселей, когда экран имеет ширину 960 пикселей, но только 400 пикселей в высоту. Если бы я установил первый media-запрос на это:

@media only screen and (min-width:460px), screen and (max-height:400px){
.center{width:250px;}
}

какой запрос будет использовать мой браузер?
Будет ли минимальная высота преобладать над минимальной шириной? Или он пропустит min-height и перейдет к запросу min-width (960px)?

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

-редактирование-
Я ввел неправильное условие (min-height вместо max-height)

css

media-queries

Поделиться

Источник

Doc    

05 декабря 2013 в 09:26

2 ответа

• Media запросов max-width запускаются при неправильной ширине в Chrome

  Edit: дополнительные исследования говорят, что это на самом деле связано с тем, что jQuery возвращает неправильную ширину и высоту в Chrome 18.0.1025.168 Я настроил некоторые media запросов, а также некоторые javascript в текущем тематическом проекте wordpress. В целом они работают нормально, но…

• Изображение max-width не работает в запросе media

  У меня возникла проблема с max-width/max-height внутри media запросов. В основном происходит то, что у меня есть галерея изображений, которая использует jQuery для отображения модального окна. Это модальное окно состоит из модального окна, окна содержимого и средства просмотра изображений, внутри…

7

он будет использовать ALL из них, как только условие совпадет. таким образом, правило, используемое для .center, будет последним определяемым (как обычно в css, более поздние определения переопределяют ранние)

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

@media only screen and (min-width:460px) and (max-height:400px){
.center{width:250px;}
}

Поделиться

Ria Weyprecht    

05 декабря 2013 в 09:31

5

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

@media only screen and (min-width:460px), (max-height:400px){
   .center{width:250px;}
}

Поделиться

rnd    

27 марта 2014 в 14:08

Похожие вопросы:

Media логический оператор запроса AND (max-width и max-height)

Я использую вертикальную навигационную панель на @media (min-height: 490px) ; если высота меньше, она превращается в горизонтальную навигационную панель. Он должен рухнуть ONLY, если…

Изменение media запросов с min-width на max-width, чтобы избежать переопределения?

Вместо того, чтобы иметь один огромный файл responsive.css. Я включаю запросы media в один и тот же stylsheet, чтобы сохранить все вместе, например, у меня есть файл wizard.css, с: span.crumbsTxt {…

CSS media запросов: max-width OR max-height

При написании запроса CSS media можно ли каким-либо образом указать несколько условий с помощью логики OR? Я пытаюсь сделать что-то вроде этого: /* This doesn’t work */ @media screen and (max-width:…

Media запросов max-width запускаются при неправильной ширине в Chrome

Edit: дополнительные исследования говорят, что это на самом деле связано с тем, что jQuery возвращает неправильную ширину и высоту в Chrome 18.0.1025.168 Я настроил некоторые media запросов, а также…

Изображение max-width не работает в запросе media

У меня возникла проблема с max-width/max-height внутри media запросов. В основном происходит то, что у меня есть галерея изображений, которая использует jQuery для отображения модального окна. Это…

Должен ли я использовать max-device-width или max-width?

С помощью запросов CSS media вы можете использовать max-device-width для таргетинга ширины устройства (например, устройства iPhone или Android) и / или max-width , который нацелен на ширину…

iPhone 4 ловушки max-width:480px media запросов

iPhone 4 с разрешением 640×960 попадает в media запросов, указанных в: @media only screen and (max-width:480px) Этот запрос media находится в самом конце моей таблицы стилей CSS… Над этим запросом…

Конфликт запросов Media с использованием max-device-width и max-width

Я пытаюсь понять, есть ли какой-либо конфликт между использованием max-device-width для указания определенных элементов для того, чтобы веб-сайт был отзывчивым на устройствах, и использованием…

CSS media запросы: max-width и max-height

Я хочу использовать условие AND в запросе media. Я использую следующий код, но он не работает @media screen and (max-width: 995px AND max-height: 700px) { }

Media запросов min-width VS max-width для адаптивного веб-сайта

С давних пор я использую следующие media запросов для создания адаптивных веб-сайтов // Large devices (desktops, less than 1200px) @media (max-width: 1199px) { … } // Medium devices (tablets, less…

Выбираем медиа-запросы: min-width CSS или max-width CSS

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

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

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

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

.content {
  width: 60%;
}

.related {
  width: 40%;
}

@media screen and (max-width: 37.4em) {
  .content,
  .related {
    width: 100%;
  }
}

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

@media screen and (min-width: 37.5em) {
  .content {
    width: 60%;
  }

  .related {
    width: 40%;
  }
}

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

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

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

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

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

@media only screen and (max-width: 30em) {
  .big-table tr,
  .big-table td {
    display: block;
  }
}

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

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

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

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

Медиавыражения в CSS — это не только max-width / Хабр

Недавно мы опубликовали новый веб-сайт нашей компании Mabiloft с полностью переработанным чистым дизайном и множеством новых великолепных иллюстраций и анимаций.

После того, как наш дизайнер проделал потрясающую работу, продумав и нарисовав сайт, нам, разработчикам, было необходимо реализовать макет, сохранив его чистым и цельным для каждого устройства, от большого 2K экрана, на которых мы пишем код, до старого iPhone 4 с его 3.5-дюймовым дисплеем.

Несколько недель спустя веб-сайт был почти готов и я просматривал его, чтобы убедиться, что всё работает как нужно. Заметив, что макет главной страницы неправильно отображался на нашем iPad, я быстро изменил некоторые CSS-правила и исправил ошибку, но… это привело к проблемам отображения макета на всех всех ноутбуках с небольшим экраном

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

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

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

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

Размер вьюпорт

Да, я говорю о

width, height, min-width, min-height, max-width

и

max-height

.

Нуждаются ли они в особом представлении? Я буду краток.

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

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

/* Красный фон применится, только если высота вьюпорт больше 320 пикселей */
body {
  background-color: #FFD23F; /* Желтый фон */
}
 
@media screen and (min-height: 320px) {
  body {
    background-color: #EE4266; /* Красный фон */
  }
}

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

/* Красный фон применится, если ширина области видимости от 320 до 600 пикселей */
body {
  background-color: #FFD23F; /* Желтый фон */
}
 
@media screen and (min-width: 320px) and (max-width: 600px) {
  body {
    background-color: #EE4266; /* Красный фон */
  }
}

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

body {
  background-color: #0EAD69;
}
 
@media screen and (max-width: 1600px) {
  body {
    background-color: #3BCEAC;
  }
}
 
@media screen and (max-width: 1280px) {
  body {
    background-color: #FFD23F;
  }
}
 
@media screen and (max-width: 960px) {
  body {
    background-color: #EE4266;
  }
}
 
@media screen and (max-width: 600px) {
  body {
    background-color: #540D6E;
  }
}

Ориентация экрана

Orientation

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

portrait

(портрет) и

landscape

(пейзаж/альбом).

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

Например, этот код даёт следующий результат:

/* Красный фон применяется только, если ориентация экрана альбомная */
body {
  background-color: #FFD23F; /* Желтый фон */
}
 
@media screen and (orientation: landscape) {
  body {
    background-color: #EE4266; /* Красный фон */
  }
}

Соотношение сторон

Данная медиа-функция похожа на функцию ориентации, но является более точной. Вы можете установить правила для конкретного необходимого соотношения сторон. Например, можно установить разную разметку для телефонов с экранами 16/9 и 18/9.

Эта функция также может иметь префикс max- и min- для обработки диапазона экранов с разным соотношением сторон

Наведение и указатель

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

Обе медиа-функции hover и pointer относятся к определению основного механизма ввода на сайте. Например, мышь. Или палец, если вы используете смартфон. Чтобы определить все механизмы ввода, можно использовать функции any-hover и any-pointer.

А теперь перейдем к тому, что же они делают?

Функция hover (и any-hover) позволяет браузеру узнать, может ли основной механизм ввода наводиться на элементы (например, как курсор мыши).

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

• hover: hover, может наводиться на элементы
• hover: none, не может наводиться на элементы или механизма ввода с возможностью наведения нет вообще

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

Функции pointer (и any-pointer) позволяют браузеру узнать, имеет ли основной механизм ввода указатель (например, мышь) и если имеет, то насколько он точный.

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

• pointer: coarse, включает в себя указательно ограниченной точности
• pointer: fine, включает в себя точное указатель
• pointer: none, не включает в себя указатель

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

Эй, это всё скучно. Где новые крутые функции, о которых упоминалось раньше?

Вот они!

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

Инвертированные цвета

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

Зачем включать инвертирование системных цветов? Обычно это очень полезно, если хочется улучшить читаемость.

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

У данной функции есть только два значения:

• inverted: применить стили, если цвета инвертированы
• none: применить стили по умолчанию

Вот пример! Когда цвета инвертируются, размер текста увеличивается

.text {
  font-size: 24px;
}
 
@media screen and (inverted-colors: inverted) {
  .text {
    font-size: 36px;
  }
}

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

Предпочитаемая цветовая схема

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

Функция позволяет разработчикам устанавливать различные варианты оформления для элементов, если изменяется цветовая схема. И Windows и macOS позволяет пользователям менять системную цветовую схему со светлой на тёмную и обратно. iOS 13 также представила эту функцию, а для пользователей Android эта возможность станет доступной с приходом Android Q.

Поддержка браузерами также приличная. На данный момент последние версии Google Chrome, Mozilla Firefox и Safari поддерживают эту функцию. На мобильных устройствах её также поддерживают все основные браузеры, кроме Opera. Всегда актуальный список поддерживаемых браузеров можно найти здесь

Значения для этой функции достаточно понятны интуитивно:

• light: применить стили, если пользователь предпочитает светлую тему
• dark: применить стили, если пользователь предпочитает тёмную тему
• no-preference: применить стили по умолчанию

Посмотреть, насколько крута эта функция, можно в примере ниже!

.appbar {
  background-color: #EE4266;
}
 
.fab {
  background-color: #424242;
}
 
@media screen and (prefers-color-scheme: dark) {
  body {
    background-color: #424242;
  }
 
  .appbar {
    background-color: #212121;
  }
 
  h3 {
    color: #fff;
  }
 
  .fab {
    background-color: #EE4266;
  }
}

Установка системной тёмной темы делает страницу также тёмной

Сокращение количества анимации

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

статью

, которая очень хорошо объясняет подобные явления.

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

Эта функция может иметь два значения:

• reduce: применяет стили, если пользователь не хочет видеть анимации и переходы. Это значение обычно используется для их отключения
• no-preference: применяет обычные стили

Проверьте эту функцию в примере ниже:

.pulse {
  animation: pulse 2s infinite;
}
 
@media screen and (prefers-reduced-motion: reduce) {
  .pulse {
    animation: none;
  }
}

Анимация пульсации прекращается, когда пользователь выбирает снижения подвижности элементов

Браузерная совместимость для этой функции достаточно хорошая. В данный момент только Edge и IE не поддерживают её. Всегда актуальный список поддерживаемых браузеров можно найти здесь

Заключение

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

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

Примеры кода

Вы можете ознакомиться с примерами кода здесь. Код находится в открытом доступе на Github.

Кто мы

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

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. Тип носителя

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

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

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

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

grid

.content {
  width: 60%;
}
.related {
  width: 40%;
}
@media screen and (max-width: 37.4em) {
  .content,
  .related {
    width: 100%;
  }
}

@media screen and (min-width: 37.5em) {
  .content {
    width: 60%;
  }
  .related {
    width: 40%;
  }
}

@media only screen and (max-width: 30em) {
  .big-table tr,
  .big-table td {
    display: block;
  }
}

  

  ...
  

  // Очень маленькие устройства (портретные телефоны, менее 576 пикселей)
// Нет медиа-запроса, так как это значение по умолчанию в Bootstrap

// Маленькие устройства (телефоны с горизонтальной ориентацией, 576 пикселей и выше)
@media (min-width: 576px) {...}

// Средние устройства (планшеты, 768 пикселей и выше)
@media (min-width: 768 пикселей) {...}

// Большие устройства (настольные компьютеры, 992 пикселей и выше)
@media (min-width: 992px) {...}

// Очень большие устройства (большие рабочие столы, 1200 пикселей и выше)
@media (min-width: 1200px) {...}  

  @include media-breakpoint-up (xs) {...}
@include media-breakpoint-up (sm) {...}
@include media-breakpoint-up (md) {...}
@include media-breakpoint-up (lg) {...}
@include media-breakpoint-up (xl) {...}

// Пример использования:
@include media-breakpoint-up (sm) {
  .some-class {
    дисплей: блок;
  }
}  

  // Очень маленькие устройства (портретные телефоны, менее 576 пикселей)
@media (максимальная ширина: 575.98px) {...}

// Маленькие устройства (телефоны с горизонтальной ориентацией, менее 768 пикселей)
@media (max-width: 767,98 пикселей) {...}

// Средние устройства (планшеты, менее 992 пикселей)
@media (max-width: 991.98px) {...}

// Большие устройства (рабочие столы, менее 1200 пикселей)
@media (max-width: 1199,98 пикселей) {...}

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

  @include media-breakpoint-down (xs) {...}
@include media-breakpoint-down (sm) {...}
@include media-breakpoint-down (md) {...}
@include media-breakpoint-down (lg) {...}  

  // Очень маленькие устройства (портретные телефоны, менее 576 пикселей)
@media (максимальная ширина: 575.98px) {...}

// Маленькие устройства (телефоны с горизонтальной ориентацией, 576 пикселей и выше)
@media (min-width: 576px) и (max-width: 767,98px) {...}

// Средние устройства (планшеты, 768 пикселей и выше)
@media (min-width: 768px) и (max-width: 991.98px) {...}

// Большие устройства (настольные компьютеры, 992 пикселей и выше)
@media (min-width: 992px) и (max-width: 1199.98px) {...}

// Очень большие устройства (большие рабочие столы, 1200 пикселей и выше)
@media (min-width: 1200px) {...}  

  @include media-breakpoint-only (xs) {...}
@include media-breakpoint-only (sm) {...}
@include media-breakpoint-only (md) {...}
@include media-breakpoint-only (lg) {...}
@include media-breakpoint-only (xl) {...}  

  // Пример
// Применяем стили, начиная со средних и заканчивая очень большими устройствами
@media (min-width: 768px) и (max-width: 1199.98px) {...}  

  @include media-breakpoint-between (md, xl) {...}  

  $ zindex-dropdown: 1000! По умолчанию;
$ zindex-sticky: 1020! по умолчанию;
$ zindex-fixed: 1030! по умолчанию;
$ zindex-modal-backdrop: 1040! по умолчанию;
$ zindex-modal: 1050! по умолчанию;
$ zindex-popover: 1060! по умолчанию;
$ zindex-tooltip: 1070! по умолчанию;  

  .container {
  ширина: 100%;
  отступ: 0 20 пикселей;
}

@media (min-width: 768 пикселей) {
  .container {
    ширина: 80%;
  }
}
  

  .container {
  ширина: 80%;
}

@media (max-width: 768 пикселей) {
  .container {
    ширина: 100%;
    отступ: 0 20 пикселей;
  }
}
  

 @media only screen and (max-width: 480px) {
}