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

Учебное пособие по CSS: Медиа-запросы CSS

Учебное пособие по CSS: примеры медиа-запросов CSS

RWD: адаптивный веб-дизайн с медиа-запросами

Учебное пособие по JavaScript: метод window.matchMedia ()

Использование медиа-запросов — CSS: каскадные таблицы стилей

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

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

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

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

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

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

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

  @media screen, print {...}  

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

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

  @media (hover: hover) {...}  

Многие мультимедийные функции — это , диапазон функций , что означает, что они могут иметь префикс «min-» или «max-» для выражения ограничений «минимального условия» или «максимального условия». Например, этот CSS будет применять стили только в том случае, если ширина области просмотра вашего браузера равна или меньше 12450 пикселей:

  @media (max-width: 12450px) {...}  

Если вы создаете запрос мультимедийной функции без указания значения, вложенные стили будут использоваться до тех пор, пока значение функции не равно нулю (или нет на уровне 4). Например, этот CSS будет применяться к любому устройству с цветным экраном:

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

  @media speech and (соотношение сторон: 11/5) {...}  

Дополнительные примеры мультимедийных функций см. На справочной странице для каждой конкретной функции.

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

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

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

Объединение нескольких типов или функций

Ключевое слово и объединяет функцию мультимедиа с типом носителя или другими функциями мультимедиа. В этом примере объединены две мультимедийные функции, чтобы ограничить стили для устройств с альбомной ориентацией и шириной не менее 30 ems:

  @media (min-width: 30em) и (ориентация: альбомная) {...}  

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

  @media screen и (min-width: 30em) и (ориентация: альбомная) {...}  

Тестирование для нескольких запросов

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

  @media (min-height: 680px), экран и (ориентация: книжная) {...}  

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

Инвертирование значения запроса

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

  @media not all and (монохромный) {...}
  

… так что вышеупомянутый запрос оценивается так:

  @media not (all and (монохромный)) {...}
  

… а не так:

  @media (не все) и (монохромный) {...}  

В качестве другого примера приведем следующий медиа-запрос:

  @media not screen and (color), print and (color) {...}
  

… оценивается так:

  @media (not (screen and (color))), print and (color) {...}  

Улучшение совместимости со старыми браузерами

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

  @media only screen and (color) {...}
  

Спецификация Media Queries Level 4 включает некоторые улучшения синтаксиса, чтобы сделать медиа-запросы с использованием функций, которые имеют тип «диапазон», например ширину или высоту, менее подробными.Уровень 4 добавляет контекст диапазона для написания таких запросов. Например, используя функциональность max- для ширины, мы можем написать следующее:

Примечание: Спецификация Media Queries Level 4 имеет разумную поддержку в современных браузерах, но некоторые мультимедийные функции не поддерживаются должным образом. См. Более подробную информацию в таблице совместимости браузеров @media .

  @media (макс. Ширина: 30 мкм) {...}  

В Media Queries Level 4 это можно записать как:

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

Используя min- и max- , мы можем проверить ширину между двумя значениями, например:

  @media (min-width: 30em) и (max-width: 50em) {...}  

Это преобразует синтаксис уровня 4 как:

  @media (30em <= width <= 50em) {...}
  

Media Queries Level 4 также добавляет способы комбинировать медиа-запросы с использованием полной логической алгебры с и , не и или .

Отрицание признака с помощью

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

  @media (not (hover)) {...}  

Тестирование нескольких функций с помощью

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

  @media (not (color)) or (hover) {...}
  

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

Если ты думаешь, что отзывчивость - это просто, мне жаль тебя, сынок. У нас 99 окон просмотра, но у iPhone только одно.
- Джош Брюэр, 10 марта 2010 г.

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

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

Если вы отреагируете на это: , вы никогда не должны основывать точки останова на устройствах !! Вы подметили. У Джастина Эйвери есть хороший пост о возможных подводных камнях при использовании точек останова для конкретных устройств. Выбор точек останова на основе вашего дизайна, а не конкретных устройств - это разумный способ.Но иногда вам просто нужна небольшая помощь, чтобы взять под контроль одну конкретную ситуацию.

Телефоны и карманные компьютеры

  / * ----------- iPhone 4 и 4S ----------- * /

/ * Портрет и пейзаж * /
только экран @media
  и (минимальная ширина устройства: 320 пикселей)
  и (максимальная ширина устройства: 480 пикселей)
  и (-webkit-min-device-pixel-ratio: 2) {

}

/ * Портрет * /
только экран @media
  и (минимальная ширина устройства: 320 пикселей)
  и (максимальная ширина устройства: 480 пикселей)
  и (-webkit-min-device-pixel-ratio: 2)
  и (ориентация: портретная) {
}

/* Пейзаж */
только экран @media
  и (минимальная ширина устройства: 320 пикселей)
  и (максимальная ширина устройства: 480 пикселей)
  и (-webkit-min-device-pixel-ratio: 2)
  и (ориентация: альбомная) {

}

/ * ----------- iPhone 5, 5S, 5C и 5SE ----------- * /

/ * Портрет и пейзаж * /
только экран @media
  и (минимальная ширина устройства: 320 пикселей)
  и (максимальная ширина устройства: 568 пикселей)
  и (-webkit-min-device-pixel-ratio: 2) {

}

/ * Портрет * /
только экран @media
  и (минимальная ширина устройства: 320 пикселей)
  и (максимальная ширина устройства: 568 пикселей)
  и (-webkit-min-device-pixel-ratio: 2)
  и (ориентация: портретная) {
}

/* Пейзаж */
только экран @media
  и (минимальная ширина устройства: 320 пикселей)
  и (максимальная ширина устройства: 568 пикселей)
  и (-webkit-min-device-pixel-ratio: 2)
  и (ориентация: альбомная) {

}

/ * ----------- iPhone 6, 6S, 7 и 8 ----------- * /

/ * Портрет и пейзаж * /
только экран @media
  и (минимальная ширина устройства: 375 пикселей)
  и (максимальная ширина устройства: 667 пикселей)
  и (-webkit-min-device-pixel-ratio: 2) {

}

/ * Портрет * /
только экран @media
  и (минимальная ширина устройства: 375 пикселей)
  и (максимальная ширина устройства: 667 пикселей)
  и (-webkit-min-device-pixel-ratio: 2)
  и (ориентация: портретная) {

}

/* Пейзаж */
только экран @media
  и (минимальная ширина устройства: 375 пикселей)
  и (максимальная ширина устройства: 667 пикселей)
  и (-webkit-min-device-pixel-ratio: 2)
  и (ориентация: альбомная) {

}

/ * ----------- iPhone 6+, 7+ и 8+ ----------- * /

/ * Портрет и пейзаж * /
только экран @media
  и (минимальная ширина устройства: 414 пикселей)
  и (максимальная ширина устройства: 736 пикселей)
  и (-webkit-min-device-pixel-ratio: 3) {

}

/ * Портрет * /
только экран @media
  и (минимальная ширина устройства: 414 пикселей)
  и (максимальная ширина устройства: 736 пикселей)
  и (-webkit-min-device-pixel-ratio: 3)
  и (ориентация: портретная) {

}

/* Пейзаж */
только экран @media
  и (минимальная ширина устройства: 414 пикселей)
  и (максимальная ширина устройства: 736 пикселей)
  и (-webkit-min-device-pixel-ratio: 3)
  и (ориентация: альбомная) {

}

/ * ----------- iPhone X ----------- * /

/ * Портрет и пейзаж * /
только экран @media
  и (минимальная ширина устройства: 375 пикселей)
  и (максимальная ширина устройства: 812 пикселей)
  и (-webkit-min-device-pixel-ratio: 3) {

}

/ * Портрет * /
только экран @media
  и (минимальная ширина устройства: 375 пикселей)
  и (максимальная ширина устройства: 812 пикселей)
  и (-webkit-min-device-pixel-ratio: 3)
  и (ориентация: портретная) {

}

/* Пейзаж */
только экран @media
  и (минимальная ширина устройства: 375 пикселей)
  и (максимальная ширина устройства: 812 пикселей)
  и (-webkit-min-device-pixel-ratio: 3)
  и (ориентация: альбомная) {

}  

  / * ----------- Galaxy S3 ----------- * /

/ * Портрет и пейзаж * /
@media экран
  и (ширина устройства: 360 пикселей)
  и (высота устройства: 640 пикселей)
  и (-webkit-device-pixel-ratio: 2) {

}

/ * Портрет * /
@media экран
  и (ширина устройства: 320 пикселей)
  и (высота устройства: 640 пикселей)
  и (-webkit-device-pixel-ratio: 2)
  и (ориентация: портретная) {

}

/* Пейзаж */
@media экран
  и (ширина устройства: 320 пикселей)
  и (высота устройства: 640 пикселей)
  и (-webkit-device-pixel-ratio: 2)
  и (ориентация: альбомная) {

}

/ * ----------- Galaxy S4, S5 и Примечание 3 ----------- * /

/ * Портрет и пейзаж * /
@media экран
  и (ширина устройства: 320 пикселей)
  и (высота устройства: 640 пикселей)
  и (-webkit-device-pixel-ratio: 3) {

}

/ * Портрет * /
@media экран
  и (ширина устройства: 320 пикселей)
  и (высота устройства: 640 пикселей)
  и (-webkit-device-pixel-ratio: 3)
  и (ориентация: портретная) {

}

/* Пейзаж */
@media экран
  и (ширина устройства: 320 пикселей)
  и (высота устройства: 640 пикселей)
  и (-webkit-device-pixel-ratio: 3)
  и (ориентация: альбомная) {

}

/ * ----------- Galaxy S6 ----------- * /

/ * Портрет и пейзаж * /
@media экран
  и (ширина устройства: 360 пикселей)
  и (высота устройства: 640 пикселей)
  и (-webkit-device-pixel-ratio: 4) {

}

/ * Портрет * /
@media экран
  и (ширина устройства: 360 пикселей)
  и (высота устройства: 640 пикселей)
  и (-webkit-device-pixel-ratio: 4)
  и (ориентация: портретная) {

}

/* Пейзаж */
@media экран
  и (ширина устройства: 360 пикселей)
  и (высота устройства: 640 пикселей)
  и (-webkit-device-pixel-ratio: 4)
  и (ориентация: альбомная) {

}  

  / * ----------- HTC One ----------- * /

/ * Портрет и пейзаж * /
@media экран
  и (ширина устройства: 360 пикселей)
  и (высота устройства: 640 пикселей)
  и (-webkit-device-pixel-ratio: 3) {

}

/ * Портрет * /
@media экран
  и (ширина устройства: 360 пикселей)
  и (высота устройства: 640 пикселей)
  и (-webkit-device-pixel-ratio: 3)
  и (ориентация: портретная) {

}

/* Пейзаж */
@media экран
  и (ширина устройства: 360 пикселей)
  и (высота устройства: 640 пикселей)
  и (-webkit-device-pixel-ratio: 3)
  и (ориентация: альбомная) {

}  

  / * ----------- Google Pixel ----------- * /

/ * Портрет и пейзаж * /
@media экран
  и (ширина устройства: 360 пикселей)
  и (высота устройства: 640 пикселей)
  и (-webkit-device-pixel-ratio: 3) {

}

/ * Портрет * /
@media экран
  и (ширина устройства: 360 пикселей)
  и (высота устройства: 640 пикселей)
  и (-webkit-device-pixel-ratio: 3)
  и (ориентация: портретная) {

}

/* Пейзаж */
@media экран
  и (ширина устройства: 360 пикселей)
  и (высота устройства: 640 пикселей)
  и (-webkit-device-pixel-ratio: 3)
  и (ориентация: альбомная) {

}

/ * ----------- Google Pixel XL ----------- * /

/ * Портрет и пейзаж * /
@media экран
  и (ширина устройства: 360 пикселей)
  и (высота устройства: 640 пикселей)
  и (-webkit-device-pixel-ratio: 4) {

}

/ * Портрет * /
@media экран
  и (ширина устройства: 360 пикселей)
  и (высота устройства: 640 пикселей)
  и (-webkit-device-pixel-ratio: 4)
  и (ориентация: портретная) {

}

/* Пейзаж */
@media экран
  и (ширина устройства: 360 пикселей)
  и (высота устройства: 640 пикселей)
  и (-webkit-device-pixel-ratio: 4)
  и (ориентация: альбомная) {

}  

  / * ----------- Nexus 4 ----------- * /

/ * Портрет и пейзаж * /
@media экран
  и (ширина устройства: 384 пикселей)
  и (высота устройства: 592 пикселей)
  и (-webkit-device-pixel-ratio: 2) {

}

/ * Портрет * /
@media экран
  и (ширина устройства: 384 пикселей)
  и (высота устройства: 592 пикселей)
  и (-webkit-device-pixel-ratio: 2)
  и (ориентация: портретная) {

}

/* Пейзаж */
@media экран
  и (ширина устройства: 384 пикселей)
  и (высота устройства: 592 пикселей)
  и (-webkit-device-pixel-ratio: 2)
  и (ориентация: альбомная) {

}

/* ----------- Нексус 5 ----------- */

/ * Портрет и пейзаж * /
@media экран
  и (ширина устройства: 360 пикселей)
  и (высота устройства: 592 пикселей)
  и (-webkit-device-pixel-ratio: 3) {

}

/ * Портрет * /
@media экран
  и (ширина устройства: 360 пикселей)
  и (высота устройства: 592 пикселей)
  и (-webkit-device-pixel-ratio: 3)
  и (ориентация: портретная) {

}

/* Пейзаж */
@media экран
  и (ширина устройства: 360 пикселей)
  и (высота устройства: 592 пикселей)
  и (-webkit-device-pixel-ratio: 3)
  и (ориентация: альбомная) {

}

/ * ----------- Nexus 6 и 6P ----------- * /

/ * Портрет и пейзаж * /
@media экран
  и (ширина устройства: 360 пикселей)
  и (высота устройства: 592 пикселей)
  и (-webkit-device-pixel-ratio: 4) {

}

/ * Портрет * /
@media экран
  и (ширина устройства: 360 пикселей)
  и (высота устройства: 592 пикселей)
  и (-webkit-device-pixel-ratio: 4)
  и (ориентация: портретная) {

}

/* Пейзаж */
@media экран
  и (ширина устройства: 360 пикселей)
  и (высота устройства: 592 пикселей)
  и (-webkit-device-pixel-ratio: 4)
  и (ориентация: альбомная) {

}  

  / * ----------- Windows Phone ----------- * /

/ * Портрет и пейзаж * /
@media экран
  и (ширина устройства: 480 пикселей)
  and (device-height: 800px) {

}

/ * Портрет * /
@media экран
  и (ширина устройства: 480 пикселей)
  и (высота устройства: 800 пикселей)
  и (ориентация: портретная) {

}

/* Пейзаж */
@media экран
  и (ширина устройства: 480 пикселей)
  и (высота устройства: 800 пикселей)
  и (ориентация: альбомная) {

}  

Ноутбуки

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

  / * ----------- Экраны без Retina ----------- * /
@media экран
  и (минимальная ширина устройства: 1200 пикселей)
  и (максимальная ширина устройства: 1600 пикселей)
  и (-webkit-min-device-pixel-ratio: 1) {
}

/ * ----------- Экраны Retina ----------- * /
@media экран
  и (минимальная ширина устройства: 1200 пикселей)
  и (максимальная ширина устройства: 1600 пикселей)
  и (-webkit-min-device-pixel-ratio: 2)
  и (минимальное разрешение: 192 точек на дюйм) {
}  

Таблетки

  / * ----------- iPad 1, 2, Mini и Air ----------- * /

/ * Портрет и пейзаж * /
только экран @media
  и (минимальная ширина устройства: 768 пикселей)
  и (максимальная ширина устройства: 1024 пикселей)
  и (-webkit-min-device-pixel-ratio: 1) {

}

/ * Портрет * /
только экран @media
  и (минимальная ширина устройства: 768 пикселей)
  и (максимальная ширина устройства: 1024 пикселей)
  и (ориентация: портретная)
  и (-webkit-min-device-pixel-ratio: 1) {

}

/* Пейзаж */
только экран @media
  и (минимальная ширина устройства: 768 пикселей)
  и (максимальная ширина устройства: 1024 пикселей)
  и (ориентация: альбомная)
  и (-webkit-min-device-pixel-ratio: 1) {

}

/ * ----------- iPad 3, 4 и Pro 9.7 дюймов ----------- * /

/ * Портрет и пейзаж * /
только экран @media
  и (минимальная ширина устройства: 768 пикселей)
  и (максимальная ширина устройства: 1024 пикселей)
  и (-webkit-min-device-pixel-ratio: 2) {

}

/ * Портрет * /
только экран @media
  и (минимальная ширина устройства: 768 пикселей)
  и (максимальная ширина устройства: 1024 пикселей)
  и (ориентация: портретная)
  и (-webkit-min-device-pixel-ratio: 2) {

}

/* Пейзаж */
только экран @media
  и (минимальная ширина устройства: 768 пикселей)
  и (максимальная ширина устройства: 1024 пикселей)
  и (ориентация: альбомная)
  и (-webkit-min-device-pixel-ratio: 2) {

}

/ * ----------- iPad Pro 10.5 "----------- * /

/ * Портрет и пейзаж * /
только экран @media
  и (минимальная ширина устройства: 834 пикселей)
  и (максимальная ширина устройства: 1112 пикселей)
  и (-webkit-min-device-pixel-ratio: 2) {

}

/ * Портрет * /
/ * Объявляем одно и то же значение для минимальной и максимальной ширины, чтобы избежать столкновения с рабочими столами * /
/ * Источник: https://medium.com/connect-the-dots/css-media-queries-for-ipad-pro-8cad10e17106*/
только экран @media
  и (минимальная ширина устройства: 834 пикселей)
  и (максимальная ширина устройства: 834 пикселей)
  и (ориентация: портретная)
  и (-webkit-min-device-pixel-ratio: 2) {

}

/* Пейзаж */
/ * Объявляем одно и то же значение для минимальной и максимальной ширины, чтобы избежать столкновения с рабочими столами * /
/ * Источник: https: // medium.com / connect-the-dots / css-media-query-for-ipad-pro-8cad10e17106 * /
только экран @media
  и (минимальная ширина устройства: 1112 пикселей)
  и (максимальная ширина устройства: 1112 пикселей)
  и (ориентация: альбомная)
  и (-webkit-min-device-pixel-ratio: 2) {

}

/ * ----------- iPad Pro 12.9 "----------- * /

/ * Портрет и пейзаж * /
только экран @media
  и (минимальная ширина устройства: 1024 пикселей)
  и (максимальная ширина устройства: 1366 пикселей)
  и (-webkit-min-device-pixel-ratio: 2) {

}

/ * Портрет * /
/ * Объявляем одно и то же значение для минимальной и максимальной ширины, чтобы избежать столкновения с рабочими столами * /
/ * Источник: https: // medium.com / connect-the-dots / css-media-query-for-ipad-pro-8cad10e17106 * /
только экран @media
  и (минимальная ширина устройства: 1024 пикселей)
  и (максимальная ширина устройства: 1024 пикселей)
  и (ориентация: портретная)
  и (-webkit-min-device-pixel-ratio: 2) {

}

/* Пейзаж */
/ * Объявляем одно и то же значение для минимальной и максимальной ширины, чтобы избежать столкновения с рабочими столами * /
/ * Источник: https://medium.com/connect-the-dots/css-media-queries-for-ipad-pro-8cad10e17106*/
только экран @media
  и (минимальная ширина устройства: 1366 пикселей)
  и (максимальная ширина устройства: 1366 пикселей)
  и (ориентация: альбомная)
  и (-webkit-min-device-pixel-ratio: 2) {

}  

  / * ----------- Galaxy Tab 2 ----------- * /

/ * Портрет и пейзаж * /
@СМИ
  (минимальная ширина устройства: 800 пикселей)
  and (max-device-width: 1280 пикселей) {

}

/ * Портрет * /
@СМИ
  (максимальная ширина устройства: 800 пикселей)
  и (ориентация: портретная) {

}

/* Пейзаж */
@СМИ
  (максимальная ширина устройства: 1280 пикселей)
  и (ориентация: альбомная) {

}

/ * ----------- Galaxy Tab S ----------- * /

/ * Портрет и пейзаж * /
@СМИ
  (минимальная ширина устройства: 800 пикселей)
  и (максимальная ширина устройства: 1280 пикселей)
  и (-webkit-min-device-pixel-ratio: 2) {

}

/ * Портрет * /
@СМИ
  (максимальная ширина устройства: 800 пикселей)
  и (ориентация: портретная)
  и (-webkit-min-device-pixel-ratio: 2) {

}

/* Пейзаж */
@СМИ
  (максимальная ширина устройства: 1280 пикселей)
  и (ориентация: альбомная)
  и (-webkit-min-device-pixel-ratio: 2) {

}  

  / * ----------- Nexus 7 ----------- * /

/ * Портрет и пейзаж * /
@media экран
  и (ширина устройства: 601 пикселей)
  и (высота устройства: 906 пикселей)
  и (-webkit-min-device-pixel-ratio: 1.331)
  и (-webkit-max-device-pixel-ratio: 1.332) {

}

/ * Портрет * /
@media экран
  и (ширина устройства: 601 пикселей)
  и (высота устройства: 906 пикселей)
  и (-webkit-min-device-pixel-ratio: 1.331)
  и (-webkit-max-device-pixel-ratio: 1.332)
  и (ориентация: портретная) {

}

/* Пейзаж */
@media экран
  и (ширина устройства: 601 пикселей)
  и (высота устройства: 906 пикселей)
  и (-webkit-min-device-pixel-ratio: 1.331)
  и (-webkit-max-device-pixel-ratio: 1.332)
  и (ориентация: альбомная) {

}

/ * ----------- Nexus 9 ----------- * /

/ * Портрет и пейзаж * /
@media экран
  и (ширина устройства: 1536 пикселей)
  и (высота устройства: 2048 пикселей)
  и (-webkit-min-device-pixel-ratio: 1.331)
  и (-webkit-max-device-pixel-ratio: 1.332) {

}

/ * Портрет * /
@media экран
  и (ширина устройства: 1536 пикселей)
  и (высота устройства: 2048 пикселей)
  и (-webkit-min-device-pixel-ratio: 1.331)
  и (-webkit-max-device-pixel-ratio: 1.332)
  и (ориентация: портретная) {

}

/* Пейзаж */
@media экран
  и (ширина устройства: 1536 пикселей)
  и (высота устройства: 2048 пикселей)
  и (-webkit-min-device-pixel-ratio: 1.331)
  и (-webkit-max-device-pixel-ratio: 1.332)
  и (ориентация: альбомная) {

}  

  / * ----------- Kindle Fire HD 7 "----------- * /

/ * Портрет и пейзаж * /
только экран @media
  и (минимальная ширина устройства: 800 пикселей)
  и (максимальная ширина устройства: 1280 пикселей)
  и (-webkit-min-device-pixel-ratio: 1.5) {

}

/ * Портрет * /
только экран @media
  и (минимальная ширина устройства: 800 пикселей)
  и (максимальная ширина устройства: 1280 пикселей)
  и (-webkit-min-device-pixel-ratio: 1.5)
  и (ориентация: портретная) {
}

/* Пейзаж */
только экран @media
  и (минимальная ширина устройства: 800 пикселей)
  и (максимальная ширина устройства: 1280 пикселей)
  и (-webkit-min-device-pixel-ratio: 1.5)
  и (ориентация: альбомная) {

}

/ * ----------- Kindle Fire HD 8.9 "----------- * /

/ * Портрет и пейзаж * /
только экран @media
  и (минимальная ширина устройства: 1200 пикселей)
  и (максимальная ширина устройства: 1600 пикселей)
  и (-webkit-min-device-pixel-ratio: 1.5) {

}

/ * Портрет * /
только экран @media
  и (минимальная ширина устройства: 1200 пикселей)
  и (максимальная ширина устройства: 1600 пикселей)
  и (-webkit-min-device-pixel-ratio: 1.5)
  и (ориентация: портретная) {
}

/* Пейзаж */
только экран @media
  и (минимальная ширина устройства: 1200 пикселей)
  и (максимальная ширина устройства: 1600 пикселей)
  и (-webkit-min-device-pixel-ratio: 1.5)
  и (ориентация: альбомная) {

}  

Платформа приложений

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

Носимые устройства

  / * ----------- Часы Moto 360 ----------- * /
@СМИ
  (максимальная ширина устройства: 218 пикселей)
  and (max-device-height: 281px) {

}  

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

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

Синтаксис медиа-запроса CSS для вызова внешней таблицы стилей выглядит следующим образом:

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

  @media screen {
  тело {
    ширина: 75%;
  }
}

@media print {
  тело {
    ширина: 100%;
  }
}  

Точно так же вы можете использовать более сложные медиа-запросы CSS, например:

  @media all and (max-width: 699px) and (min-width: 520px), (min-width: 1151px) {
  тело {
    фон: #ccc;
  }
}  

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

Пример

Допустим, у нас есть дизайн с плавной шириной, в котором боковая панель составляет 35% ширины страницы. Это означает, что в зависимости от ширины окна браузера эта боковая панель может быть довольно узкой или довольно широкой, что является характерной чертой дизайна с изменяемой шириной.С помощью медиа-запросов CSS мы можем сказать: «Если браузер действительно узкий, сделайте это, если он шире, сделайте это, если он действительно широкий, сделайте это». Обратите внимание, что измерение ширины - это не единственное, что могут делать медиа-запросы, это просто практический пример.

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

  

   
  Крис Койер  
   
  Элизабет Мосс  
   
  Аманда Ригетти  
  

Это просто список ссылок.Атрибут href представляет собой ссылку mailto: . Единственное, что может показаться вам необычным, - это атрибут data-email . В HTML5 вы можете использовать атрибуты с префиксом data- для хранения информации, и это совершенно верно. Мы собираемся использовать эти данные позже, но значение href - это не совсем то, что нам нужно, имея ссылку mailto: , следовательно, атрибут данных.

Стиль по умолчанию для списка будет следующим:

  #sidebar ul li a {
  цвет: # 900;
  текстовое оформление: нет;
  отступ: 3px 0;
  дисплей: блок;
}  

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

  @media all and (max-width: 699px) and (min-width: 520px) {
  #sidebar ul li a {
    отступ слева: 21px;
    фон: url (../ images / email.png) левый центр без повтора;
  }
}  

По мере того, как мы становимся шире, с 700 до 1000 пикселей, мы снова будем использовать дополнительное пространство, чтобы добавить перед ссылками текст «Электронная почта:» (с использованием содержимого CSS) вместо просто значка.

  @media all and (max-width: 1000px) and (min-width: 700px) {
  #sidebar ul li a: before {
    содержание: «Электронная почта:»;
    стиль шрифта: курсив;
    цвет: # 666;
  }
}  

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

  @media all and (min-width: 1001px) {
  #sidebar ul li a: after {
    content: "(" attr (data-email) ")";
    размер шрифта: 11 пикселей;
    стиль шрифта: курсив;
    цвет: # 666;
  }
}  

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

  @media all and (max-width: 699px) and (min-width: 520px), (min-width: 1151px) {
  #sidebar ul li a {
    отступ слева: 21px;
    фон: url (../ images / email.png) левый центр без повтора;
  }
}  

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

  #sidebar ul li a {
  цвет: # 900;
  текстовое оформление: нет;
  отступ: 3px 0;
  дисплей: блок;
}

@media all and (min-width: 1001px) {
  #sidebar ul li a: after {
    content: "(" attr (data-email) ")";
    размер шрифта: 11 пикселей;
    стиль шрифта: курсив;
    цвет: # 666;
  }
}

@media all and (max-width: 1000px) и (min-width: 700px) {
  #sidebar ul li a: before {
    содержание: «Электронная почта:»;
    стиль шрифта: курсив;
    цвет: # 666;
  }
}

@media all and (max-width: 699px) и (min-width: 520px), (min-width: 1151px) {
  #sidebar ul li a {
    отступ слева: 21px;
    фон: url (../images/email.png) левый центр без повтора;
  }
}  

Видео-демонстрация

Live demo / скачать

Посмотреть демоверсию Скачать файлы

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

Браузер поддерживает медиа-запросы на удивление достойно. Что касается запросов в этой конкретной демонстрации (с использованием минимальной и максимальной ширины), текущая версия Firefox, Safari (включая Mobile), Chrome и Opera все это поддерживают.Internet Explorer 9 будет поддерживать его, а 8 и ниже - нет. Если бы я хотел обеспечить наилучшие возможности в IE 8 и ниже, я бы либо подделал его с помощью JavaScript, как в этой статье, либо использовал специальную таблицу стилей IE и стилизовал ее в том же стиле, что и наиболее распространенная ширина браузера в соответствии с в аналитику.

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

Подробнее о медиа-запросах

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

Типы

HTML4 были эти типы мультимедиа, которые все еще действительны: слуховой, шрифт Брайля, портативный, печать, проекция, экран, tty и tv. HTML5 может включать больше, если они ему нужны. В спецификацию включены «3D-очки», что потрясающе. Ключевое слово all будет нацелено на все типы.

  @ экран мультимедиа, проекция {...}  

Размеры

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

Также есть ширина устройства и высота устройства, которые также предоставляют минимальную ширину устройства, максимальную ширину устройства, минимальную высоту устройства и максимальную высоту устройства.

  @media (min-device-width: 640px) {...}  

Соотношение ориентация / формат

Можно запросить соотношение сторон экрана, а также соотношение сторон устройства.

  @media screen и (соотношение сторон устройства: 16/9) {...}  

Или если экран находится в портретном (высота больше ширины) или альбомном (ширина больше высоты) режиме.

  @media (ориентация: книжная) {...}  

Цвет

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

  @media (color) {/ * Цветной экран * /}

@media (min-color-index: 256) {/ * На экране не менее 256 цветов * /}

@media (монохромный) {/ * Экран монохромный * /}  

В другом месте

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

• Энди Кларк показывает, как чем больше длина строки, тем более читабельным может быть текст при более высокой высоте строки.
• Сайт Джона Хика перестраивается, чтобы иметь двойные боковые панели, одинарную боковую панель или отсутствие боковой панели в зависимости от доступного места. Он даже прекрасно масштабируется до мобильных размеров.
• Демонстрация Итана Маркотта для A List Apart не использует медиа-запросы, но показывает другие способы, которыми может быть эффективно гибкий дизайн.
• Сайт Саймона Коллисона изменяет свою сетку для соответствия разным размерам браузера.
• Panic использует @media в своих электронных письмах HTML, чтобы они отлично смотрелись в почтовых клиентах для настольных компьютеров или мобильных устройств.

Мин. Ширина, максимальная ширина и запросы мультимедиа | by Banuri Wickramarathna

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

Синтаксис

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

}

Media types

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

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

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

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

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

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

Min-width:

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

Max-width:

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

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

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

AND Оператор:

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

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

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

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

Оператор NOT:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Взгляните:

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

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

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

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

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

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

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

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

  

  
    
    
  
  
    

      

         
 Первое окно 
 
        

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

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

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

  

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

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

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

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

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

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

Заключение

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