Выбираем между «min-width» и «max-width»

12 января 2016

Facebook

Twitter

Вконтакте

Google+

Pinterest

Довольно часто возникает вопрос, когда стоит использовать min-width, а когда max-width? Тем, для кого отзывчивый дизайн стал привычным делом, такой вопрос может показаться странным. И такие люди знают ответ: все зависит от ситуации . Но анализ исходников сайnов показывает, что многие дизайнеры и разработчики до сих пор не очень в этом уверены. В этой статье мы попробуем разобраться, что значит \»все зависит от ситуации\» в отношении конкретно этого вопроса.

Десктопные версии и max-width

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

В этом есть смысл. Если дизайн разработан в первую очередь для десктопов, тогда весь CSS пишется в соответствующем стиле, и нужно добавить еще большее количество CSS для любых других контрольных точек. Если заданная десктопная ширина является нашей исходной точкой, и мы не хотим или не можем рефакторить наш CSS, тогда кажется логичным переопределить то, что на данный момент является нашим базовым 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%;
  }
}

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

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

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

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

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

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

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

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

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

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

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

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

Facebook

Twitter

Вконтакте

Google+

Pinterest

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

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

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

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

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

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

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

 @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 будет красный фон.

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

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; }
}

Обратите внимание на ключевое слово

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

максимальная ширина или максимальная высота

Быстрый ответ.

Разделяйте правила запятыми: @media handheld, (min-width: 650px), (orientation: landscape) { ... }

Длинный ответ.

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

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

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

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

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

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

1. И ( и ключевое слово)

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

@media screen and (min-width: 700px) and (orientation: landscape) { ... }

Указанные правила стилизации не вступят в силу, если все следующее не будет оценено как истинное:

• Тип носителя — «экран» и
• Область просмотра имеет ширину не менее 700 пикселей и
• Ориентация экрана в настоящее время альбомная.

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

2. ИЛИ ( разделенные запятыми списки )

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

@media handheld, (min-width: 650px), (orientation: landscape) { ... }

Указанные правила оформления вступят в силу после того, как любой медиа-запрос оценивается как true :

1. Тип носителя — «ручной» или
2. Область просмотра имеет ширину не менее 650 пикселей или
3. Ориентация экрана в настоящее время альбомная.

3. НЕ ( не ключевое слово)

Не ключевое слово может быть использовано для отрицания одного запроса средств массовой информации (а не полные СМИ править —meaning , что это только сводит на нет записей между набором запятых и не полные СМИ господствовать после объявления @media).

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

@media not screen and (min-resolution: 300dpi), (min-width: 800px) { ... }

Указанный здесь стиль вступит в силу, если

1. Тип носителя И минимальное разрешение не соответствуют их требованиям (соответственно «экран» и «300 точек на дюйм») или
2. Ширина области просмотра не менее 800 пикселей.

Другими словами, если тип мультимедиа — «экран», а минимальное разрешение — 300 точек на дюйм, правило не вступит в силу, если минимальная ширина области просмотра не меньше 800 пикселей.

(Ключевое слово not может быть немного странным, чтобы заявить. Дайте мне знать, если я могу сделать лучше.;)

4. ТОЛЬКО ( только ключевое слово)

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

<link rel="stylesheet" media="only screen and (color)" href="example.css" />

Более старый / несовместимый браузер просто игнорировал бы эту строку кода, я считаю, что он прочитал бы единственное ключевое слово и посчитал бы его неправильным типом носителя . (Смотрите здесь и здесь для получения дополнительной информации от умных людей)

ДЛЯ ПОЛУЧЕНИЯ ДОПОЛНИТЕЛЬНОЙ ИНФОРМАЦИИ

Для получения дополнительной информации (включая дополнительные функции, которые могут быть запрошены), см .: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries#Logical_operators

Понимание терминологии медиазапроса

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

СМИ правило (MDN также , кажется, называет эти заявления СМИ) включает в себя термин @mediaсо всеми вытекающими запросами СМИ

@media all and (min-width: 800px)

@media only screen and (max-resolution:800dpi), not print

@media screen and (min-width: 700px), (orientation: landscape)

@media handheld, (min-width: 650px), (min-aspect-ratio: 1/1)

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

screen (Примечание: здесь используется только один функциональный запрос.)

only screen

only screen and (max-resolution:800dpi)

only tv and (device-aspect-ratio: 16/9) and (color)

НЕ handheld, (min-width: 650px). (Обратите внимание на запятую: здесь есть два медиазапроса.)

Функция запрос является самой основной частью СМИ правила и просто относится определенная особенность и свой статус в данной просматриваемую ситуации.

screen

(min-width: 650px)

(orientation: landscape)

(device-aspect-ratio: 16/9)

Фрагменты кода и информация, полученная из:

CSS медиа-запросы от Mozilla Contributors (по лицензии CC-BY-SA 2.5 ). Некоторые примеры кода использовались с небольшими изменениями для (надеюсь) повышения ясности объяснения.

width | HTML и CSS с примерами кода

Свойство min-width устанавливает минимальную ширину элемента.

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

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

Если значение ширины (width) меньше значения min-width, то ширина элемента принимается равной min-width.

Синтаксис

/* <length> value */
min-width: 3.5em;

/* <percentage> value */
min-width: 10%;

/* Keyword values */
min-width: max-content;
min-width: min-content;
min-width: fit-content;
min-width: fill-available;

/* Global values */
min-width: inherit;
min-width: initial;
min-width: unset;

Значения

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

auto Минимальная ширина для flex-элементов по умолчанию, предоставляет более разумное значение по умолчанию, чем 0 для других способов разметки.

max-content Внутренняя предпочтительная ширина.

min-content Внутренняя минимальная ширина.

fill-available Ширина родительского блока минус горизонтальные margin, border, и padding. (Обратите внимание, что некоторые браузеры реализуют устаревшее имя для этого ключевого слова available.)

fit-content Определяет как min(max-content, max(min-content, fill-available)).

Значение по-умолчанию:

Применяется ко всем элементам, кроме строчных и таблиц

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

Поддержка браузерами

Can I Use minmaxwh? Data on support for the minmaxwh feature across the major browsers from caniuse.com.

Описание и примеры

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>min-width</title>
    <style>
      .container {
        min-width: 420px; /* Минимальная ширина контейнера */
      }
      .col1 {
        background-color: #fc0; /* Цвет фона колонки */
        padding: 5px; /* Поля вокруг текста */
        float: left; /* Обтекание по правому краю */
        width: 150px; /* Ширина левой колонки */
      }
      .col2 {
        background-color: #c0c0c0; /* Цвет фона колонки */
        padding: 5px; /* Поля вокруг текста */
        width: 250px; /* Ширина правой колонки */
        float: left; /* Обтекание по правому краю */
      }
    </style>
  </head>
  <body>
    <div>
      <div>Колонка 1</div>
      <div>Колонка 2</div>
    </div>
  </body>
</html>

На 100% правильный способ делать контрольные точки в CSS — CSS-LIVE

Перевод статьи The 100% correct way to do CSS breakpoints для CSS-live.ru, автор — Дэвид Гилбертсон

Постарайтесь на пару минут забыть про CSS. Не думайте о веб-разработке. Забудьте про цифровые пользовательские интерфейсы.

А когда вы забудете про всё это, хочу, чтоб ваше сознание отправилось в путешествие. В путешествие в прошлое. Назад в детство. В первый ваш день в школе.

Многое тогда было проще, когда единственной вашей заботой было рисовать фигуры и стараться удержать себя в руках.

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

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

Скорее всего у вас получилось что-то вроде этого, так? (Только не говорите мне, что проскроллили вниз, не сделав этого упражнения. Я очень расстроюсь.)

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

Прежде чем я продолжу, вы точно не нарисовали чего-то наподобие такого?

Вряд ли. Правда?

Но именно это по сути вы делаете, когда задаете контрольные точки в положениях, отвечающих точной ширине конкретных устройств (320px, 768px, 1024px).

Доводилось ли вам слышать недоуменное бормотание вроде такого? Или, может, это вы и были?

«Средняя контрольная точка — это до 768px включительно или нет? Так, вижу… а это iPad в портретном режиме, или это уже „большой“? Ага, большой — это от 768px и выше. А маленький — это 320px? Что же тогда такое диапазон от 0 до 319px? Контрольная точка для муравьев?»

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

Почему так вышло?

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

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

Скажите, если вы делаете контрольные точки в Sass, вы заводите переменную $large со значением, скажем, 768px?

Это нижняя граница диапазона, который вы называете large («большой») или верхняя? Если нижняя, то переменной $small быть не должно, потому что это должен быть 0, так ведь?

А если это верхняя граница, то как вы определите контрольную точку $large-and-up («от большго и выше»)? Это должно быть медиавыражение с min-width, равным $medium, так?

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

Получается бардак, и даже думать об этом — зря время тратить. Так что у меня есть три совета:

1. Выбирайте контрольные точки правильно
2. Называйте диапазоны со смыслом
3. Пишите код декларативно

Совет № 1: Выбирайте контрольные точки правильно

Что же такое правильная контрольная точка?

Ваше детсадовское «я» уже нарисовало кружочки. Я лишь сделал вам из них прямоугольники.

600px, 900px, 1200px и 1800px, если собираетесь делать что-то особенное для гигантских мониторов. На всякий случай, если заказываете в интернете «гигантский монитор», уточняйте, что речь про компьютерный. Если вам пришлют старинный бронированный корабль, с вас могут многовато взять за доставку.

Точки, с которыми только что играло ваше детское «я», представляют 14 самых распространенных размеров экрана:

Источник картинки

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

Зря я выбрал оранжевый и зеленый цвета, но не переделывать же теперь все картинки

Совет № 2. Называйте диапазоны со смыслом

Конечно, никто не мешает назвать контрольные точки «папа-медведь» и «маленький-медвежонок». Но если я собираюсь посидеть с дизайнером и обсудить, как должен выглядеть сайт на разных устройствах, я хочу как можно быстрее с этим закруглиться. Если для этого нужно назвать размер планшетом в портретном положении — мне это подходит. Ёлки-палки, да назовите его хоть «iPad в портретном положении», я не обижусь.

«Но расклад же меняется!» — можете воскликнуть вы. «Телефоны растут, планшеты мельчают!»

Но срок годности у CSS вашего сайта — около трех лет (если это не Gmail). iPad с нами уже вдвое дольше, и с трона его пока так и не спихнули. И мы знаем, что Apple уже не делает новых продуктов, а только убирает что-то (кнопочки, дырочки и т.п.) у существующих.

Так что 1024 на 768 — это надолго, ребята. Не надо прятать голову в песок (занятный факт: страусы не водятся в городах, потому что там нет песка, а значит, некуда прятаться от хищников).

Вывод: без общения нет взаимопонимания. Не надо намеренно отказываться от полезных слов.

Совет № 3. Пишите код декларативно

Знаю, знаю, опять это слово «декларативно». Скажу по-другому: ваш CSS должен определять, что в нем должно происходить, а не как это должно происходить. Это «как» лучше спрятать в специальном миксине.

Как мы уже выяснили, изрядная часть путаницы с контрольными точками заключена в том, что переменные, обозначающие границу диапазона, называются так же, как сам диапазон. У $large: 600px попросту нет смысла, если large («большой») — это диапазон. Это всё равно что сказать var coordinates = 4;.

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

Следующий пример я поначалу делал как упрощенный. Но на деле, по-моему, он охватывает всё что надо. Можете взглянуть на него в действии на Codepen. Я использую Sass, потому что не мыслю сайта без него. Но логика в CSS или Less будет та же.

@mixin for-phone-only {
  @media (max-width: 599px) { @content; }
}
@mixin for-tablet-portrait-up {
  @media (min-width: 600px) { @content; }
}
@mixin for-tablet-landscape-up {
  @media (min-width: 900px) { @content; }
}
@mixin for-desktop-up {
  @media (min-width: 1200px) { @content; }
}
@mixin for-big-desktop-up {
  @media (min-width: 1800px) { @content; }
}

// usage
.my-box {
  padding: 10px;
  
  @include for-desktop-up {
    padding: 20px;
  }
}

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

Обратите внимание, что я вынуждаю разработчика указывать суффикс -up («и выше») или -only («и только»).

Неоднозначность плодит путаницу

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

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

@mixin for-size($size) {
  @if $size == phone-only {
    @media (max-width: 599px) { @content; }
  } @else if $size == tablet-portrait-up {
    @media (min-width: 600px) { @content; }
  } @else if $size == tablet-landscape-up {
    @media (min-width: 900px) { @content; }
  } @else if $size == desktop-up {
    @media (min-width: 1200px) { @content; }
  } @else if $size == big-desktop-up {
    @media (min-width: 1800px) { @content; }
  }
}

// usage
.my-box {
  padding: 10px;
  
  @include for-size(desktop-up) {
    padding: 20px;
  }
}

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

Не говоря о том, что синтаксис @include for-desktop-up {...} со всех сторон красивее, чем @include for-size(desktop-up) {...}.

Оба примера кода можно поругать за то, что я дважды пишу 900px, да еще 899px. Конечно же, можно обойтись одной переменной и отнять 1, где нужно.

Хотите этого — флаг вам в руки, но я не стал бы, и вот почему:

1. Это не то, что часто меняется. Это не те числа, что используются повсюду в коде. От того, что они не переменные, нет никаких проблем — если только вы не хотите дать к контрольным точкам Sass доступ скрипту, вставляющему в страницу JS-объект с этими переменными.
2. Синтаксис для перевода чисел в строки в Sass ужасен. Внизу — цена, которую вы заплатите за веру в то, что повторение числа дважды — худшее из зол:

@mixin for-size($range) {
  $phone-upper-boundary: 600px;
  $tablet-portrait-upper-boundary: 900px;
  $tablet-landscape-upper-boundary: 1200px;
  $desktop-upper-boundary: 1800px;

  @if $range == phone-only {
    @media (max-width: #{$phone-upper-boundary - 1}) { @content; }
  } @else if $range == tablet-portrait-up {
    @media (min-width: $phone-upper-boundary) { @content; }
  } @else if $range == tablet-landscape-up {
    @media (min-width: $tablet-landscape-upper-boundary) { @content; }
  } @else if $range == desktop-up {
    @media (min-width: $tablet-landscape-upper-boundary) { @content; }
  } @else if $range == big-desktop-up {
    @media (min-width: $desktop-upper-boundary) { @content; }
  }
}

// usage
.my-box {
  padding: 10px;
  
  @include for-size(desktop-up) {
    padding: 20px;
  }
}

Ну как, улучшилась читаемость? Или наоборот?

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

Где сложность, там и баги

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

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

Всё! Но этой заметке как-то явно не хватает пушистости, дайте-ка подумать, не найдется ли у меня повода добавить немного…

О, придумал!

Добавочные советы по разработке контрольных точек

Да, даже у flickr есть контрольные точки на 768 и 1400

1. Если хотите увидеть в действии контрольные точки CSS для экранов с разрешением больше чем у монитора, за которым вы сидите, воспользуйтесь «отзывчивым» режимом в отладчике Chrome и введите сколь угодно гигантский размер.
2. Голубая полоска показывает медиавыражения для ‘max-width’, оранжевая — для ‘min-width’, а зеленая — медиавыражения, в которых есть и то и другое.
3. Клик по медиавыражению задает экрану такую ширину. Если кликнуть по зеленому медиавыражению несколько раз, он переключается между максимальной и минимальной шириной.
4. Кликайте правой кнопкой по медиавыражению в панели медиавыражений, чтобы перейти к определению этого правила в CSS.

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

P.S. Это тоже может быть интересно:

Медиазапросы | CSS: Адаптивность

Одним из самых важных инструментов при создании адаптивной вёрстки является использование медиазапросов. Медиазапросы — специальные условные конструкции, которые позволяют применять стили только для определённых устройств. В уроке на Code Basics уже освещалась эта тема, но повторим её.

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

@media (условия) {
  /* CSS-код, который будет выполнен для данного условия */
}

В качестве условия могут выступать различные значения и константы. Зачастую используются следующие конструкции:

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

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

1. landscape. Условие выполнится для устройств с горизонтальной ориентацией экрана. Горизонтальная — ориентация, при которой ширина viewport больше его высоты.
2. portrait. Условие выполнится для устройств с вертикальной ориентацией экрана. Вертикальная — ориентация, при которой высота viewport больше его ширины.

<style>
  @media (orientation: landscape) {
    /* При горизонтальной ориентации фоновым цветом сайта будет белый */
    body {
      background: #FFF;
    }
  }

  @media (orientation: portrait) {
    /* При вертикальной ориентации фоновым цветом сайта будет чёрный */
    body {
      background: #000;
    }
  }
</style>

Разрешение экрана

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

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

<style>
  /* Здесь будут все стили для устройств с viewport больше 1400 пикселей. */

  @media (max-width: 1400px) {
    /* Стили для устройств, у которых ширина viewport меньше 1400 пикселей, но больше 990 пикселей. Эти стили будут использованы для планшетов и ноутбуков с низким разрешением */
  }

  @media (max-width: 990px) {
    /* Стили для устройств, у которых ширина viewport меньше 990 пикселей, но больше 770 пикселей. Эти стили подойдут для некоторых мобильных устройств и планшетов */
  }

  @media (max-width: 770px) {
    /* Стили для устройств, у которых ширина viewport меньше 770 пикселей. Это множество мобильных устройств */
  }
</style>

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

Например, при ширине viewport 770 пикселей для элемента стили применятся в следующем порядке:

• Стили по умолчанию.
• Стили для условия медиазапроса max-width: 1400px.
• Стили для условия медиазапроса max-width: 990px.
• Стили для условия медиазапроса max-width: 770px.

Подход, описанный выше называется Desktop First. Мы вначале пишем стили для больших мониторов, а в последствии, используя медиазапросы, дописываем стили для всё более маленьких значений viewport. Его характерная черта в медиазапросах — использование конструкции max-width в качестве условия.

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

Стили, написанные с использованием подхода Mobile First выглядят следующим образом:

<style>
  /* Здесь будут все стили для мобильных устройств с viewport меньше 770 пикселей. */

  @media (min-width: 770px) {
    /* Стили для устройств, у которых ширина viewport больше 770 пикселей. */
  }

  @media (min-width: 990px) {
    /* Стили для устройств, у которых ширина viewport больше 990 пикселей, но меньше 1400 пикселей. */
  }

  @media (min-width: 1400px) {
    /* Стили для устройств, у которых ширина viewport больше 1400 пикселей */
  }
</style>

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

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

• Логическое «И». Означает, что несколько условий должны быть выполнены для того, чтобы CSS-стили применились к элементу. Для использования логического «И» используется ключевое слово and. Сделаем условие, которое проверяет, что экран устройства находится в портретной (вертикальной) ориентации и имеет ширину viewport не меньше 600 пикселей:

<!— end list —>

<style>
  @media (orientation: portrait) and (min-width: 600px) {
    .container {
      /* Для устройств с портретной ориентацией и шириной viewport не менее 600 пикселей сделать элементы с классом container шириной в 100 процентов */
      width: 100%;
    }
  }
</style>

• Логическое «ИЛИ». Свойства применятся в том случае, если хотя бы одно из условий будет выполнено. Условия для этого отделяются запятыми. Возьмём прошлый пример и применим его с использованием «ИЛИ»:

<!— end list —>

<style>
  @media (orientation: portrait), (min-width: 600px) {
    .container {
      /* Для устройств с портретной ориентацией ИЛИ шириной viewport не менее 600 пикселей сделать элементы с классом container шириной в 100 процентов */
      width: 100%;
    }
  }
</style>

• Логическое «НЕ». Свойства применятся в том случае, если условие не выполняется. Используется ключевое слово not. Реальное использование этого оператора не велико, в виду сложности и не интуитивности происходящего. В связи с этим советую воздержаться в первое время от использования ключевого слова not.

<!— end list —>

<style>
  @media not all and (orientation: landscape) {
    .container {
      /* Для устройств с портретной ориентацией (условие выглядит как «НЕ горизонтальная») сделать элементы с классом container шириной в 100 процентов */
      width: 100%;
    }
  }
</style>

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

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Подключение CSS файлов</title>

    <!-- Общие стили для проекта -->
    <link rel="stylesheet" href="style.css">

    <!-- Стили для экранов с viewport не менее 750px -->
    <link rel="stylesheet" media="screen and (min-width: 750px)" href="style750px.css">

</head>
<body>
    <!-- Разметка проекта -->

MediaQueries для различных экранов | andron13

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

Фиксированный дизайн #

Раньше, во времена царя Гороха все сайты в 99% слуачаях смотрелись на мониторах с разрешением 640 на 480. Потом появились 800 на 600. Техника не стояла на месте и крутые, дорогие мониторы смогли отображать сайты с разрешением 1024×768.

Первая величина ширина экрана, вторая высота. На этих мониторах практически все сайты имели фиксированную ширину.

Такой дизайн ещё может называться статическим.

Резиновый дизайн, fluid design #

Примерно с появлением мониторов с разрешением 1600×1200 люди стали добавлять резину. То есть указывали максимальную и минимальную ширину для блока. На широких мониторах было не всегда удобно читать статьи. Часто минимальная ширина была около 1000px и максимальная около 1400px. Сайт был отцентрирован и его было более-менее приятно читать на всех мониторах.

Адаптивный дизайн, adaptive #

Сегодня есть телевизоры и мониторы с разрешением 5120×2160, смартфоны с 480×800 и утюги с двумя строчками на экране. И сегодня ни фиксированный, ни резиновый сайт не могут решить задачи поставленные бизнесом перед веб-дизайном.

Современный вебдизайн делит все приборы пользователей на условные сегменты:

• очень маленькие мобильники
• обычные мобильники
• смартфоны в landscape модусе
• планшеты
• планшеты в landscape
• десктопные версии
• версии для гигантских мониторов

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

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

Адаптивная резина, отзывчивый дизайн, responsive design #

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

Такой дизайн называют ещё отзывчивым дизайном, по-английски responsive design

Медиазапросы помогают нам прописать дополнительные или собственные правила для различных приборов.

Мы познакомились с медиазапросами в статье про печать. Давайте продолжим.

Брекпойнты — grid-breakpoints #

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

/*xs: 0,*/
/*sm: 576px,*/
/*md: 768px,*/
/*lg: 992px,*/
/*xl: 1200px,*/
/*xxl: 1400px*/

/* X-Small devices (portrait phones, less than 576px)*/
/*No media query for `xs` since this is the default in Bootstrap*/

 /*Small devices (landscape phones, 576px and up)*/
@media (min-width: 576px) { }

/*Medium devices (tablets, 768px and up)*/
@media (min-width: 768px) { }

/*Large devices (desktops, 992px and up)*/
@media (min-width: 992px) { }

 /*X-Large devices (large desktops, 1200px and up)*/
@media (min-width: 1200px) { }

 /*XX-Large devices (larger desktops, 1400px and up)*/
@media (min-width: 1400px) { }

В CSS мы можем добавить их в наши медиазапросы.

@media screen and (min-width: 576px) {
    .box {
        background: beige;
    }
}

@media screen and (min-width: 768px) {
    .box {
        background: green;
    }
}

@media screen and (min-width: 992px) {
    .box {
        background: blue;
    }
}

@media screen and (min-width: 1200px) {
    .box {
        background: red;
    }
}

@media screen and (min-width: 1400px) {
    .box {
        background: gold;
    }
}

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

Минимальные параметры #

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

@media only screen
and (min-device-width : 414px)
and (max-device-width : 736px)
and (orientation : portrait) { /* Ваш CSS код */ }

Отдельно мы должны позаботиться о планшетах. Пример ipad в формате — landscape:

@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {/* Ваш CSS код */}

И добавить настольные и переносные компьютеры:

@media (min-width: 1200px) {/* Ваш CSS код */}

Это не единственное мнение. Пример альтернативной точки зрения:

@media (min-width:320px)  { /* smartphones, iPhone, portrait 480x320 phones */ }
@media (min-width:481px)  { /* portrait e-readers (Nook/Kindle), smaller tablets @ 600 or @ 640 wide. */ }
@media (min-width:641px)  { /* portrait tablets, portrait iPad, landscape e-readers, landscape 800x480 or 854x480 phones */ }
@media (min-width:961px)  { /* tablet, landscape iPad, lo-res laptops ands desktops */ }
@media (min-width:1025px) { /* big landscape tablets, laptops, and desktops */ }
@media (min-width:1281px) { /* hi-res laptops and desktops */ }

mobile first and mobile friendly #

Что многим не всегда понятно, так это то, что основной CSS мы должны описывать для самых маленьких экранов. Для мобильников. Именно это и называется mobile first. Очень часто правило mobile first путают с правилом mobile-friendly. Моё мнение — это не одно и тоже.

Важно помнить, что Google с 2019 года ранжирует выше сайты, у которых есть мобильная вёрстка — mobile-friendly. Говорят, что Google ранжирует ещё выше сайты, у которых реализован принцип mobile first.

Сам Google даёт рекомендации для вебмастеров здесь:

Экранное считывающее устройство — Screen reader #

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

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

Не забывайте про метатег Viewport, который указывает приборам как именно читать CSS. Что бы браузер понял, что вы сделали версии для мобильников, ему надо об этом сказать. Иначе он исходит из того, что у вас старый не оптимизированный сайт, который он тогда сам пытается на свой вкус показать пользователю.

<meta name="viewport"
      content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

Эти строчки предлагает добавить Emmet к нашим HTML-страницам. Подробнее о метатеге можно прочитать здесь.

Дополнительные ссылки #

1. Создание комплексных медиавыражений
2. 9 отличий адаптивного дизайна от «резинового» в GIF-картинках
3. Адаптивно-отзывчивый: разбираемся в терминологии
4. https://kulturbanause.de/blog/responsive-webdesign-und-mobile-first/
5. https://www.mightyminnow.com/2013/11/what-is-mobile-first-css-and-why-does-it-rock/
6. https://www.smashingmagazine.com/2018/12/generic-css-mobile-first/
7. https://habr.com/ru/post/243247/
8. https://itchief.ru/lessons/html-and-css/meta-viewport-how-it-works
9. Viewport, Рекомендованный набор метатегов
10. https://css-tricks.com/how-to-develop-and-test-a-mobile-first-design-in-2021/

CSS свойство максимальной ширины

Пример

Установите максимальную ширину элемента

на 150 пикселей:

p.ex1 {
max-width: 150 пикселей;
}

Дополнительные примеры «Попробуйте сами» ниже.

Определение и использование

Свойство max-width определяет максимальную ширину элемента.

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

Если содержимое меньше максимальной ширины, max-width свойство не имеет никакого эффекта.

Примечание: Это предотвращает значение свойство width не становиться больше, чем максимальная ширина . Стоимость max-width переопределения свойств свойство ширины.

Поддержка браузера

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

Синтаксис CSS

максимальная ширина: нет | длина | начальная | наследование;

Стоимость недвижимости

Другие примеры

Пример

Установите максимальную ширину элемента

на 50% от контейнера:

p.ex1 {
максимальная ширина: 50%;
}

Связанные страницы

CSS: высота и ширина CSS

Ссылка CSS: свойство min-width

Ссылка на HTML DOM: свойство maxWidth

CSS медиа-запросы min-width и min-device-width конфликтуют?

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

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

Здесь вы можете увидеть эффекты (вот как это ДОЛЖНО выглядеть)

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

Вот мои ссылки CSS — что-то не так с моим синтаксисом? :

Изменение темы при разных размерах экрана (медиа-запросы)

 / * Смартфоны (портрет и пейзаж) ----------- * /
@media only screen и (min-device-width: 320px) and (max-device-width: 480px) {
/ * Стили * /
}
 

 / * Смартфоны (альбомная ориентация) ----------- * /
@media only screen и (min-width: 321px) {
/ * Стили * /
}
 

 / * Смартфоны (портрет) ----------- * /
@media only screen и (max-width: 320px) {
/ * Стили * /
}
 

 / * iPad (книжный и альбомный) ----------- * /
@media only screen и (min-device-width: 768px) and (max-device-width: 1024px) {
/ * Стили * /
}
 

 / * iPad (альбомная ориентация) ----------- * /
@media only screen и (min-device-width: 768px) and (max-device-width: 1024px) and (Ориентация: альбомная) {
/ * Стили * /
}
 

 / * iPad (портрет) ----------- * /
@media only screen и (min-device-width: 768px) and (max-device-width: 1024px) and (Ориентация: портрет) {
/ * Стили * /
}
 

 / * iPad 3 ----------- * /
@media only screen и (min-device-width: 768px) and (max-device-width: 1024px) and (Ориентация: альбомная) и (-webkit-min-device-pixel-ratio: 2) {
/ * Стили * /
}
 

 @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (Ориентация: портрет) и (-webkit-min-device-pixel-ratio: 2) {
/ * Стили * /
}
 

 / * Настольные и портативные компьютеры ----------- * /
@media only screen и (min-width: 1224px) {
/ * Стили * /
}
 

 / * Большие экраны ----------- * /
@media only screen и (min-width: 1824px) {
/ * Стили * /
}
 

 / * iPhone 4 ----------- * /
@media only screen и (min-device-width: 320px) and (max-device-width: 480px) and (Ориентация: альбомная) и (-webkit-min-device-pixel-ratio: 2) {
/ * Стили * /
}
 

 @media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (Ориентация: портрет) и (-webkit-min-device-pixel-ratio: 2) {
/ * Стили * /
}
 

 / * iPhone 5 ----------- * /
@media only screen и (min-device-width: 320px) and (max-device-height: 568px) and (Ориентация: альбомная) и (-webkit-device-pixel-ratio: 2) {
/ * Стили * /
}
 

 @media only screen and (min-device-width: 320px) and (max-device-height: 568px) and (Ориентация: портрет) и (-webkit-device-pixel-ratio: 2) {
/ * Стили * /
}
 

 / * iPhone 6 ----------- * /
@media only screen и (min-device-width: 375px) and (max-device-height: 667px) and (Ориентация: альбомная) и (-webkit-device-pixel-ratio: 2) {
/ * Стили * /
}
 

 @media only screen and (min-device-width: 375px) and (max-device-height: 667px) and (Ориентация: портрет) и (-webkit-device-pixel-ratio: 2) {
/ * Стили * /
}
 

 / * iPhone 6+ ----------- * /
@media only screen and (min-device-width: 414px) and (max-device-height: 736px) and (Ориентация: альбомная) и (-webkit-device-pixel-ratio: 2) {
/ * Стили * /
}
 

 @media only screen and (min-device-width: 414px) and (max-device-height: 736px) and (Ориентация: портрет) и (-webkit-device-pixel-ratio: 2) {
/ * Стили * /
}
 

 / * Samsung Galaxy S3 ----------- * /
@media only screen и (min-device-width: 320px) and (max-device-height: 640px) and (Ориентация: альбомная) и (-webkit-device-pixel-ratio: 2) {
/ * Стили * /
}
 

 @media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (Ориентация: портрет) и (-webkit-device-pixel-ratio: 2) {
/ * Стили * /
}
 

 / * Samsung Galaxy S4 ----------- * /
@media only screen и (min-device-width: 320px) and (max-device-height: 640px) and (Ориентация: альбомная) и (-webkit-device-pixel-ratio: 3) {
/ * Стили * /
}
 

 @media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (Ориентация: портрет) и (-webkit-device-pixel-ratio: 3) {
/ * Стили * /
}
 

 / * Samsung Galaxy S5 ----------- * /
@media only screen и (min-device-width: 360px) and (max-device-height: 640px) and (Ориентация: альбомная) и (-webkit-device-pixel-ratio: 3) {
/ * Стили * /
}
 

 @media only screen and (min-device-width: 360px) and (max-device-height: 640px) and (Ориентация: портрет) и (-webkit-device-pixel-ratio: 3) {
/ * Стили * /
}
 

  

  ...
  

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

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

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

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

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

  // Нет необходимости в медиа-запросе для точки останова xs, так как это фактически `@media (min-width: 0) {...} `
@include media-breakpoint-up (sm) {...}
@include media-breakpoint-up (md) {...}
@include media-breakpoint-up (lg) {...}
@include media-breakpoint-up (xl) {...}

// Пример: скрыть начало с `min-width: 0`, а затем показать в точке останова` sm`
.custom-class {
  дисплей: нет;
}
@include media-breakpoint-up (sm) {
  .custom-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) {...}
// Нет необходимости в медиа-запросе для точки останова xl, так как у нее нет верхней границы ее ширины

// Пример: стиль от средней точки останова и ниже
@include media-breakpoint-down (md) {
  .custom-class {
    дисплей: блок;
  }
}  

  // Очень маленькие устройства (портретные телефоны, менее 576 пикселей)
@media (max-width: 575,98 пикселей) {...}

// Маленькие устройства (телефоны с горизонтальной ориентацией, 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 (минимальная ширина: 1200 пикселей) {...}  

  @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 (минимальная ширина: 768 пикселей) и (максимальная ширина: 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! по умолчанию;  

 
module.exports = {
  тема: {
    screen: {
      'sm': '640px',
      

      'md': '768px',
      

      'lg': '1024px',
      

      'xl': '1280px',
      

      '2xl': '1536px',
      
    }
  }
}  

 
module.exports = {
  тема: {
    screen: {
      "планшет": "640 пикселей",
      

      'ноутбук': '1024px',
      

      'рабочий стол': '1280px',
      
    },
  }
}  

  .text-center {text-align: center}

@media (min-width: 640 пикселей) {
  .tablet \: text-center {выравнивание текста: center}
}

@media (min-width: 1024px) {
  .ноутбук \: text-center {выравнивание текста: center}
}

@media (min-width: 1280 пикселей) {
  .desktop \: text-center {выравнивание текста: center}
}  

 
module.exports = {
  тема: {
    продлевать: {
      screen: {
        '3xl': '1600px',
      },
    },
  },
  варианты: {},
  плагины: [],
}  

 
const defaultTheme = require ('tailwindcss / defaultTheme')

module.exports = {
  тема: {
    screen: {
      'xs': '475px',
      ... defaultTheme.screens,
    },
  },
  варианты: {},
  плагины: [],
}  

 
модуль.export = {
  тема: {
    screen: {
      '2xl': {'max': '1535px'},
      

      'xl': {'max': '1279px'},
      

      'lg': {'max': '1023px'},
      

      'md': {'max': '767px'},
      

      'sm': {'max': '639px'},
      
    }
  }
}  

 
модуль.export = {
  тема: {
    screen: {
      'sm': {'min': '640px', 'max': '767px'},
      'md': {'min': '768px', 'max': '1023px'},
      'lg': {'min': '1024px', 'max': '1279px'},
      'xl': {'min': '1280px', 'max': '1535px'},
      '2xl': {'min': '1536px'},
    },
  }
}  

 
module.exports = {
  тема: {
    screen: {
      'sm': '500px',
      'md': [
        
        
        
        {'min': '668px', 'max': '767px'},
        {'min': '868px'}
      ],
      'lg': '1100px',
      'xl': '1400px',
    }
  }
}  

 
модуль.export = {
  тема: {
    продлевать: {
      screen: {
        'портрет': {'raw': '(ориентация: портрет)'},
        
      }
    }
  }
}  

 
module.exports = {
  тема: {
    продлевать: {
      screen: {
        'print': {'raw': 'print'},
        
      }
    }
  }
}  

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

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

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

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

  @media (min-width: 576px) {
...
...
Обычный CSS
...
...
}  

  @media only screen and (min-width: 576px) {...}  

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

  @media (min-width: 576px) и (max-width: 768px) {...}  

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

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

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

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

 
// Очень маленькие устройства (портретные телефоны, менее 576 пикселей)
@media (max-width: 575,98 пикселей) {...}

// Маленькие устройства (телефоны с горизонтальной ориентацией, 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: 1200 пикселей) {...}