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

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

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

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

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

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

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

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

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

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

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

body { background-color: #0EAD69; } @media screen and (max-width: 1600px) { body { background-color: #3BCEAC; } } @media screen and (max-width: 1280px) { body { background-color: #FFD23F; } } @media screen and (max-width: 960px) { body { background-color: #EE4266; } } @media screen and (max-width: 600px) { body { background-color: #540D6E; } }

Ориентация

Orientation — это полезная медиа-функция, которая позволяет вносить изменения в зависимости от ориентации экрана. Может иметь два значения: portrait и landscape.

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

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

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

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

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

hover и pointer

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

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

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

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

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

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

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

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

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

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

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

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

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

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

inverted-colors

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

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

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

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

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

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

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

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

prefers-color-scheme

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

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

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

light: применять стили, если пользователь предпочитает светлую тему;

dark: применять стили, если пользователь предпочитает темную тему;

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

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

.appbar { background-color: #EE4266; } .fab { background-color: #424242; } @media screen and (prefers-color-scheme: dark) { body { background-color: #424242; } .appbar { background-color: #212121; } h3 { color: #fff; } .fab { background-color: #EE4266; } }

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

prefers-reduced-motion

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

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

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

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

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

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

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

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

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

Заключение

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

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

Примеры кода

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

Автор: Francesco Baldan

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

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

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

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

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

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

Медиавыражения в CSS — это не только max-width / Хабр

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

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

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

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

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

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

Размер вьюпорт

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

Поскольку функции 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; /* Красный фон */
  }
}

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

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

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

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

/* Красный фон применяется только, если ориентация экрана альбомная */
body {
  background-color: #FFD23F; /* Желтый фон */
}
 
@media screen and (orientation: landscape) {
  body {
    background-color: #EE4266; /* Красный фон */
  }
}

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

Эта функция также может иметь префикс 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.

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

Правило @media | CSS справочник

Определение и применение

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

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

CSS синтаксис:

@media not | only media type and (media function) { ...код CSS }

Давайте детально разберем из чего состоит синтаксис этого правила.

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

Вы можете комбинировать медиазапросы с использованием логических операторов:

Устройства (media type)

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

Мультимедийные функции (media function)

width против device-width / Блог компании PAYSTO / Хабр

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

Свойство среды «ширина» (width) описывает ширину отображаемой поверхности устройства вывода (например, ширину окна документа или ширину окна страницы на принтере)

А вот так MDN определяют «ширину устройства»:

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

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

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

Большинство планшетов и мобильных устройств не всегда имеют 1 пиксель устройства на 1 пиксель CSS. Например, вам стоит знать, что у iPhone 4 стандартная область обзора экрана составляет 640×960. Это означает, что на данном примере device-width iPhone4 равна 320×480. Дело в том, что Apple понимают, что не каждый сайт создан отзывчивым и пытается сделать хорошо всем, предоставив ширину около 980px для отображения десктопного варианта сайта. Это значит, что если нет метатега области обзора, iPhone4 берет сайт и отображает его, как если бы он был 980px в ширину, при этом втискивая его в экран шириной 320px, в результате чего с точки зрения пользователя сайт будет отображаться уменьшенным.

Начинаем

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

<meta name="viewport" content="width=device-width,initial-scale=1">

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

Например, давайте возьмем iPhone 4, у которого стандартная ширина области просмотра 980px. Без тега meta ваши попытки использовать медиазапросы не приведут ни к чему, и устройство будет неправильно обращаться к стандартной области просмотра. Большинство медиазапросов рассчитано на 500px или меньше. Это обычно выполняется с помощью простого медиазапроса max-width. Без тега meta вы не получите эффекта от этого запроса, так как iPhone 4 будет продолжать отображать версию сайта шириной 980px. Давайте рассмотрим приведенный ниже пример:

body {
  background: white;    
}
 
@media screen and (min-width: 980px) /* Desktop */ {
  body {
    background: red;
  }
}
 
@media screen  and (max-width: 979px) /* Tablet */ {
  body {
    background: blue;
  }
}
 
@media screen and (max-width: 500px) /* Mobile */ {
  body {
    background: green;
  }
}

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

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

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

Почему следует выбирать device-width?

Честно говоря, заголовок этой статьи изначально подразумевает неиспользование device-width. Однако для device-width есть свое место. Если вы делаете сайт для определенных устройств, тогда да – вам следует использовать device-width.

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

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

Однако давайте посмотрим на другой возможный вариант

Что насчет “width”?

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

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

Все что вам нужно для полностью отзывчивой страницы – это гибкий сайт и немного продуманных медиазапросов для таргетирования на стандартный ряд мобильных устройств, планшетов, компьютеров + области просмотра. Я предпочитаю использовать Foundation’s Media Queries, которые являются наиболее точными и охватывают все необходимые области просмотра.

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

Для тестирования я использую расширение для Chrome Responsive Web Design Tester. Оно позволяет выбирать определенное устройство. Вы увидите размер устройства и то, как ваша страница будет отображаться на таком устройстве.

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

В заключение

Вы все еще планируете использовать device-width в медиазапросах? Приведенные аргументы оказались недостаточно убедительными? Использование обычной «ширины» и области просмотра устройства упрощает отзывчивый дизайн и в конечном итоге является лучшим вариантом, который следует использовать практически всегда.

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

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

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

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

Следующие типы являются корректными, но устаревшими и не дают никакого результата (табл. 2).

Логические операторы, применяемые в медиа-запросах

and

Логическое И. Указывается для объединения нескольких условий.

Пример. Стиль для всех цветных устройств

@media all and (color) { ... }

not

Логическое НЕ. Указывается для отрицания условия.

Пример. Стиль для всех устройств кроме принтера

@media all and (not print) { ... }

Оператор not оценивается в запросе последним, поэтому выражение

@media not all and (color) { ... }

следует понимать как

@media not (all and (color)) { ... }

а не

@media (not all) and (color) { ... }

only

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

Пример. Стиль для новых браузеров

@media only all and (not print) { ... }

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

Пример. Стиль для устройств с альбомной ориентацией или минимальной шириной 480 пикселей.

@media all and (orientation: landscape), all and (min-width: 480px) { ... }

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

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

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

Большинство функций содержат приставку min- и max-, которая соответствуют минимальному и максимальному значению. Так, max-width: 400px означает, что ширина окна браузера меньше 400 пикселей, а min-width: 1000px, наоборот, сообщает, что ширина окна больше 1000 пикселей.

aspect-ratio (min-aspect-ratio, max-aspect-ratio)

Тип носителя: print, screen
Значение: целое число/целое число

Определяет соотношение ширины и высоты отображаемой области устройства. Значение указывается в виде двух целых чисел разделяемых между собой слэшем (/).

color (min-color, max-color)

Тип носителя: print, screen
Значение: целое число

Определяет число бит на канал цвета. К примеру, значение 3 означает, что красный, зелёный и синий канал могут отображать 2³ цветов каждый, что в общем составляет 512 цветов (8×8×8). Если значение не указано, тогда проверяется что устройство цветное.

@media screen and (color) { /* Для цветных экранов */
  body { background: #fc0; }
}
@media screen and (min-color:3) { /* Минимум 512 цветов */
  body { background: #ccc; }
}

color-index (min-color-index, max-color-index)

Тип носителя: print, screen
Значение: целое число

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

@media all and (min-color-index: 256) {
 ...
}

device-aspect-ratio (min-device-aspect-ratio, max-device-aspect-ratio)

Тип носителя: print, screen
Значение: целое число/целое число

Определяет соотношение сторон экрана устройства. Значение указывается в виде двух целых чисел разделяемых между собой слэшем (/). В примере ниже показано, как установить стиль для экранов с соотношением сторон 16:9 и более.

@media screen and (min-device-aspect-ratio: 16/9) {
 ...
}

device-height (min-device-height, max-device-height)

Тип носителя: print, screen
Значение: размер

Определяет всю доступную высоту экрана устройства или печатной страницы.

device-width (min-device-width, max-device-width)

Тип носителя: print, screen
Значение: размер

Определяет всю доступную ширину экрана устройства или печатной страницы. В примере ниже в зависимости от разрешения монитора устанавливается ширина слоя. Так, для значения 1280 пикселей ширина макета задаётся как 1100px.

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Ширина макета</title>
  <style>
   div {
    padding: 10px;
    background: #e8bfad;
    margin: auto;
   }
   @media screen and (min-device-width: 1600px) {
    div {width: 1500px;}
   }
   @media screen and (device-width: 1280px) {
    div {width: 1100px;}
   }
   @media screen and (device-width: 1024px) {
    div {width: 980px;}
   }
  </style>
 </head>
 <body>
  <div>
   Диабаз, формируя аномальные геохимические ряды, сменяет известняк, 
   образуя на границе с Западно-Карельским поднятием своеобразную систему грабенов.
  </div>
 </body>
</html>

grid

Тип носителя: print, screen
Значение: нет

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

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

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Стиль для бабушкофона</title>
  <style>
   @media screen and (grid) and (max-width: 15em) {
     body { font-size: 2em; }
   }
  </style>
 </head>
 <body>
  <p>Привет! Как дела? Как сажа бела?</p>
 </body>
</html>

height (min-height, max-height)

Тип носителя: print, screen
Значение: размер

Высота отображаемой области.

monochrome (min-monochrome, max-monochrome)

Тип носителя: print, screen
Значение: целое число

Определяет, что устройство монохромное. Если указано число, то оно обозначает число бит на пиксель. Так, значение 8 равнозначно 256 оттенкам серого (или другого цвета). В данном примере показан стиль для монохромного и цветного принтера.

@media print and (monochrome) { 
 body { font-family: Times, 'Times New Roman', serif; }
h2, h3, p { color: black; }
}
@media print and (color) { 
 body { font-family: Arial, Verdana, sans-serif; }
h2, h3, p { color: #556b2f; }
}

orientation

Тип носителя: print, screen
Значение: landscape | portrait

Определяет, что устройство находится в альбомном режиме (ширина больше высоты) или портретном (ширина меньше высоты).

В данном примере устанавливается разная фоновая картинка в случае альбомной (landscape) или портретной ориентации (portrait).

@media screen and (orientation: landscape) { 
  #logo { background: url(logo1.png) no-repeat; }
}
@media screen and (orientation: portrait) { 
  #logo { background: url(logo2.png) no-repeat; }
}

resolution (min-resolution, max-resolution)

Тип носителя: print, screen
Значение: разрешение в dpi (точек на дюйм) или dpcm (точек на сантиметр)

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

@media print and (min-resolution: 300dpi) { 
 ...
}

scan

Тип носителя: tv
Значение: interlace | progressive

Определяет тип развертки телевизора — череcстрочная (interlace) или прогрессивная (progressive). При чересстрочной развёртке телевизор вначале показывает нечётные строки кадра, затем чётные, что позволяет сократить передаваемые данные. В прогрессивной развёртке кадр передаётся и показывается целиком.

width (min-width, max-width)

Тип носителя: print, screen
Значение: размер

Описывает ширину отображаемой области. Это может быть окно браузера или печатная страница. В данном примере при уменьшении окна до 600 пикселей и меньше меняется цвет фона веб-страницы.

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Ширина страницы</title>
  <style>
   body { background: #f0f0f0; }
   @media screen and (max-width: 600px) {
     body { background: #fc0; }
   }
  </style>
 </head>
 <body>
  <p>Пока магма остается в камере, мусковит сингонально поднимает шток, 
  в то время как значения максимумов изменяются в широких пределах. </p>
 </body>
</html>

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

Каждая спецификация проходит несколько стадий одобрения.

• Recommendation (Рекомендация) — спецификация одобрена W3C и рекомендована как стандарт.
• Candidate Recommendation (Возможная рекомендация) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
• Proposed Recommendation (Предлагаемая рекомендация) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
• Working Draft (Рабочий проект) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
• Editor’s draft (Редакторский черновик) — черновая версия стандарта после внесения правок редакторами проекта.
• Draft (Черновик спецификации) — первая черновая версия стандарта.

Браузеры

В таблице браузеров применяются следующие обозначения.

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

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

Автор и редакторы

Автор: Влад Мержевич

Последнее изменение: 02.03.2020

Редакторы: Влад Мержевич

Основы адаптивного дизайна / Песочница / Хабр

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

Что такое адаптивный дизайн?

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

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

Теория (основы)

Думаю, всем известно, что все шаблоны (их стиль) построен на CSS. И адаптивный дизайн — не исключение. Наиболее важное изменение — изменение единиц измерения. Представим, ширину блока 400 пикселей, а значит, что ее надо указывать в процентах (например, 40%).

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

Тоже очень важная часть в дизайне.Например, ширина нашего сайта 1000 пикселей, но при изменении окна (по ширине, меньше 1000 пикселей) появится горизонтальная прокрутка. Но все поменяется, если мы укажем width: 100%, потому что сайт будет «подстраиваться» под наш экран.

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

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

Было

  width: 1000px;
  

Стало

  ширина: 100%;
максимальная ширина: 1000 пикселей;
  

min-width и width

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

Практика

Шаблон, который будет выступать в качестве демонострации, будет иметь в себе три составляющих: шапка, основной контент и боковая колонка (сайтбар).

• Шапка — #headerInner
• Основной контент — #colLeft
• Боковая колонка — #colRight

Проверить адаптивность шаблона можно с помощью масштабирования окна (см. Скриншот).

HTML

  








  

      Логотип 
  



   

       

          

              

                    
 Основной контент 
 
                   
 Здесь находится основной контент страницы 
              
          
 
          
          

              

                    
 Текст сайтабара 
 
                   
 Содержимое сайтбара 
              
          
 
       
 
   
 
  

  

CSS

  * {
 маржа: 0;
 отступ: 0;
}
 
body {
 ширина: 100%;
 высота: 100%;
 цвет: # 333;
 фон: url (images / body.png) 0px 0px повтор;
 семейство шрифтов: «Segoe UI», «HelveticaNeue-Light», «Helvetica Neue Light», «Helvetica Neue», Helvetica, Arial, sans-serif;
 размер шрифта: 0.94em;
 высота строки: 135%;
}
 
h2 {
 размер шрифта: 30 пикселей;
 шрифт: нормальный;
 отступ: 0px 0 0px;
 высота строки: 100%;
 стиль шрифта: курсив;
}
 
a {
 цвет: # cd5252;
 текстовое оформление: нет;
}
 
a: hover {
 цвет: # 963c3c;
 текстовое оформление: нет;
}
 
/ * -------------------------------
 Структура
 ---------------------------------- * /
 
/ * -------------------------------
 Ширина сайта в 1000px
 ---------------------------------- * /
 
#wrapper {
 маржа сверху: 40 пикселей;
 граница: 0px solid # 000;
 ширина: 100%;
 максимальная ширина: 1000 пикселей;
 маржа: 0 авто;
 высота: авто! важно;
}
 
/ * -------------------------------
 Шапка сайта
 ---------------------------------- * /
 
#headerInner {
 граница: 0px solid # 000;
 фон: # d04942;
 положение: относительное;
 ширина: 100%;
 максимальная ширина: 1000 пикселей;
 высота: 100 пикселей;
 маржа: 0 авто;
 маржа сверху: 0 пикселей;
}
 
.text {
 маржа: 15 пикселей;
 
}
 
/ * -------------------------------
 Главный контент
 ---------------------------------- * /
 
#content #colLeft {
 
граница: 0px solid # 000;
 плыть налево;
 ширина: 67%;
 маржа справа: 0 пикселей;
 фон: # 85c9cf;
}
 
/ * -------------------------------
 Сайтбар сайта
 ---------------------------------- * /
 
#content #colRight {
 положение: относительное;
 маржа слева: 30 пикселей;
 плыть налево;
 ширина: 30%;
 граница: 0px solid # 1FA2E1;
 фон: # 7a9e0e;
}
 
#middle: after {
 содержание: '.';
 дисплей: блок;
 ясно: оба;
 видимость: скрыта;
 высота: 0;
}
 
/ * ----------------------------
 Логотип
 ------------------------------ * /
 
.logo {
 позиция: абсолютная;
 слева: 0px;
 верх: 40 пикселей;
}
 
.logo a {
 маржа слева: 30 пикселей;
 размер шрифта: 30 пикселей;
 цвет: # 96b551;
}
  

Как вы заметили, ширина шаблона 1000 пикселей. В шаблоне используется ширина и максимальная ширина: о них написано выше.

У шапки ширина все таже — 1000 пикселей . У основного контента (#colLeft) ширина 67% , а у правой колонки — 30% . Отступ между ними 30 пикселей (3%) .

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

Стоит отметить, что в media screen задается нужное разрешение экрана устройства.Их очень много, можно указывать даже свои, но самые популярные: 320px, 480px, 600px, 768px, 1024px. В моем примере используется два разрешения: 768px и 1024px.

Таким образом выглядит тег media screen в CSS

  @media screen and (min-width: 200px) and (max-width: 1024px) {
}
  

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

1024 пикселя

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

Вот, что необходимо прописать в CSS

  @media screen and (min-width: 100px) and (max-width: 1024px) {
/ * размер блока, где находятся главный контент и сайтбар * /
body #wrapper {
 маржа сверху: 40 пикселей;
 ширина: 90%;
 маржа: 0 авто;
}

/ * размер шапки сайта * /

body #headerInner {
 ширина: 90%;
 маржа: 0 авто;
}
 
/ * размер главного контента * /

#wrapper #content #colLeft {
 ширина: 67%;
}
 
/ * размер сайтабара * /
 
#wrapper #content #colRight {
 маржа слева: 3%;
 ширина: 30%;
}

} / * скобка, закрывающая тег @media screen
  

Шапка сайта (#headerInner) имеет новый размер в 90% .Стоит отметить, что для шапки мы не используем max-width, потому что он здесь не нужен. #wrapper — блок, в котором находится основной контент и сайтбар, его ширина тоже 90% . Ширина и сайтбара, и основной контент остается неизменным, изменился лишь отступ у сайтбара ( 3% ). Это используется для того, чтобы при уменьшении окна сайтбар не «падал» вниз.

768px

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

  @media screen and (min-width: 100px) and (max-width: 768px) {
 #wrapper #colLeft {
  float: нет;
  ширина: 100%;
  маржа справа: 0 пикселей;
 }

 #wrapper #colRight {
  маржа слева: 0 пикселей;
  маржа сверху: 25 пикселей;
  float: нет;
  ширина: 100%;
 }
}
  

Для блока основного контента (#colLeft) мы указали ширину 100% , чтобы блок растянулся на весь экран. Также мы убрали выравнивание по левому краю, указав float: none, чтобы сайтбар (#colRight) «уплыл» под основной блок контента.

Для сайтабара ширина та же, выравнивание по правому боку (float: right;) мы убрали. Ко всему этому, мы добавили отступ (верхнее поле: 25px;), чтобы эти два блока разделялись.

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

  img {
 максимальная ширина: 100%;
 высота: авто;
 ширина: авто \ 9; / * для ie8 * /
}
  

.

Выбираем медиа-запросов: min-width или max-width

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

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

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

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

 .content {
  ширина: 60%;
}

.связанные с {
  ширина: 40%;
}

@media screen и (max-width: 37.4em) {
  .content,
  .связанные с {
    ширина: 100%;
  }
} 

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

 @media screen and (min-width: 37.5em) {
  .content {
    ширина: 60%;
  }

  .связанные с {
    ширина: 40%;
  }
} 

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

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

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

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

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

 @media only screen and (max-width: 30em) {
  .big-table tr,
  .big-table td {
    дисплей: блок;
  }
} 

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

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

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

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

телеграм канал. Подпишись, будет полезно!

.

Примеры различных медиа-запросов CSS включают max-width и min-width

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

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

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

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

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

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

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

Узнать подробнее

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

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

9000 Настроить префиксы

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

body { цвет фона: # FFD23F; / * Желтый * / } @media screen и (min-height: 320px) { body { цвет фона: # EE4266; / * Красный * / } }

body { background-color: # FFD23F; / * Желтый * / } @media screen и (min-height: 320px) { body { background-color: # EE4266; / * Красный * / } }

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

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

body { цвет фона: # FFD23F; / * Желтый * / } @media screen и (min-width: 320px) и (max-width: 600px) { body { цвет фона: # EE4266; / * Красный * / } }

body { background-color: # FFD23F; / * Желтый * / } @media screen и (min-width: 320px) и (max-width: 600px) { body { background-color: # EE4266; / * Красный * / } }

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

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

body { цвет фона: # 0EAD69; } @media screen и (max-width: 1600px) { body { цвет фона: # 3BCEAC; } } @media screen и (max-width: 1280 пикселей) { body { цвет фона: # FFD23F; } } @media screen и (max-width: 960px) { body { цвет фона: # EE4266; } } @media screen и (max-width: 600px) { body { цвет фона: # 540D6E; } }

1 2 3 4 5 6 7 8 9 10 11 13 140003 16 17 18 19 20 21 22 23 24 25 26 27

цвет фона корпуса # } @media screen и (max-width: 1600px) { body { background-color: # 3BCEAC; } } @media screen и (max-width: 1280 пикселей) { body { background-color: # FFD23F; } } @media screen и (max-width: 960px) { body { background-color: # EE4266; } } @media screen и (max-width: 600px) { body { background-color: # 540D6E; } }

Ориентация

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

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

body { цвет фона: # FFD23F; / * Желтый * / } @media screen и (ориентация: альбомная) { body { цвет фона: # EE4266; / * Красный * / } }

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

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

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

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

наведение и указатель

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Узнать подробнее

инвертированные цвета

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

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

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

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

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

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

.text { размер шрифта: 24 пикселя; } @media screen и (инвертированные цвета: инвертированные) { .text { размер шрифта: 36 пикселей; } }

.text { font-size: 24px; } @media screen и (инвертированные цвета: инвертированные) { .text { font-size: 36px; } }

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

prefers-color-scheme

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

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

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

light: применять стили, если пользователь предпочитает светлую тему;

dark: применять стили, если пользователь предпочитает темную тему;

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

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

.appbar { цвет фона: # EE4266; } .fab { цвет фона: # 424242; } @media screen и (prefers-color-scheme: dark) { body { цвет фона: # 424242; } .appbar { цвет фона: # 212121; } h3 { цвет: #fff; } .fab { цвет фона: # EE4266; } }

1 2 3 4 5 6 7 8 9 10 11 13 140003 16 17 18 19 20 21 22 23 24 25 26 27

.панель приложений { background-color: # EE4266; } .fab { background-color: # 424242; } @media screen and (prefers-color-scheme: dark) { body { background-color: # 424242; } .appbar { background-color: # 212121; } h3 { цвет: #fff; } .fab { background-color: # EE4266; } }

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

предпочитает уменьшенное движение

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

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

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

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

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

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

.пульс { анимация: пульс 2 с бесконечный; } @media screen и (предпочитает-уменьшенное-движение: уменьшить) { .пульс { анимация: нет; } }

.pulse { анимация: импульс 2 с бесконечный; } @media screen и (предпочитает-уменьшенное-движение: уменьшить) { .pulse { анимация: нет; } }

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

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

Заключение

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

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

Примеры кода

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

Автор: Франческо Балдан

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

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

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

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

Узнать подробнее

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

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

Смотреть.

Медиавыражения в CSS — это не только max-width / Хабр

Недавно мы опубликовали новый веб-сайт нашей компании Mabiloft с полностью переработанным дизайном и множеством новых великолепных иллюстраций и анимаций.

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

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

---

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

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

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

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

Размер вьюпорт

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

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

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

  / * Красный применится, только если высота вьюпорт больше 320 пикселей * /
body {
  цвет фона: # FFD23F; / * Желтый фон * /
}
 
@media screen и (min-height: 320px) {
  body {
    цвет фона: # EE4266; / * Красный фон * /
  }
}
  

  / * Красный фон применится, если ширина области видимости от 320 до 600 пикселей * /
body {
  цвет фона: # FFD23F; / * Желтый фон * /
}
 
@media screen и (min-width: 320px) и (max-width: 600px) {
  body {
    цвет фона: # EE4266; / * Красный фон * /
  }
}
  

Следующий пример демонстрирует, как можно использовать функцию max-width для изменения цвета фона в зависимости от ширины области видимости body { цвет фона: # 0EAD69; } @media screen и (max-width: 1600px) { body { цвет фона: # 3BCEAC; } } @media screen и (max-width: 1280 пикселей) { body { цвет фона: # FFD23F; } } @media screen и (max-width: 960px) { body { цвет фона: # EE4266; } } @media screen и (max-width: 600px) { body { цвет фона: # 540D6E; } }

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

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

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

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

  / * Красный фон следующий метод ориентации экрана альбомная * /
body {
  цвет фона: # FFD23F; / * Желтый фон * /
}
 
@media screen и (ориентация: альбомная) {
  body {
    цвет фона: # EE4266; / * Красный фон * /
  }
}
  

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

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

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

Наведение и указатель

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

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

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

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

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

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

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

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

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

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

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

Вот они!

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

Инвертированные цвета

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

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

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

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

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

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

 .text {
  размер шрифта: 24 пикселя;
}
 
@media screen и (инвертированные цвета: инвертированные) {
  .text {
    размер шрифта: 36 пикселей;
  }
}
  

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

Предпочитаемая цветовая схема

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

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

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

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

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

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

 .appbar {
  цвет фона: # EE4266;
}
 
.fab {
  цвет фона: # 424242;
}
 
@media screen и (prefers-color-scheme: dark) {
  body {
    цвет фона: # 424242;
  }
 
  .appbar {
    цвет фона: # 212121;
  }
 
  h3 {
    цвет: #fff;
  }
 
  .fab {
    цвет фона: # EE4266;
  }
}
  

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

Сокращение количества анимации

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

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

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

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

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

  .pulse {
  анимация: пульс 2 с бесконечный;
}
 
@media screen и (предпочитает-уменьшенное-движение: уменьшить) {
  .пульс {
    анимация: нет;
  }
}
  

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

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

Заключение

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

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

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

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

.

No related posts.