Товаров: 0 (0р.)

Media max width and min width: html — How to set @media (min-width) and (max-width) for both chrome and firefox

Содержание

Медиавыражения в CSS — это не только max-width | by Рома Зварич

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

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

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

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

Да, я говорю о width, height, min-width, min-height, max-width и max-height.

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

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

/* Красный фон применится, только если высота вьюпорт больше 320 пикселей */
body {
background-color: #FFD23F; /* Желтый фон */
}

@media screen and (min-height: 320px) {
body {
background-color: #EE4266; /* Красный фон */
}
}

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

/* Красный фон применится, если ширина области видимости от 320 до 600 пикселей */
body {
background-color: #FFD23F; /* Желтый фон */
}

@media screen and (min-width: 320px) and (max-width: 600px) {
body {
background-color: #EE4266; /* Красный фон */
}
}

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

body {
background-color: #0EAD69;
}

@media screen and (max-width: 1600px) {
body {
background-color: #3BCEAC;
}
}

@media screen and (max-width: 1280px) {
body {
background-color: #FFD23F;
}
}

@media screen and (max-width: 960px) {
body {
background-color: #EE4266;
}
}

@media screen and (max-width: 600px) {
body {
background-color: #540D6E;
}
}

Orientation — это хорошая медиа-функция, которая позволяет вам производить изменения в зависимости от ориентации дисплея. Она может иметь два значения: portrait (портрет) и landscape (пейзаж/альбом).

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

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

/* Красный фон применяется только, если ориентация экрана альбомная */
body {
background-color: #FFD23F; /* Желтый фон */
}

@media screen and (orientation: landscape) {
body {
background-color: #EE4266; /* Красный фон */
}
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Вот они!

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

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

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

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

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

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

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

.text {
font-size: 24px;
}

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

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

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

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

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

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

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

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

.appbar {
background-color: #EE4266;
}

.fab {
background-color: #424242;
}

@media screen and (prefers-color-scheme: dark) {
body {
background-color: #424242;
}

.appbar {
background-color: #212121;
}

h3 {
color: #fff;
}

.fab {
background-color: #EE4266;
}
}

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

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

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

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

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

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

.pulse {
animation: pulse 2s infinite;
}

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

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

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

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

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

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

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

Обзор. Разметка · 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-индекса, для показа его границы над вложенными элементами.

Какой должен быть порядок следования @media queris при формате «Сначала десктоп»?

Приветствую.
Многие пишут, в том числе и основоположник «теории» — Сперва мобильные, о том, что логичным и очевидным является использование media queris в порядке от меньшего разрешения к большему. К примеру человек, написавший пост на этой странице утверждает о том, что:
Браузер высчитывает реальное значение min-width исходя из размеров окна браузера, а max-width — от разрешения экрана, соответственно при разрешении 1920px сработают max-width(480px), max-width(800px) и так далее, вплоть до max-width(1920px).

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

Хотелось бы разобрать следующее высказывание:

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

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

Теперь о порядке следования media queries. Как мне представляется, при использовании формата от дестопного варианта дизайна к мобильному, сначала в таблице стилей идут правила без указания правил media queries, а затем при уменьшении размеров дизайна (его отображения), должны вступать в действие media queries в порядке убывания — от большего к меньшему:

@media (max-width: 900px)
@media (max-width: 800px)
@media (max-width: 700px)
@media (max-width: 600px)
и так далее, вплоть до самого меньшего разрешения окна.

Кстати в чем заключается разница между следующими запросами и какой из них лучше использовать?

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

Media min width and max width

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

2.1. Оператор and

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

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

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

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

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

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

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

2.3. Оператор not

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

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

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

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

2.4. Оператор only

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

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

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

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

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

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

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

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

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

grid

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

—>

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

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

5. Метатег viewport

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* Устройства с очень маленьким экраном (смартфоны, меньше 768px) */
/* Стили CSS (по умолчанию) - для ширины viewport <768px */

/* Устроства с маленьким экраном (планшеты, 768px и выше) */
@media (min-width: 768px) {
/* Стили для устройств с шириной viewport, находящейся в диапазоне 768px - 991px */
}

/* Устройства со средним экраном (ноутбуки и компьютеры, 992px и выше) */
@media (min-width: 992px) {
  /* Стили для устройств с шириной viewport, находящейся в диапазоне 992px - 1199px */
}

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

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

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

@media (max-width: 767px) {
  /* стили для xs-устройств */
}
@media (min-width: 768px) and (max-width: 991px) {
  /* стили для sm-устройств */
}
@media (min-width: 991px) and (max-width: 1199px) {
  /* стили для md-устройств */
}
@media (min-width: 1200px) {
  /* стили для lg-устройств */
}
  • 14 июля 2019 г.
  • 2463 просмотра
Добавить комментарий

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

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

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

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

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

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

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

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

  @media (макс. Ширина: 767 пикселей) {...}
@media (min-width: 768 пикселей) {...}  

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

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

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

  @media (max-width: 29.999em) {...}
@media (минимальная ширина: 30 мкм) {...}  

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Вложенные медиа-запросы

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

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

.
  @media screen {
  @media (min-width: 30em) {
    // это применимо только к экранам с шириной больше или равной 30em (480 пикселей)
  }
}  

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

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

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

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

  @media (min-width: 30em) {
  @media not all и (min-width: 64em) {
    .пример { … }
  }
}  

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

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

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

  @media not all and (max-width: 30em) {
  @media (max-width: 64em) {
    .пример { … }
  }
}  

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

  @media (30em  

tl; др:

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

.
  @media (min-width: [нижняя граница]) {
  @media not all и (min-width: [верхняя граница]) {
    .пример { … }
  }
}  

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

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

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

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

Медиа-запрос - это метод CSS, представленный в CSS3.

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

Общий синтаксис медиа-запроса

@media (запрос) {

/ * Правила CSS, используемые при совпадении запроса * /

}

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

Давайте посмотрим на запросы, специфичные для устройства:

1. Мобильный

Для ноутбуков есть два разных разрешения.
  1. экран только @media
  2. и (min-device-width: 320px)
  3. и (максимальная ширина устройства: 480 пикселей)
  4. {}

Обычно этот размер рекомендуется для мобильных устройств:
  1. экран только @media
  2. и (min-device-width: 360 пикселей)
  3. и (максимальная ширина устройства: 640 пикселей)
  4. {}

2.Ноутбук

Для ноутбуков есть два разных разрешения.
  1. экран только @media
  2. и (min-device-width: 768px)
  3. и (максимальная ширина устройства: 1024 пикселя)
  4. {}
  1. экран только @media
  2. и (минимальная ширина: 1030 пикселей)
  3. и (максимальная ширина: 1366 пикселей)
  4. {}

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

3.Рабочий стол
  1. Экран только @media
  2. и (минимальная ширина: 1370 пикселей)
  3. и (максимальная ширина: 1605 пикселей)
  4. {}

4. iPad
  1. экран только @media
  2. и (ориентация: альбомная)
  3. и (-webkit-min-device-pixel-ratio: 1)
  4. и (min-device-width: 768px)
  5. и (максимальная ширина устройства: 1007 пикселей)
  6. {}
  1. экран только @media
  2. и (ориентация: книжная)
  3. и (-webkit-min-device-pixel-ratio: 1)
  4. и (min-device-width: 768px)
  5. и (максимальная ширина устройства: 1007 пикселей)
  6. {}

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

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

< html >

< head >

/ заголовок >

< стиль >

9000 9000 9000 устройств * ///////// медиа (max-width: 480 пикселей) {

body {

background-color: red;

}

}

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

@ ) и (max-width: 767 пикселей) {

body {

background-color: yellow;

}

}

/ * Медиа-запрос для планшетов iPad в портретном режиме * /

@

@

@

и (max-width: 1024px) {

body {

background-color: blue;

}

}

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

9000px ширина: (max-width: 1280 пикселей) {

body {

background-color: green;

}

}

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

мин.

корпус {

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

}

}

стиль >

000 000 000 000 000 000 000 000 000 body style = "выравнивание текста: по центру;" >

< h2 > GeeksforGeeks h2 >

< h3 9000 6> Media

body >

html >

Разница между CSS width, min-width и max-width property

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

CSS

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

  • ширина
  • мин. Ширина
  • макс. Ширина

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

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

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

Давайте нырнем.


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

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

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

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

Минимальная ширина свойство

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

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

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

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

Свойство max-width

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

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

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

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

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

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

Сходства и различия между шириной , минимальной шириной и максимальной шириной

Сходства

Все три объекта недвижимости похожи в следующем:

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

Отличия

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

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

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

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

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

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

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

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

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

мин. Ширина размер

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

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

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

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

макс.ширина размер

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Заключение

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

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

Media Queries - Learn.co

Описание проблемы

Ключом к проектированию и созданию адаптивных макетов является наличие вашего контента реагировать на размер устройства (или "средний"). Ваш CSS может запрашивать "медиа" (множественное число от «medium»), чтобы узнать их размеры и пропорции. Эти "СМИ запросы »- это основная тема этого урока. Написав« медиа-запросы », вы можете убедитесь, что ваш сайт отлично выглядит на всех устройствах.

Цели

  1. Для чего нужны медиа-запросы
  2. Каков синтаксис медиа-запросов
  3. Где должны быть созданы «точки останова»

Медиа-запросы - это функция CSS. Это наборы стилей, которые применяются когда среда удовлетворяет определенным условиям. Медиа-запросы чаще всего решить, применяется ли группа правил CSS на основе "области просмотра" устройства (или, "Размер экрана. Точки, в которых макет настраивается на основе некоторых носителей. свойство (или свойства!), называется «точкой останова».

Ниже приведены несколько примеров синтаксиса для записи оператора медиа-запроса в наш код CSS:

  @media (max-width: 992px) {
  тело {
    цвет фона: синий;
  }
}
  

Ниже приведены более конкретные и полные примеры синтаксиса медиа-запроса:

  @media screen и (max-width: 992px) {
  тело {
    цвет фона: синий;
  }
}

  
  @media only screen and (max-width: 992px) {
  тело {
    цвет фона: синий;
  }
}
  

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

не , только

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

  @media only screen and (max-width: 992px) {
  тело {
    цвет фона: синий;
  }
}
  
  @media not screen and (max-width: 992px) {
  тело {
    цвет фона: синий;
  }
}
  
mediatype

В настоящее время единственными хорошо поддерживаемыми типами носителей являются: экран, печать или все (имеется в виду все устройства). Мобильные, планшетные и настольные устройства подпадают под screen mediatype, а print используется для отображения содержимого в 'print превью ».Чаще всего нас интересует только screen .

  @media [screen | print | all] and (max-width: 992px) {
  тело {
    цвет фона: синий;
  }
}
  
и , ,

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

  • Использование и требует, чтобы выполнялись оба условия на каждой стороне и для применения запроса.
  • Используя , обозначает или , что означает, что только одно из условий на любом сторона запятой должна быть верной, чтобы запрос сработал.
  @media screen and (min-width: 992px) and (max-width: 1136px) {
  тело {
    цвет фона: синий;
  }
}
  
  @media screen and (min-width: 992px), (max-width: 1136px) {
  тело {
    цвет фона: синий;
  }
}
  
(выражение)

Мы определяем условные выражения, записывая тест и оборачивая его в скобки. Выражение должно быть истинным, чтобы запрос триггер, если не используется , .За этими выражениями следует набор из {} фигурные скобки, которые заключают селекторы CSS и правила, которые будут применяться, когда запускается медиа-запрос.

  @media (max-width: 992px) {
  тело {
    цвет фона: синий;
  }
}
  

Использование

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

  / * начальный стиль * /
п {
    красный цвет;
}

/ * медиа-запрос * /
@media only screen и (max-width: 800px) {
  п {
    цвет: зеленый;
  }
}
  

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

Другими словами, стиль будет применяться только к экранам, размер которых меньше 801px в ширину. За условием следуют пара фигурных скобок ( {} ), которые включите стиль (ы), который будет применяться при выполнении условия. В нашем случае на экраны шириной 800 пикселей или меньше, мы меняем цвет текста абзацев на зеленый вместо красного.

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

  / * начальный стиль * /
п {
  красный цвет;
}

/ * медиа-запрос * /
@media only screen и (min-width: 400px) {
  п {
    цвет: зеленый;
  }
}
  

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

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

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

  / * начальный стиль * /
п {
  красный цвет;
}

/ * медиа-запрос * /
@media only screen и (min-width: 400px) и (max-width: 800px) {
   п {
     цвет: зеленый;
   }
}
  

Здесь мы меняем цвет текста на зеленый только на экранах, которые находятся между 400 пикселей и 800 пикселей .

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

Где следует создавать точки останова?

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

Продвинутые методы компоновки, такие как сетка (которые будут рассмотрены позже уроки), позволяют свести к минимуму точки прерывания медиа-запросов. Вы можете для Например, установите медиа-запрос для max-width: 414px , ширина iPhone 6+, что повлияет практически на все мобильные телефоны, но позволит сетке CSS динамически регулировать ширину элементов веб-страницы для небольших телефонов.

Заключение

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

ресурса

Просмотрите медиа-запросы на Learn.co и начните учиться программировать бесплатно.

min-width vs max-with в Media Queries

TIL - краткий способ запомнить разницу между использованием min-width и max-width в медиа-запросе.

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

Запросы, которые я использовал, выглядят так:

  $ small: 600 пикселей;

.show-on-mobile {
  @include breakpoint (min-width $ small + 1) {
    дисплей: нет;
  }
}

.hide-on-mobile {
  @include breakpoint (max-width $ small) {
    дисплей: нет;
  }
}  

Примечание: миксин точки останова делает написание медиа-запросов менее подробным и более семантическим.

Вот английские переводы min-width и max-width:

min-width : применяет стили к ширине экрана, большей или равной указанному значению в пикселях.Другими словами, это минимальная ширина экрана , при которой применяется стиль . Элементы с классом .show-on-mobile будут иметь стиль display: none; применяется при ширине экрана больше или равной 601 пикселей.

max-width : применяет стили к ширине экрана, меньшей или равной указанному значению в пикселях. Другими словами, это максимальная ширина экрана , при которой применяется стиль . Элементы с классом .hide-on-mobile будет иметь стиль display: none; применяется при ширине экрана меньше или равной 600 пикселей.

Обратите внимание, что .show-on-mobile настроен для применения при ширине экрана 601px и выше ... изначально у меня оба из них были установлены на 600 пикселей, но поскольку минимальная и максимальная ширина применяются при значениях, равных указанной ширине в пикселях, оба MQ применялись точно с разрешением 600 пикселей, и кнопки разбивки на страницы исчезли.

Изменение .show-on-mobile на 601px заставляет мобильное представление отображать 600 пикселей, а затем скрывать 601 пикселей, когда немобильное представление отображается (и.hide-on-mobile больше не действует).

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

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

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

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

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

Содержимое:

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

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

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

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

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

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

@media screen and (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» отменяет медиа-запрос . При использовании оператора not необходимо указать тип носителя.

Только

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

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

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

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

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

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

@media only screen and (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 {


background-color: серый;


}


@media screen и (min-width: 480px) {


body {


background-color: green;


}


}


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


body {


background-color: lightblue;


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


}


}

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

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

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

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

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

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

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 определяет уровень масштабирования при первой загрузке страницы пользователем.

Заключение

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

alexxlab

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

Ваш адрес email не будет опубликован. Обязательные поля помечены *