Media min width css: CSS Media Min-Width & Max-Width Queries

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

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

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

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

основной CSS

 .h2, .h3, .h4 {
  размер шрифта: 70px;
  семейство шрифтов: Cinzel, без засечек;
}
.nav-ссылка {
  padding-left: 10rem !важно;
}
 

запрос CSS

 @media (минимальная ширина: 1400 пикселей) {
  .h2,.h3,.h4 {
    размер шрифта: 1em;
  }
  .nav-ссылка{
    padding-left: 5em !важно;
  }
}
 

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

Я понимаю, что этот min-width:1400px предназначен для того, чтобы сказать, что если он идет от 2000px до 1400px , он должен сохранить min-width:1400px , но тогда какой смысл иметь основной CSS, если min-width:1400px просто сводит на нет основные настройки файла CSS.

Очень неприятно работать таким образом.

• css
• медиа-запросы
• отзывчивые

0

… он должен поддерживать минимальную ширину: 1400 пикселей …

Min-width не так работает с медиа-запросами.

Правило min-width фактически говорит: «применить этот блок CSS , если область просмотра имеет по крайней мере эту ширину», в данном случае не менее 1400 пикселей. если ширина области просмотра меньше 1400 пикселей, то CSS, окруженный медиа-запросом, не будет применяться, и стили, определенные в main.

css, будут иметь приоритет.

 @media (минимальная ширина: 1400 пикселей) {
  /* CSS, который применяется, только если область просмотра >= 1400px */
}
 

Также обратите внимание на порядок включения файлов CSS на страницу. Если бы query.css был включен раньше, то содержащийся в нем медиа-запрос всегда будет иметь приоритет перед CSS в main.css.

Это немного сложнее, когда вы принимаете во внимание специфику, но вы должны получить общее представление.

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

Важным аспектом медиа-запросов является их правильная структура, особенно если вы используете комбинацию из @media (минимальная ширина: x) и @media (максимальная ширина: x) .

CSS читается сверху вниз — это означает, что свойство last , примененное к желаемому селектору, будет иметь приоритет, пока оно действительно. Это означает, что более «точная/точная» опора правила media-query будет , а не иметь приоритет над другим, если media-query размещен ниже другого и оба их правила действительны. Это означает, что вы не можете просто добавить media-queries в случайных местах вашего CSS-файла, потому что CSS просто будет перезаписан.

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

Из-за этого вы всегда должны создавать media-query -rules с:

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

восходящее значение пикселей, если вы используете min-width

В этом примере , min-width — media-queries ниже max-width — media-queries

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

 раздел {
  ширина: 150 пикселей;
  высота: 150 пикселей;
  цвет фона: красный;
}
Экран @media и (максимальная ширина: 412 пикселей) {
  дел {
    цвет фона: зеленый;
  }
}
Экран @media и (максимальная ширина: 360 пикселей) {
  дел {
    цвет фона: желтый;
  }
}
Экран @media и (минимальная ширина: 320 пикселей) {
  дел {
    цвет фона: оранжевый;
  }
}
Экран @media и (минимальная ширина: 414 пикселей) {
  дел {
    цвет фона: черный;
  }
}
Экран @media и (минимальная ширина: 428 пикселей) {
  дел {
    цвет фона: фиолетовый;
  }
}
Экран @media и (минимальная ширина: 768 пикселей) {
  дел {
    цвет фона: розовый;
  }
}
Экран @media и (минимальная ширина: 800 пикселей) {
  дел {
    цвет фона: серый;
  }
}
Экран @media и (минимальная ширина: 820 пикселей) {
  дел {
    фоновый цвет: лимонно-зеленый;
  }
}
Экран @media и (минимальная ширина: 834px) {
  дел {
    цвет фона: синий;
  }
}
Экран @media и (минимальная ширина: 884px) {
  дел {
    цвет фона: бирюзовый;
  }
} 

Варианты использования и стратегии миграции — Smashing Magazine

• Чтение: 13 мин.
• CSS, Макеты, Миграция
• Поделиться в Twitter, LinkedIn

Об авторе

Адриан Бесе — полнофункциональный веб-разработчик с обширным опытом электронной коммерции. Ему нравится писать и рассказывать о новейших и лучших технологиях в Интернете… Больше о Adrian ↬

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

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

Пример адаптивного макета страницы.

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

Однако адаптивный веб-дизайн (RWD) не ограничивается макетом страницы — отдельные компоненты пользовательского интерфейса обычно имеют медиа-запросы, которые могут менять свой стиль в зависимости от размеров области просмотра.

Пример компонента адаптивной карточки товара. На левом изображении показан компонент с шириной области просмотра 720 пикселей, а на правом изображении показан макет компонента с шириной области просмотра 568 пикселей. (Большой предварительный просмотр)

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

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

Пример макета страницы с одним и тем же компонентом пользовательского интерфейса карточки продукта в сетке из трех столбцов в верхней части и в списке в нижней части. (Большой предварительный просмотр)

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

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

 . карточка продукта {
    /* Стиль карты по умолчанию */
}
.product-card--узкий {
   /* Изменение стиля для узкого окна просмотра и контейнеров */
}
Экран @media и (минимальная ширина: 569 пикселей) {
 .product-card--wide {
     /* Изменение стиля для более широкой области просмотра и контейнеров */
  }
} 

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

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

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

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

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

См. ручку [карточки продуктов: различные контейнеры] (https://codepen.io/smashingmag/pen/eYvWVxz) Адриана Бесе.

См. Карточки продуктов Pen: Различные контейнеры от Adrian Bece.

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

• Стили запроса контейнера применяются в зависимости от размеров самого целевого элемента. Компоненты пользовательского интерфейса смогут адаптироваться к любому заданному контексту или контейнеру.
• Разработчикам не нужно будет искать значение измерения области просмотра «магическое число», которое связывает медиа-запрос области просмотра с целевым измерением компонента пользовательского интерфейса в определенном контейнере или определенном контексте.
• Нет необходимости добавлять дополнительные классы CSS или медиа-запросы для различных контекстов и вариантов использования.

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

— «Контейнерные запросы: еще раз к взлому», Мэт Маркиз

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

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

Контейнерные запросы — это экспериментальная функция, доступная в настоящее время в версии Chrome Canary на момент написания этой статьи. Если вы хотите следовать и запускать примеры CodePen в этой статье, вам нужно включить контейнерные запросы в следующем URL-адресе настроек.

 chrome://flags/#enable-container-queries 

(Большой предварительный просмотр)

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

Больше после прыжка! Продолжить чтение ниже ↓

Работа с контейнерными запросами

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

Containment Property

Свойство CSS contains было добавлено в большинство современных браузеров и на момент написания этой статьи поддерживается 75% браузеров. Свойство содержит в основном используется для оптимизации производительности, подсказывая браузеру, какие части (поддеревья) страницы можно рассматривать как независимые и не повлияют на изменения в других элементах дерева. Таким образом, если изменение произойдет в одном элементе, браузер повторно отобразит только эту часть (поддерево), а не всю страницу. С содержат значения свойств, мы можем указать, какие типы сдерживания мы хотим использовать — layout , size или paint .

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

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

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

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

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

 <раздел>
  <статья>
      <дел>
          
      

 .card {
   содержат: стиль макета встроенного размера;
}
.card__wrapper {
  отображение: сетка;
  зазор сетки: 1,5 em;
  строки-шаблона-сетки: авто-авто;
  /* ... */
} 

 @контейнер (минимальная ширина: 568 пикселей) {
  . card__wrapper {
    выравнивание элементов: по центру;
    зазор сетки: 1,5 em;
    строки шаблона сетки: авто;
    сетка-шаблон-столбцы: 150px авто;
  }
  .card__image {
    минимальная ширина: авто;
    высота: авто;
  }
} 

 /* Проверяем, поддерживается ли значение встроенного размера */
@supports (содержат: встроенный размер) {
  .открытка {
    содержат: стиль макета встроенного размера;
  }
}
/* Если значение встроенного размера не поддерживается, используйте откат медиа-запроса */
@supports not (содержат: встроенный размер) {
    @media (минимальная ширина: 568 пикселей) {
       /* ... */
  }
}
/* Браузер игнорирует @container, если он не поддерживается */
@контейнер (минимальная ширина: 568 пикселей) {
  /* Стили контейнерных запросов */
}