Media css min width max width: css — @Media min-width & max-width

Выбираем медиа-запросы: 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 только в тех случаях, когда элемент должен отличаться от стандартного состояния. И конечно же, я рекомендую вам позволить контенту определять, что и как должно происходить.

@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 и min-width

От автора: недавно мы запустили новый веб-сайт нашей компании Mabiloft, с полностью переработанным чистым макетом и множеством новых великолепных иллюстраций и анимации. В то время как наш дизайнер проделал потрясающую работу, придумав и нарисовав сайт, сложной задачей для нас, разработчиков, было сделать так, чтобы макет оставался чистым и функциональным для каждого устройства, от большого 2К-экрана, до старого iPhone 4 с его 3,5-дюймовым экраном.

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

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

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

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

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Медиа-запросы размеров окна просмотра

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

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

body { background-color: #FFD23F; /* Yellow */ } @media screen and (min-height: 320px) { body { background-color: #EE4266; /* Red */ } }

Красный фон будет применяться только в том случае, если высота области просмотра превышает 320 пикселей.

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

body { background-color: #FFD23F; /* Yellow */ } @media screen and (min-width: 320px) and (max-width: 600px) { body { background-color: #EE4266; /* Red */ } }

Красный фон будет применяться, если ширина области просмотра составляет от 320 до 600 пикселей.

В следующем примере показано, как можно использовать функцию min-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.

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

body { background-color: #FFD23F; /* Yellow */ } @media screen and (orientation: landscape) { body { background-color: #EE4266; /* Red */ } }

Красный фон будет применяться, если ориентация области просмотра является альбомной.

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

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

hover и pointer

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

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

hover: hover, если основной механизм ввода может наводиться;

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

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

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

pointer: coarse, если основной механизм ввода содержит указательное устройство ограниченной точности;

pointer: fine, если основной механизм ввода содержит точное указательное устройство;

pointer: none, если основной механизм ввода не содержит указательного устройства.

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

Эй, это все скучные вещи, где новая классная функция, о которой ты говорил?

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

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

inverted-colors

Функция inverted-colors полезна, если вам нужно применить некоторые стили, когда системные цвета инвертированы.
Для чего мне инвертировать системные цвета? Обычно это очень полезно, если вам нужно улучшить читаемость.

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

У нее есть только пара значений:

inverted: применять стили, если цвета инвертированы;

none: применять стили по умолчанию.

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

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

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

prefers-color-scheme

Это одна из моих любимых функций, и я надеюсь, что она постепенно станет популярной. Она позволяет разработчикам устанавливать различные стили для элементов в случае изменения цветовой схемы. И Windows, и MacOS позволяют пользователям менять системную тему со светлой на темную и наоборот, iOS 13 также представила эту функцию, а 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; } }

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

prefers-reduced-motion

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

Таким образом, в основных настольных и мобильных ОС есть опция доступности, чтобы справиться с этим беспорядком, уменьшая движение системы. prefers-reduced-motion обрабатывает эту опцию.

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

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

no-preference: чтобы применить стандартные стили.

Посмотрите пример ниже:

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

Анимация пульсации останавливается, в зависимости от настроек пользователя.

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

Заключение

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

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

Примеры кода

Вы можете увидеть онлайн-примеры здесь. Источник с открытым исходным кодом на Github, так что вы можете посмотреть его!

Автор: Francesco Baldan

Источник: //medium.com

Редакция: Команда webformyself.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Фреймворк Bootstrap 5. Быстрый старт

Изучите основы Bootstrap 5 на практическом примере по верстке интернет-магазина с нуля!

Обзор. Разметка · Bootstrap. Версия v4.0.0

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

Контейнеры

Это базовый элемент в Bootstrap и они необходимы при использовании нашей стандартной сеточной системы. Выбирайте отзывчивый, с фиксированной шириной (что значит, что его max-width изменяется на каждом брейкпойнте) или контейнер с плавающей шириной (width ==100% всегда).

Контейнеры могут иметь вложенные элементы, но в большинстве случаев можно обойтись без них.

<div>
  <!-- Content here -->
</div>

Используйте .container-fluid для создания контейнера полной ширины, занимающий 100% зоны просмотра.

<div>
  ...
</div>

Отзывчивые брейкпойнты

Поскольку Bootstrap разработан как mobile-first, тут используются медиа-запросы @media для создания брейкпойнтов контента и интерфейсов. Эти брейкпойнты в основном сделаны на минимальных широтах зоны просмотра и позволяют масштабировать элементы по мере изменения размера зоны просмотра.

В исходниках Sass Bootstrap главным образом записаны следующие ранги @media (брейкпойнты) для разметки, сеточной системы и компонентов.

// Экстрамалые девайсы («телефоны», 
// Малые девайсы («ландшафтные телефоны», >= 576px)
@media (min-width: 576px) { ... }

// Средние девайсы («таблетки», >= 768px)
@media (min-width: 768px) { ... }

// Большие девайсы (десктопы, >= 992px)
@media (min-width: 992px) { ... }

// Экстрабольшие девайсы (большие десктопы, >= 1200px)
@media (min-width: 1200px) { ... }

Так как все эти параметры записаны в исходниках как Sass, все @media доступны через миксины:

@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) { ... }

// Example usage:
@include media-breakpoint-up(sm) {
  .some-class {
    display: block;
  }
}

По случаю можно использовать и другие размеры (max-width: 575px == «данный размер или меньше»):

// Экстрамалые девайсы («телефоны», @media (max-width: 575.98px) { ... }

// Малые девайсы («ландшафтные», @media (max-width: 767.98px) { ... }

// Средние девайсы («таблетки», @media (max-width: 991.98px) { ... }

// Большие девайсы (большие десктопы, @media (max-width: 1199.98px) { ... }

// Экстрабольшие девайсы (большие десктопы)
// Тут нет @media, т.к. такие брейпкойнты не имеют верхней границы по ширине width

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

Опять же, эти @media доступны через Sass миксины:

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

Также в наличии @media и миксины размеров экрана, использующие минимальные и максимальные ширины брейкпойнтов.

// Экстрамалые девайсы («портретные телефоны», @media (max-width: 575.98px) { ... }

// Малые девайсы («ландшафтные», >= 575px)
@media (min-width: 576px) and (max-width: 767.98px) { ... }

// Средние девайсы («таблетки», >= 768px) 
@media (min-width: 768px) and (max-width: 991.98px) { ... }

// Большие девайсы (большие десктопы, >= 992px)
@media (min-width: 992px) and (max-width: 1199.98px) { ... }

// Большие девайсы (большие десктопы, >= 1200px)
@media (min-width: 1200px) { ... }

Эти @media также доступны из миксинов Sass:

@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 могут занимать несколько значений ширин брейкпойнта:

// Пример
// Здесь стили применятся от средних девайсов до XL-девайсов
@media (min-width: 768px) and (max-width: 1199.98px) { ... }

Миксины Sass для захвата таких же параметров (выше) выглядели бы так:

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

Z-индекс

Несколько компонентов Bootstrap используют данный индекс z-index, т.е. свойство CSS, которое помогает контролировать расположение контента с помощью третьей оси. В Bootstrap используется «стандартный» Z-индекс, спроектированный для правильного расположения навигации, всплывающих подсказок, всплывающих окон и т.н. “modals” (pop-up окно наверху страницы).

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

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

$zindex-dropdown:          1000 !default;
$zindex-sticky:            1020 !default;
$zindex-fixed:             1030 !default;
$zindex-modal-backdrop:    1040 !default;
$zindex-modal:             1050 !default;
$zindex-popover:           1060 !default;
$zindex-tooltip:           1070 !default;

Для того, чтобы эффективно обращаться с перекрывающимися границами внутри компонентов (например, кнопки и формы ввода в группах форм ввода), мы используем по умолчанию значения z-index 1,2,3, а также hover и «активные состояния». В hover/focus/active мы подводим частный элемент к «переднему краю» использованием более высокого z-индекса, для показа его границы над вложенными элементами.

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

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

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

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

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

div {
	width: 100%;
	min-width: 100px;
	max-width: 600px;
}

Что с кроссбраузерностью?

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

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

Выбираем между «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

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

—>

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

5. Метатег viewport

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

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

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

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

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

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

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

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

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

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

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

Media Queries медиа запросы CSS уроки для начинающих академия

CSS Media запросы-больше примеров

Рассмотрим еще несколько примеров использования медиа-запросов.

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

Пример

/* On screens that are 992px or less, set the background color to blue */
@media screen and (max-width: 992px) {
  body {
    background-color: blue;
  }
}

/* On screens that are 600px or less, set the background color to olive */
@media screen and (max-width: 600px) {
  body {
    background-color: olive;
  }
}

Вы удивляетесь, почему мы используем именно 992пкс и 600px? Это то, что мы называем «типичными точками останова» для устройств. Более подробную информацию о типичных точках останова можно прочитать в руководстве по адаптивному веб-дизайну.

Запросы мультимедиа для меню

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

Пример

/* Navbar links */
.topnav a {
    float: left;
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

/* On screens that are 600px wide or less, make the menu links stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
    .topnav a {
        float: none;
        width: 100%;
    }
}

Запросы носителей для столбцов

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

Большие экраны:

Средние экраны:

Пример

/* On screens that are 992px wide or less, go from four columns to two columns */
@media screen and (max-width: 992px) {
  .column {
    width: 50%;
  }
}

/* On screens that are 600px wide or less, make the columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  .column {
    width: 100%;
  }
}

Совет: Более современный способ создания макетов столбцов — использование CSS Flexbox (см. пример ниже). Тем не менее он не поддерживается в Internet Explorer 10 и более ранних версиях. Если вам необходима поддержка IE6-10, используйте float (как показано выше).

Чтобы узнать больше о модуле макета гибкой коробки, прочитайте нашу главу CSS Flexbox.

Чтобы узнать больше о адаптивном веб-дизайне, прочитайте наш отзывчивый веб-дизайн учебника.

Пример

/* Create four equal columns */
.column {
  flex: 25%;
  padding: 20px;
}

/* On screens that are 992px wide or less, go from four columns to two columns */
@media screen and (max-width: 992px) {
  .column {
    flex: 50%;
  }
}

/* On screens that are 600px wide or less, make the columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  .row {
    flex-direction: column;
  }
}

Скрытие элементов с помощью запросов мультимедиа

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

Я буду скрыта на маленьких экранах.

Пример

/* If the screen size is 600px wide or less, hide the element */
@media screen and (max-width: 600px) {
  div.example {
    display: none;
  }
}

Изменение размера шрифта с помощью запросов мультимедиа

Также можно использовать запросы мультимедиа для изменения размера шрифта элемента на различных размерах экрана:

Пример

/* If screen size is 600px wide, or less, set the font-size of <div> to 30px */
@media screen and (max-width: 600px) {
  div.example {
    font-size: 30px;
  }
}

Гибкая Галерея изображений

В этом примере мы используем мультимедийные запросы вместе с Flexbox для создания адаптивной галереи изображений:

Гибкий сайт

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

Ориентация: портрет/пейзаж

Мультимедийные запросы также можно использовать для изменения макета страницы в зависимости от ориентации браузера.

Вы можете иметь набор свойств CSS, которые будут применяться только в том случае, если окно обозревателя шире, чем его высота, так называемая «Ландшафтная» ориентация:

Пример

Используйте цвет фона лигхтблуе, если ориентация находится в альбомном режиме:

@media only screen and (orientation: landscape) {
    body {
        background-color: lightblue;
    }
}

Минимальная ширина до максимальной ширины

Можно также использовать значения (max-width: ..) and (min-width: ..) для задания минимальной ширины и максимальной ширины.

Например, если ширина обозревателя находится между 600 и 900px, измените внешний вид элемента <div>:

Пример

@media screen and (max-width: 900px) and (min-width: 600px) {
  div.example {
    font-size: 50px;
    padding: 50px;
    border: 8px solid black;
    background: yellow;
  }
}

Использование дополнительного значения: В приведенном ниже примере мы добавляем дополнительный мультимедийный запрос к уже существующему, используя запятую (это будет вести себя как оператор OR):

Пример

/* When the width is between 600px and 900px OR above 1100px — change the appearance of <div> */
@media screen and (max-width: 900px) and (min-width: 600px), (min-width: 1100px) {
  div.example {
    font-size: 50px;
    padding: 50px;
    border: 8px solid black;
    background: yellow;
  }
}

CSS @media ссылка

Для полного обзора всех типов носителей и функций/выражений, пожалуйста, посмотрите на @media правило в нашей ссылке CSS.

Совет: Чтобы узнать больше о адаптивном веб-дизайне (как ориентироваться на различные устройства и экраны), используя точки останова для запросов мультимедиа, прочитайте наш учебник по адаптивному веб-дизайну.

Мин. Ширина, Макс. Ширина и запросы мультимедиа | Банури Викрамаратна

Медиа-запросы — это концепция, которая играет важную роль в адаптивном веб-дизайне. Под адаптивным веб-дизайном понимается создание веб-страниц, которые могут динамически изменять свой внешний вид в соответствии с экраном пользователя (мобильный, планшет, ноутбук, ПК и т. Д.) С целью улучшения взаимодействия с пользователем. Можно сказать, что это похоже на добавление условий в файл .css.

Синтаксис

@media media-type и (media-feature) {

}

Media types

Это категория типа устройства.Обычно используемые типы носителей — «экраны», «печать».

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

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

• Ориентация
• Разрешение
• Соотношение сторон
• Ширина
• Высота

Основное объяснение минимальной и максимальной ширины

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

Min-width:

В приведенном выше примере говорится, что элемент HTML с именем id как «ButtonWrapper» примет ширину 100% (от его родительского элемента), когда ширина устройства больше или равна 1024 пикселей.

Max-width:

max -width означает меньшую или равную ширине, указанной в этом медиа-запросе.Итак, в приведенном выше примере элемент, имеющий «#ButtonWrapper» в качестве идентификатора, получит ширину 70% от ширины всех экранов, которые меньше или равны 1024 пикселям.

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

Поскольку эти медиа-запросы известны как своего рода операторы if, мы можем использовать логические операторы, чтобы сделать их более сложными и эффективными. Можно использовать все основные логические операторы, такие как «И», «ИЛИ» и «НЕ». Возьмем по одному.

AND Оператор:

В соответствии с приведенным ниже примером элемент класса «buttonWrapper» будет занимать 70% ширины от всей ширины экрана, которая больше или равна 768 пикселей и меньше или равна 1024 пикселей.Оператор действует как его же корневая функция.

Оператор ИЛИ:

Фактически это различные медиа-запросы, разделенные запятыми. Разработчики используют это, чтобы уменьшить количество строк кода. Не только это, но и «ИЛИ» можно использовать для медиа-запросов, которые используют общий набор стилей.

Итак, со ссылкой на пример ниже, класс «buttonWrapper» получит 80% ширины для всех экранов, которые больше или равны 768px по ширине, а также больше или равны 1024px по ширине.

Оператор НЕ:

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

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

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

До следующей статьи! 😊

Обзор · Bootstrap

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

Контейнеры

Контейнеры являются самым основным элементом макета в Bootstrap и требуют при использовании нашей сеточной системы по умолчанию . Выберите из адаптивного контейнера фиксированной ширины (это означает, что его максимальная ширина изменяется в каждой точке останова) или гибкой ширины (что означает, что он всегда имеет ширину 100% и ).

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

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

  

  ...
  

Адаптивные точки останова

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

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

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

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

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

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

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

Поскольку мы пишем наш исходный CSS на Sass, все наши медиа-запросы доступны через миксины Sass:

  // Нет необходимости в медиа-запросе для точки останова 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 пикселей) {...}

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

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

Еще раз, эти медиа-запросы также доступны через миксины Sass:

  @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 пикселей) {...}  

Эти медиа-запросы также доступны через миксины Sass:

  @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) {...}  

Миксин Sass для таргетинга на тот же диапазон размеров экрана:

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

Z-index

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

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

Мы не поощряем изменение этих индивидуальных значений; если вы измените один, вам, вероятно, придется изменить их все.

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

Для обработки перекрывающихся границ внутри компонентов (например,g., кнопки и входы в группах ввода), мы используем младшие однозначные значения z-index : 1 , 2 и 3 для состояний по умолчанию, при наведении курсора и активного состояния. При наведении / фокусе / активном мы выводим конкретный элемент на передний план с более высоким значением z-index , чтобы показать их границу над соседними элементами.

Как установить диапазон ширины для ваших медиа-запросов CSS

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

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

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

Базовый медиа-запрос выглядит так:

  @media only screen and (max-width: 576px) {
    // сделай что-нибудь
}

@media only screen и (min-width: 576px) {
    // делаем что-то еще раз
}  

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

Буквально вы говорите, что для этой конкретной ширины (то есть свойства max-width 576px ) CSS примените стили, которые я буду писать здесь, только к этой ширине, от начальной ширины из 0px .

Свойства max-width и min-width

При создании медиа-запросов для разных размеров экрана необходимо иметь в виду две вещи: свойства max-width и min-width .

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

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

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

  @media only screen and (min-width: 576px) {
    // применяем стили здесь от этой минимальной ширины
    // 576 пикселей (устройства среднего размера)
}  

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

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

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

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

Взгляните:

  @media only screen and (min-width: 360px) and (max-width: 768px) {
// делаем что-нибудь в этом диапазоне ширины.
}  

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

Принимает первое предоставленное выражение ширины как начальное значение, а второе как конечное значение.

Помните, как мы видели разницу между свойством max-width и min-width выше? Мы просто говорим браузеру применить стили CSS, которые мы напишем внутри этого правила, к мобильным устройствам с размерами экрана от 360 пикселей, до 768 пикселей, .

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

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

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

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

  

  
    
    
  
  
    

      

         
 Первое окно 
 
        

Информация в первом поле
        
      
      

         
 Вторая коробка 
 
        

          Информация во втором поле
        
      
 

  

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

  .container {
  дисплей: гибкий;
  flex-wrap: обертка;
  ширина: 980 пикселей;
  маржа: 0 авто;
  маржа сверху: 40 пикселей;
}

@media only screen и (min-width: 320px) и (max-width: 576px) {
  .container {
    ширина: 100%;
    отступ слева: 23px;
    flex-direction: обратный столбец;
  }
  .boxes {
    ширина: 100%;
  }
}  

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

Расположение ящиков также изменяется в этом конкретном диапазоне ширины. Это связано с тем, что в селекторе .container свойство flex-direction изменено с row на column-reverse .

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

Заключение

Без установки диапазона ширины стили CSS из приведенного выше фрагмента будут применяться ко всем устройствам с минимальным размером экрана 576px и выше.

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

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

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

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

Медиа-запросы являются частью CSS3.

Пример медиа-запроса:

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

Media Query похож на обычный CSS, с той лишь разницей, что он заключен в блок @media , как показано ниже.

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

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

Понять минимальную ширину

Вот пример медиа-запроса min-width :

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

Здесь этот запрос на самом деле означает, что — «если ширина устройства больше или равна 576 пикселей, применить CSS, определенный в этом блоке».

• Mobile First подход — min-width запроса обычно используются, когда мы пишут наше приложение только для мобильных устройств, но все же хотят видеть его на рабочем столе.
• В приведенных выше примерах указано, что будет применен указанный блок медиа-CSS. только когда ширина устройства превышает 576 пикселей или становится равной этой. Это означает, что указанный выше CSS будет применяться всякий раз, когда приложение открывается на больших устройствах. то есть планшет или компьютер.

Узнайте о максимальной ширине

Вот пример медиа-запроса max-width :

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

Здесь этот запрос действительно означает, что — «если ширина устройства меньше или равна 576 пикселей, то применить CSS, определенный в этом блоке.«

• Рабочий стол Первый подход — max-width запросов обычно используются, когда мы пишут наше приложение в основном для целевых настольных устройств, но все же хотят, чтобы приложение также реагировало на небольшие устройства. например, мобильные устройства, планшеты и т. д.
• В приведенном выше примере указано, что будет применен указанный блок медиа-CSS. только когда ширина устройства станет 576 пикселей или меньше этого значения. Это означает, что указанный выше CSS будет применяться всякий раз, когда приложение открывается на мобильных устройствах.

Объединение минимальной и максимальной ширины

Мы также можем комбинировать как min-width , так и max-width для нацеливания на конкретную ширину экрана:

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

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

Bootstrap использует следующие точки останова для обработки адаптивного дизайна:

Для данного размера экрана или больше

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

Щелкните здесь, чтобы проверить отзывчивые точки останова на веб-сайте начальной загрузки.

· Bootstrap

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

Контейнеры

Контейнеры являются самым основным элементом макета в Bootstrap и требуют при использовании нашей сеточной системы по умолчанию . Выберите из адаптивного контейнера фиксированной ширины (это означает, что его максимальная ширина изменяется в каждой точке останова) или гибкой ширины (что означает, что он всегда имеет ширину 100% и ).

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

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

  

  ...
  

Адаптивные точки останова

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

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

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

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

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

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

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

Поскольку мы пишем наш исходный CSS на Sass, все наши медиа-запросы доступны через миксины Sass:

  @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 пикселей) {...}

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

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

Еще раз, эти медиа-запросы также доступны через миксины Sass:

  @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) {...}  

Эти медиа-запросы также доступны через миксины Sass:

  @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) {...}  

Миксин Sass для таргетинга на тот же диапазон размеров экрана будет:

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

Z-индекс

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

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

Мы не поощряем изменение этих индивидуальных значений; если вы измените один, вам, вероятно, придется изменить их все.

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

Для обработки перекрывающихся границ внутри компонентов (например,g., кнопки и входы в группах ввода), мы используем младшие однозначные значения z-index : 1 , 2 и 3 для состояний по умолчанию, при наведении курсора и активного состояния. При наведении / фокусе / активном мы выводим конкретный элемент на передний план с более высоким значением z-index , чтобы показать их границу над соседними элементами.

Media Query не работает | Практические шаги по устранению неисправности

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

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

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

Содержимое:

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

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

Как мы упоминали ранее, Media Query — это метод CSS (каскадные таблицы стилей), используемый для настройки внешнего вида (размера шрифта, цветовых стилей и т. Д.) Содержимого страницы для разных размеров экрана и разрешения.

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

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

Это простой пример медиа-запроса:

@media screen и (max-width: 480px)

{

header {height: 70px; }

статья {font-size: 14px; }

img {max-width: 480px; }

}

Они могут быть вставлены в HTML-код веб-страницы или объявлены отдельным лицом.CSS файл. Вот несколько вариантов использования медиа-запросов:

1. Регулировка ширины столбца в зависимости от размера экрана устройства: можно использовать медиа-запросы CSS для настройки ширины столбцов и связанных с ними элементов . Это обеспечит лучший пользовательский опыт для всех посетителей.
2. Изменение макетов: вы также можете использовать медиа-запрос CSS для преобразования макета с двумя столбцами в макет с одним столбцом для мобильных устройств .
3. Перемещение боковой панели: объявляя медиа-запрос, вы можете указать браузеру переместить боковую панель под содержание сайта, когда страница просматривается на мобильном устройстве или в портретном режиме.

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

Чтобы правильно использовать медиа-запросы, важно понимать их синтаксис.

Медиа-запрос состоит из следующих четырех элементов:

1. @media rule
2. Тип носителя (необязательно)
3. Логические операторы
4. Выражения медиа-характеристик.

@media правило:

Первое, что нужно сделать при настройке медиа-запроса в CSS, — это объявить, что вы собираетесь делать .Для этого введите @media без пробелов между ними.

Тип носителя:

Следующим элементом, который следует правилу @media, является тип носителя . Это относится к типу устройства, для которого вы настраиваете запрос. Типы носителей включают:

все : Этот тип носителя подходит для всех устройств . Если вы не используете конкретный тип мультимедиа, например: @media (max-width: 480px), будет подразумеваться «все» .

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

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

Speech: Это предназначено для программ чтения с экрана.

Функции мультимедиа:

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

Итак, вот несколько мультимедийных функций и их функций:

• Высота — описывает высоту области просмотра
• Max-height — максимальная высота окна браузера.
• Ширина — ширина области просмотра
• Max-width — эта функция мультимедиа определяет максимальную ширину окна браузера.
• Min-height — определяет минимальную высоту окна браузера.
• Ориентация — это относится к ориентации области просмотра.

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

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

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

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

, а не : логический оператор «not» отменяет медиа-запрос . При использовании оператора not необходимо указать тип носителя.

только : этот оператор помогает предотвратить неправильную интерпретацию медиа-запроса старыми браузерами. Если вы не используете «только», медиа-запросы могут не работать в старых браузерах.

Они могут интерпретировать ‘screen и (max-width: 767px)’ как ‘screen’, тем самым применяя запрос ко всем экранам. Обратите внимание, что этот оператор не влияет на современные браузеры .При использовании оператора «only» также необходимо указать тип носителя.

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

Типичный пример медиа-запроса

Если вам все еще интересно, как выглядит медиа-запрос, вы можете увидеть множество из них в стиле.css адаптивной темы WordPress. Они начинаются с @media и обычно располагаются внизу таблиц стилей .

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

@media only screen и (max-width: 600px) {

body {

background-color: green;

}

}

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

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

Вот еще один пример:

@media screen и (max-width: 850px) {

.column {

width: 50%;

}

}

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

.столбец {

ширина: 100%;

}

}

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

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

Как исправить неработающие медиа-запросы

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

Итак, после настройки ваших медиа-запросов, и они не работают, сделайте следующее:

Убедитесь, что он установлен правильно

Иногда ваш медиа-запрос не работает из-за неправильной позиции.

В идеале медиа-запросы следует размещать в конце таблицы стилей. Как известно, браузеры читают таблицы стилей сверху вниз. Итак, коды в конце таблицы стилей переопределяют объявления, сделанные в начале (кроме случаев, когда! Important используется для принудительной реализации кода).

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

body {

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

}

@media экран и (min-width: 480px) {

body {

background-color: green;

}

}

@media экран и (min-width: 850px) {

body {

background-color: lightblue;

выравнивание текста: по центру;

}

}

Первое правило устанавливает серый цвет фона страницы, если он меньше 480 пикселей.Затем медиазапросы устанавливают зеленый фон для экранов размером 480–849 пикселей и устанавливают светло-голубой цвет фона, а также выравнивают текст по центру — для экранов размером 850 пикселей и более.

CSS объявлен встроенным

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

В качестве альтернативы вы можете переопределить встроенный CSS с помощью! Important.В результате это может решить проблему «медиа-запрос CSS не работает».

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

@ экран мультимедиа и (максимальная ширина: 1024 пикселя) {
p {
цвет: черный;
}
}

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

@media screen и (max-width: 1024px) {
p {
color: black! важный;
}
}

Итак, это должно решить проблему с медиа-запросами.

К более раннему объявлению прикреплен! Important

Как мы видели выше,! Important может переопределять другие стили, даже встроенные стили, установленные для элемента. Если вы также использовали! Important ранее в своей электронной таблице для элемента, медиа-запросы, объявленные после этого, не будут работать. .

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

Медиа-запрос не работает на настольном компьютере

В идеале ваши медиа-запросы должны работать как на мобильных устройствах, так и на настольных компьютерах. Но если они не работают на настольных компьютерах, используйте в качестве мультимедийной функции max-width вместо max-device-width.Итак, вот разница между ними.

Max-device-width: Это относится к фактическому размеру экрана устройства.

Max Width: Это относится к размеру области отображения устройства (окна браузера).

Итак, допустим, максимальная ширина устройства установлена ​​на 600 пикселей. Он не будет работать на настольном устройстве (даже если вы уменьшите размер окна браузера до 600 пикселей), потому что размер экрана устройства превышает 600 пикселей.

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

Медиа-запрос не работает на мобильных устройствах

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

Для этого добавьте одну из следующих строк кода в заголовок вашего сайта в элементе:



Или



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

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

Свойство initial-scale определяет уровень масштабирования при первой загрузке страницы пользователем.

Заключение

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

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

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

 / * Смартфоны (книжная и альбомная) ----------- * /
@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 and (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) {
/ * Стили * /
}