Css написание медиа запросов: CSS медиа-запросы (media queries) — ИТ Шеф

Медиа запросы в CSS — шпаргалка основных media queries

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

Я оставлю шпаргалку основных медиа запросов (media queries), которые использую на практике сам. Понятное дело, что абсолютно все устройства эти запросы не покроют. При необходимости пишите свои media queries, проставляя нужные контрольные точки. Существует уже определённая статистика, согласно которой есть ряд особо популярных разрешений мониторов, на которые стоит ориентироваться в первую очередь. Вот такая статистика за 2020 год:

Должен быть подключен мета тег viewport:

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

Шпаргалка Media queries CSS

/* Smartphones (вертикальная и горизонтальная ориентация) ----------- */
@media only screen and (min-width : 320px) and (max-width : 480px) {
/* стили */
}

/* Smartphones (горизонтальная) ----------- */
@media only screen and (min-width: 321px) {
/* стили */
}

/* Smartphones (вертикальная) ----------- */
@media only screen and (max-width: 320px) {
/* стили */
}

/* iPads (вертикальная и горизонтальная) ----------- */
@media only screen and (min-width: 768px) and (max-width: 1024px) {
/* стили */
}

/* iPads (горизонтальная) ----------- */
@media only screen and (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
/* стили */
}

/* iPads (вертикальная) ----------- */
@media only screen and (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
/* стили */
}

/* iPad 3**********/
@media only screen and (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 2) {
/* стили */
}
@media only screen and (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 2) {
/* стили */
}

/* Настольные компьютеры и ноутбуки ----------- */
@media only screen  and (min-width: 1224px) {
/* стили */
}

/* Большие экраны ----------- */
@media only screen  and (min-width: 1824px) {
/* стили */
}

/* iPhone 4 ----------- */
@media only screen and (min-width: 320px) and (max-width: 480px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 2) {
/* стили */
}
@media only screen and (min-width: 320px) and (max-width: 480px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 2) {
/* стили */
}

/* iPhone 5 ----------- */
@media only screen and (min-width: 320px) and (max-height: 568px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2){
/* стили */
}
@media only screen and (min-width: 320px) and (max-height: 568px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2){
/* стили */
}

/* iPhone 6 ----------- */
@media only screen and (min-width: 375px) and (max-height: 667px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2){
/* стили */
}
@media only screen and (min-width: 375px) and (max-height: 667px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2){
/* стили */
}

/* iPhone 6+ ----------- */
@media only screen and (min-width: 414px) and (max-height: 736px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2){
/* стили */
}
@media only screen and (min-width: 414px) and (max-height: 736px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2){
/* стили */
}

/* Samsung Galaxy S3 ----------- */
@media only screen and (min-width: 320px) and (max-height: 640px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2){
/* стили */
}
@media only screen and (min-width: 320px) and (max-height: 640px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2){
/* стили */
}

/* Samsung Galaxy S4 ----------- */
@media only screen and (min-width: 320px) and (max-height: 640px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 3){
/* стили */
}
@media only screen and (min-width: 320px) and (max-height: 640px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 3){
/* стили */
}

/* Samsung Galaxy S5 ----------- */
@media only screen and (min-width: 360px) and (max-height: 640px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 3){
/* стили */
}
@media only screen and (min-width: 360px) and (max-height: 640px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 3){
/* стили */
}

Сервисы по проверке сайта на адаптивность:

• http://adaptivator. ru
• http://iloveadaptive.com
• Google PageSpeed

Лучшие практики (S)CSS, о которых вы еще не знали

Хочешь знать больше про веб?

Подпишись на наш телеграм-канал TechRocks WEB-разработка?

Подписаться

×

Даже если вы сейчас строите свои приложения используя популярные фреймворки, такие как React, Angular или Vue.js, вам все равно нужно добавить к ним какие-нибудь стили. Способ написания стилей зависит от используемой вами технологии. Например, в случае с React, из-за его компонентной природы, лучше писать стили используя CSS-модули. Если вы хотите использовать совершенно новые функции CSS, будет мудро остановить свой выбор на CSSNext. Не забудьте о старых добрых CSS-препроцессорах, таких как Saass или LESS. Возможно, вы думаете: “Так много инструментов. Поручусь, что у них разное написание стилей”. Да, вы правы. Но основа одна и та же.

В этой статье я хочу представить несколько отличных рекомендаций для написания понятного и обслуживаемого CSS, причем неважно, являетесь ли вы поклонником CSS-модулей или Sass/LESS. Данные рекомендации представлены в синтаксисе SCSS, так что стоит немного познакомиться с Sass. Если вы используете простой CSS, расширенный с помощью CSS Next, вам также пригодится эта статья. Приведенные базовые концепции с легкостью могут быть использованы с другими инструментами CSS или препроцессорами.

Структурируйте ваши стили

Хорошо продуманная структура папок поможет с обслуживанием вашего проекта. То же самое касается и ваших стилей. Это важно, разделять ваш код в зависимости от элементов, которые к нему относятся. Сохранение всех ваших директив в одном огромном файле styles.scss наверняка приведет к проблемам. Особенно если вы хотите масштабировать свой проект и добавлять новые компоненты.

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

Ниже приведен пример структуры папки:

├── /base
│  ├── _core.scss
│  ├── _colors.scss
│  ├── _settings.scss
│  └── _typography.scss
├── /utils
│  ├── _animations.scss
│  ├── _easings.scss
│  ├── _grid.scss
│  └── _misc.scss
├── /components
│  ├── _header.scss
│  ├── _footer.scss
│  ├── _button.scss
│  └── _sidebar.scss
└── main.scss

И main.scss:

// *** Vendor ***
@import 'sanitize.css';

// *** Settings ***
@import './base/settings';
@import './base/colors';

// *** Utils ***
@import './utils/easings';
@import './utils/animations';
@import '. /utils/grid';
@import './utils/ui';

// *** Base ***
@import './base/core';
@import './base/typography';

// *** Components ***
@import './components/header';
@import './components/footer';
@import './components/button';
@import './components/sidebar';

Давайте названия цветам

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

В Sass вы можете сохранять любое значение в качестве переменной, так что будет разумным сохранять код цвета как переменную. Главным образом мы используем HEX (hexadecimals, шестнадцатеричную систему) для определения значения цвета. Для людей HEX выглядит как шифр, потому что этот формат разрабатывался для компьютеров. Тяжело сказать, какой цвет записан как #7fffd4 или #ffd700 (если вы их понимаете, возможно, вы бы не прошли CAPTCHA-тест). Первый это «аквамарин», а второй — золотой. Не проще ли будет именовать их таким образом?

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

Для начала дайте цветам названия. Перевести код HEX в читабельное название непросто. К счастью, у нас есть для этого подходящие инструменты. Я использую сайт Name that Color, но вы можете пользоваться каким пожелаете.

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

Вот пример установок цвета:

// Names
$white: #fff;
$black: #000;

$aquamarine: #7fffd4;
$alabaster: #f9f9f9;
$alto: #d9d9d9;
$mine-shaft: #333;

// Roles
$primary: $white;
$secondary: $alabaster;
$accent: $aquamarine;

$text: $mine-shaft;
$border: $alto;

Упрощайте вложенные объявления

Использование препроцессора CSS не только добавляет некоторые полезные функции к вашему набору инструментов, но также помогает в организации кода. Лучшим примером является вложенность объявлений стилей. В Sass можно вкладывать селектор в другие селекторы, так что вы можете видеть, какие отношения существуют между ними. Это действительно мощная функция, и ею легко злоупотребить.

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

Посмотрите на этот пример:

// Bad
.article {
  .title {
    color: $accent;
  }
  
  .text {
    color: $text;
    
    .img {
      width: 100%;
    }
    
    @media only screen and (min-width: 720px) {
      .text {
        .img {
          width: 300px;
          height: auto;
          margin: 0 auto;
        }
      }
    }
  }
}

// Good
.article {
  .title {
    color: $accent;
  }
  
  . text .img {
    width: 100%;
  }
}

@media only screen and (min-width: 720px) {
  .article {
    .text .img {
      width: 300px;
      height: auto;
      margin: 0 auto;
    }
  }
}

Не переусердствуйте с родительскими ссылками

В Sass можно делать отсылки к селектору родителя. В комбинации со вложенностью, вы можете определить правила для родительского селектора. Например:

.link {
  &:hover {
    color: $accent;
  }
  
  &::after {
    display: inline-block;
    content: '\0362';
    vertical-align: middle;
  }
}

Иногда использование & может вводить в заблуждение. Вот пример плохого использования этого селектора:

.text {
  // compiles to .article .text
  .article & {
    color: $text;
  }
  
  // compiles to .text + .text
  & + & {
    margin-top: 15px;
  }
}

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

Записывайте свойства в правильном порядке

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

• Контейнер (позиция, отображение, ширина, отступы и т. д.)
• Текст
• Фон
• Граница
• Другие (по алфавиту).

// Before
.action-button {
  height: 30px;
  z-index: 3;
  background-color: $accent;
  position: fixed;
  width: 30px;
  color: $white;
  bottom: 15px;
  right: 15px;
}

// After
.action-button {
  position: fixed;
  right: 15px;
  bottom: 15px;
  z-index: 3;
  width: 30px;
  height: 30px;
  color: $white;
  background-color: $accent;
}

Используйте соглашение по названиям классов

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

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

Пример:

// Bad
.menu {
  li {
    display: inline-block;
    padding: 0 20px;
    border-bottom: 1px solid $accent;
  }
  
  ul li {
    padding: 0 10px;
    border-bottom: 0; // Unnecessary border reset
  }
}

// Good
.menu-item {
  display: inline-block;
  padding: 0 20px;
  border-bottom: 1px solid $accent;
}

. nested-menu-item {
  padding: 0 10px;
}

Написание обслуживаемых селекторов не так сложно, если мы используем одно из популярных соглашений по именованию классов: BEM, OOCSS или SMACSS. Я предпочитаю BEM, очень популярную методологию, созданную разработчиками Яндекса. Это название является сокращением слов «контейнер», «модификатор» и «элемент» (block, modifier, element). Если вы не знакомы с BEM, я советую почитать документацию.

Вот наш пример после «бемификации»:

.menu {
  &__item { // it compiles to .menu__item
    display: inline-block;
    padding: 0 20px;
    border-bottom: 1px solid $accent;
  }
}

.submenu {
  &__item {
    padding: 0 10px;
  }
}

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

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

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

// target devices with min width of 768px (possibly tablets) and with wide screen
@media only screen and (min-width: 768px) and (max-device-aspect-ratio: 9 / 16) {
  body {
    font-size: 20px;
  }
}

Чтобы сделать медиа-запросы более дружественными к разработчику, мы можем назначить эти правила переменным. В Sass можно использовать строку как обычный CSS-код при помощи вставки фигурных скобок #{}.

$medium: 768px;
$screen-medium-wide: 'only screen and (min-width: #{$medium}) and (max-device-aspect-ratio: 9 / 16)';

@media #{$screen-medium-wide} {
  body {
    font-size: 20px;
  }
}

Тот же фокус можно использовать для других правил со знаком @ (at-rules). Это может быть удобно для определения комплексных правил @supports.

Добавляйте модульные стили

CSS имеет набор очень полезных селекторов. В большинстве случаев вы используете селектор класса или селектор потомка. Но есть другой селектор, эффективный при написании модульных стилей. Это селектор «ближайшего соседа» (adjacent sibling selector), известный также как селектор плюс.

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

.article {
  &__title {
    color: $accent;
  }
  
  // Applies margin only, when .article__title is present
  &__title + &__text {
    margin-top: 15px;
  }
  
  &__text {
    color: $text;
  }
}

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

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

***
Подписывайтесь на наш канал в Telegram

Как использовать медиазапросы в CSS для адаптивного дизайна?

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

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

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

Новичок в селекторах CSS? Ознакомьтесь с этой шпаргалкой Ultimate CSS Selector, чтобы повысить свою карьеру веб-дизайнера.

СОДЕРЖАНИЕ

• Что такое медиазапросы в CSS?
• Действительно ли нам нужны медиа-запросы в CSS?
• Как вы пишете медиа-запросы в CSS для адаптивного дизайна?
• Правила медиа-функции
• Точки останова и их методы
• Кроссбраузерная совместимость для медиазапросов в CSS
• Часто задаваемые вопросы (FAQ)

Что такое медиа-запросы в CSS

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

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

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

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

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

Проверка совместимости медиазапросов CSS в более чем 3000 браузерных средах. Попробуйте лямбда-тест прямо сейчас!

Действительно ли нам нужны медиа-запросы CSS?

Первое, что может прийти вам в голову: «Действительно ли нам нужны медиа-запросы CSS, учитывая изобилие технологий и спецификаций, которые появляются с каждым днем»? Это подлинный и распространенный вопрос для тех, кто начинает свой путь с медиа-запросов в CSS.

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

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

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

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

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

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

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

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

Как вы пишете медиа-запросы в CSS для адаптивного дизайна?

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

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

Соединитель @media ( )

Например:

Только экран @media и (максимальная ширина: 480 пикселей) { /* применяемые правила CSS /* }

Этот медиа-запрос будет искать экраны («только экран», как написано) с максимальной шириной 480 пикселей. Если он его найдет, условия будут выполнены, и в HTML-код будут внесены изменения.

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

• все
• печать
• экран
• речь

@медиа печать { .заголовок { размер шрифта: 12px } }

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

Правила функций мультимедиа

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

Правила медиа-функций ширины и высоты

Первое правило медиа-функций, которое следует учитывать, — это проверка ширины и высоты окна просмотра. Операции с шириной можно проверить с помощью свойств «width», «max-width» и «min-width» для значений узких мест.

Пример правила медиа-функции максимальной ширины:

Экран @media и (максимальная ширина: 840 пикселей){ п { красный цвет; } }

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

<голова> <мета-кодировка="utf-8"> <стиль> Экран @media и (максимальная ширина: 840 пикселей){ п { красный цвет; } } <тело> <центр>

Проверка правил обработки мультимедиа

Для экрана шириной более 840 пикселей тег «p» будет отображать содержимое черным цветом следующим образом:

Приведенный выше снимок экрана сделан на платформе LambdaTest.

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

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

Используемый выше браузер — Opera на платформе Windows 10. Точно так же вы можете использовать правило высоты и ширины.

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

СКАЧАТЬ LT БРАУЗЕР

Ознакомьтесь с приведенным ниже руководством по началу работы с LT Browser:

Подпишитесь на наш канал LambdaTest на YouTube и будьте в курсе последних руководств по тестированию Selenium, тестированию Cypress E2E, тестированию Playwright и многому другому.

Ориентация в медиа-запросах CSS

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

В качестве следующего примера можно применить правило ориентации носителя:

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

Приведенный выше код применит правила мультимедиа в альбомной ориентации, в то время как книжная ориентация будет работать нормально.

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

Соединители в правилах мультимедиа

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

• и
• или
• не

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

@media (ориентация: альбомная) и (минимальная ширина: 1080 пикселей){ п { красный цвет; размер шрифта: 36px; } }

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

@media (ориентация: альбомная), (минимальная ширина: 1080 пикселей){ п { красный цвет; размер шрифта: 36px; } }

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

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

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

Показанный выше код был представлен на уровне 3 спецификации. На уровне 4 мы получаем немного больше гибкости в определении чисел и интервалов без использования логических операторов, то есть соединителей. Спецификация уровня 4 в правилах обработки мультимедиа вводит в запросы диапазоны. Итак, запрос следующего вида:

(минимальная ширина: 640 пикселей) и (максимальная ширина: 1080 пикселей)

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

(640 пикселей <= ширина <= 1080 пикселей)

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

Вы также можете обратиться к приведенному ниже руководству по проведению адаптивного тестирования на платформе LambdaTest.

Точки останова и их методы

В посте до сих пор показано, как добиться адаптивного веб-дизайна с помощью медиа-запросов в CSS, правил и выражений. Забавно управлять элементами и видеть, как они трансформируются в соответствии с нашими желаниями. Но проблема в том, как решить, в какой момент мы хотим, чтобы эти медиа-правила применялись к элементам? 640px или 1080px или что-то еще? Это число, которое работает как точка отражения, называется точкой останова при выполнении медиа-запросов.

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

Лучший способ анализа точек останова — через адаптивную панель браузера. Отзывчивая панель в браузере позволяет изменять размер окна (или выбирать несколько разрешений), помогая нам быстро и точно определить узкие места.
Чтобы открыть панель в Google Chrome, откройте веб-сайт (как LambdaTest открылся в этой демонстрации).

• Щелкните правой кнопкой мыши и выберите Проверить.
• Щелкните значок, показанный ниже, после открытия панели «Проверка».

Обратите внимание, как меняется разрешение при уменьшении/расширении экрана (верхняя панель). Эта панель поможет разработчикам увидеть точки останова, в которых код выходит за пределы экрана. Затем то же самое можно применить к правилам для СМИ.

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

Будучи разработчиком, оставление вторичного мобильного приложения в списке может раздражать ваших пользователей. Начните свою разработку с мобильных устройств и постепенно двигайтесь вверх по цепочке (или назад во времени). Такой метод всегда гарантирует, что ваши мобильные пользователи будут довольны, а созданный вами веб-сайт будет отзывчивым. Для проверки ваших проектов предпочтительнее использовать браузер для мобильных устройств, такой как LT Browser, поскольку он обеспечивает больше функций, гибкость и масштабируемость.

Кроссбраузерная совместимость для медиазапросов в CSS

Как видно на изображении ниже, кросс-браузерная совместимость для медиа-запросов в CSS действительно . Однако он не поддерживает более старые версии Internet Explorer и Mozilla Firefox.

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

Завершаем!

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

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

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

Часто задаваемые вопросы (FAQ)

Что такое медиа-запрос в CSS?

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

Можно ли использовать медиа-запросы в CSS?

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

Хариш Раджора

Я инженер по информатике. Мне нравится продолжать расти по мере роста технологического мира. Я чувствую, что нет более мощного инструмента, чем компьютер, чтобы хоть как-то изменить мир. Помимо моей специальности, я очень люблю читать книги и иногда пишу на https://www.themeaninglesslife.com.

Посмотреть профиль автора

Медиа-запросы — Learn.co

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

Цели

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

Какова цель медиа-запросов?

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

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

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

 @media (максимальная ширина: 992 пикселя) {
  тело {
    цвет фона: синий;
  }
}
 

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

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

 @media только экран и (макс.  ширина: 992px) {
  тело {
    цвет фона: синий;
  }
}
 

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

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

 @media только экран и (макс. ширина: 992px) {
  тело {
    цвет фона: синий;
  }
}
 

 @media не экран и (максимальная ширина: 992px) {
  тело {
    цвет фона: синий;
  }
}
 

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

 @media [экран|печать|все] и (макс. ширина: 992 пикселя) {
  тело {
    цвет фона: синий;
  }
}
 

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

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

 Экран @media и (минимальная ширина: 992 пикселей) и (максимальная ширина: 1136 пикселей) {
  тело {
    цвет фона: синий;
  }
}
 

 Экран @media и (минимальная ширина: 992 пикселей), (максимальная ширина: 1136 пикселей) {
  тело {
    цвет фона: синий;
  }
}
 

(выражение)

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

 @media (максимальная ширина: 992 пикселя) {
  тело {
    цвет фона: синий;
  }
}
 

Usage

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

 /* исходный стиль */
п {
    красный цвет;
}
/* медиа-запрос */
Только экран @media и (максимальная ширина: 800 пикселей) {
  п {
    цвет: зеленый;
  }
}
 

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

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

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

 /* начальный стиль */
п {
  красный цвет;
}
/* медиа-запрос */
Только экран @media и (минимальная ширина: 400 пикселей) {
  п {
    цвет: зеленый;
  }
}
 

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

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

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

 /* начальный стиль */
п {
  красный цвет;
}
/* медиа-запрос */
Только экран @media и (минимальная ширина: 400 пикселей) и (максимальная ширина: 800 пикселей) {
   п {
     цвет: зеленый;
   }
}
 

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

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

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

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

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

Заключение

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

Ресурсы

• MDN — CSS — Медиа-запросы
• CSS-трюки — Медиа-запросы
• Имитация мобильных устройств в режиме устройства в Google Chrome

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

Понимание медиазапросов CSS — Сообщество разработчиков 👩‍💻👨‍💻

Джаред Ютси | нг-конф | июль 2020 г.

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

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

@media

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

screen

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

Затем мы обычно добавляем запрос к оператору, так что в итоге мы получаем что-то вроде:

@media screen и . ..

Запросы, как и все css, применяются в том порядке, в котором они определены.

Это очень важно понимать, так как мы обычно хотим заниматься разработкой Mobile-First .

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

Почему у нас нет переменных для конкретных устройств? Правила станет невозможно писать и поддерживать. Разрешение устройства резко меняется от одного телефона к другому.

Мы, вероятно, будем использовать два очень распространенных запроса: min-width и max-width .

Значение минимальной ширины и максимальной ширины

Переменные SASS и запросы к целевым диапазонам устройств.

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

Экран @media и (min-width: $sm-min-width) и (max-width: $sm-max-width)

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

 
  
  <голова>
    <стиль>
      /*
       * ПЕРВЫЙ МОБИЛЬНЫЙ!
       * Технически это то же самое, что и этот медиа-запрос:
       * Экран @media и (мин. ширина: 0em)
       * Что означает «ширина больше или равна 0em» или «все».
       */
      тело {
        отступ: 16px;
      }
      .button-контейнер {
        дисплей: гибкий;
        flex-направление: столбец;
        выравнивание элементов: по центру;
      }
      . добавить-кнопка,
      .удалить-кнопка {
        радиус границы: 50%;
        ширина: 64 пикселя;
        высота: 64 пикселя;
        размер шрифта: 48px;
        белый цвет;
        нижняя граница: 16px;
      }
      .добавить-кнопка {
        граница: сплошная 1px темно-зеленая;
        фоновый цвет: лесной;
      }
      .удалить-кнопка {
        граница: сплошная бордовая 1px;
        цвет фона: красный;
      }
      диапазон.текст {
        дисплей: нет;
        поле: 0 16px;
      }
      span.fab {
        отображение: встроенный блок;
        положение: родственник;
        верх: -5px;
      }
      .телефон-портрет,
      .phone-пейзаж,
      .планшет-портрет,
      .таблетка-пейзаж {
        дисплей: гибкий;
        выравнивание содержимого: по центру;
        вес шрифта: полужирный;
        размер шрифта: 24px;
      }
      .phone-портрет {
        размер шрифта: 48px;
      }
      .phone-пейзаж,
      .планшет-портрет,
      .таблетка-пейзаж {
        дисплей: нет;
      }
      /*
       * Альбомная ориентация телефона или больше
       */
      Экран @media и (min-device-width: 35. 5em) {
        /* Эти настройки добавляются к предыдущим или переопределяют их */
        .button-контейнер {
          flex-направление: строка;
          выравнивание содержимого: пробел между;
        }
        .phone-пейзаж {
          дисплей: гибкий;
        }
        .телефон-портрет,
        .планшет-портрет,
        .таблетка-пейзаж {
          дисплей: нет;
        }
      }
      /*
       * Планшет в портретном режиме или больше
       */
      Экран @media и (min-device-width: 48em) {
        .добавить-кнопка,
        .удалить-кнопка {
          радиус границы: 6px;
          ширина: не установлена;
          высота: не установлена;
        }
        span.fab {
          дисплей: нет;
        }
        диапазон.текст {
          отображение: встроенный блок;
        }
      }
      /*
       * ТОЛЬКО портрет для планшета
       * Наследуется от предыдущих запросов.
       * Последующие запросы не будут наследовать эти значения.
       */
      Экран @media и (минимальная ширина устройства: 48em) и (максимальная ширина устройства: 63,9)99эм) {
        . добавить-кнопка,
        .удалить-кнопка {
          радиус границы: 32px;
          ширина границы: 4px;
        }
        .планшет-портрет {
          дисплей: гибкий;
        }
        .телефон-портрет,
        .phone-пейзаж,
        .таблетка-пейзаж {
          дисплей: нет;
        }
      }
      /*
       * Планшет Альбомная или крупнее
       * Отображение как текста, так и значка.
       */
      Экран @media и (min-device-width: 64em) {
        span.fab {
          отображение: встроенный блок;
          поле слева: 16px;
          верх: -3px;
        }
        .таблетка-пейзаж {
          дисплей: гибкий;
        }
        .телефон-портрет,
        .phone-пейзаж,
        .планшет-портрет {
          дисплей: нет;
        }
      }
    
  
  <тело>
    <дел>
      <кнопка>
        +
        Добавить
      
      <кнопка>
        х
        Удалить