Media css для мобильных устройств: Адаптивный и мобильный дизайн с CSS3 Media Queries / Habr – Какие css media запросы прописать для мобильных устройств? — Хабр Q&A

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

У меня есть 2 CSS файлов, 1 для мобильных устройств и 1 для компьютеров, ноутбуков.. Увидеть ниже: http://www.townhouseistanbul.com/skin/kevintimmer/css/tablet.css…

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

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

Я использую запрос экрана media в своем css, но проблема в том, что он не отрисовывается для мобильных устройств. Он делает рендеринг для размеров экрана компьютера, но когда речь заходит о…

Я пытаюсь оптимизировать свою веб-страницу для мобильных устройств 720*1200: Моя страница Он отлично работает на устройствах 320*480 и 480*800, но не на 720*1200. Загрузка страницы увеличена, так…

Я использую специальный css для мобильных устройств, но установите max-device-width на 480 пикселей (я не знаю, является ли это стандартным размером или нет). однако, когда мой экран находится в…

Я создаю новый веб-сайт. Мое намерение-создать одну страницу для настольных и мобильных устройств и установить стили в зависимости от устройства (мобильного или настольного). Я знаю, что могу…

У меня есть прокладка для тела (рабочего стола), но мне нужно изменить ее, чтобы она соответствовала мобильным телефонам это и есть тело css: .column{ float:left; width:50%; max-height:376px;…

Использование CSS-медиазапросов для создания динамичных веб-сайтов

Единый дизайн для экранов всех размеров

Джефф Бэйл
Опубликовано 26.06.2013

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

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

Предварительные условия

Примеры программного кода в этой статье предназначены для исполнения в веб-браузерах, которые поддерживают технологию CSS media queries, в том числе в браузерах Mozilla Firefox, Apple Safari, Google Chrome и Opera. В разделе Ресурсы приведена ссылка на полный список браузеров для ПК и мобильных устройств, поддерживающих технологию CSS3 media queries.

Динамичный дизайн

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

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

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

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

Листинг 1. Использование медиатипов

<link rel="stylesheet" type="text/css" href="site.css" media="screen" />
<link rel="stylesheet" type="text/css" href="print.css" media="print" />

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

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

Медиазапросы, введенные в спецификации CSS3 (CSS version 3), расширяют функции медиатипов и допускают применение в таблицах стилей более точных правил отображения.

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

Листинг 2. Правило медиазапроса

@media all and (min-width: 800px) { ... }

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

• @media all— медиатип, который в данном случае диктует применение данного CSS-кода ко всем медиатипам.
• (min-width:800px)— выражение, содержащее медиазапрос, который дает указание браузеру применять следующий CSS-код только в том случае, если минимальная ширина экрана этого браузера составляет 800 пикселей.

Обратите внимание, что в листинге 2 ключевые слова all и and могут быть пропущены. Если медиазапрос применяется ко всем медиатипам, то слово all может быть пропущено. Завершающее слово and также является необязательным. После переписывания этого медиазапроса с использованием краткого синтаксиса он будет выглядеть следующим образом (см. листинг 3).

Листинг 3. Краткий синтаксис

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

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

Листинг 4. Сложное выражение

@media (min-width:800px) and (max-width:1200px) { ... }

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

Листинг 5. Использование ключевого слова and

@media (min-width:800px) and (max-width:1200px) and (orientation:portrait) { ... }

Медиазапрос в листинге 5 активируется только в том случае, если минимальная ширина составляет 800 пикселей, максимальная ширина составляет 1200 пикселей, а ориентация является портретной (обычно ориентация имеет смысл только для смартфонов и планшетов, которые несложно повернуть из портретного режима в альбомный и наоборот). Если какое-либо из этих условий будет иметь значение False, то данное правило медиазапроса не будет применено.

Антонимом ключевого слова and является ключевое слово or (или). Подобно слову and, оно группирует условия в сложное выраже. Выражение с ключевым словом or, разделяющим два условия, будет иметь значение True, если хотя бы одно из этих условий имеет значение True (см. листинг 6).

Листинг 6. Ключевое слово or

@media (min-width:800px) or (orientation:portrait) { ... }

Данное правило будет применено в том случае, если ширина будет не менее 800 пикселей или если ориентация будет портретной.

Еще одним полезным ключевым словом медиазапросов в вашем арсенале является слово not. Будучи помещенным в начало медиазапроса, слово not инвертирует результат. Другими словами, если без ключевого слова not какой-либо запрос имел значение True, то теперь он будет иметь значение False. Соответствующий пример показан в листинге 7.

Листинг 7. Использование ключевого слова not

@media (not min-width:800px) { ... }

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

Имеется несколько медиафункций, в том числе width, color и grid, которые можно использовать в медиазапросах. В данной статье не описываются все возможные медиафункции. Полный список этих функций содержится в документации организации World Wide Web Consortium (W3C) по медиазапросам (см. раздел Ресурсы).

Для проектирования динамичных веб-сайтов достаточно знать лишь несколько медиафункций: orientation (ориентация), width (ширина) и height (высота). Orientation – это простая медиафункция, которая может иметь значение portrait или landscape. Эти значения соответствуют положению телефона или планшета в руке пользователя, что позволяет разработчику оптимизировать контент для обоих вышеуказанных формфакторов. Считается, что экран находится в портретном режиме, если высота превышает длину, и в альбомном режиме, если ширина больше высоты. В листинге 8 показан пример использования функции orientation.

Листинг 8. Медиазапрос с функцией orientation

@media (orientation:portrait) { ... }

Функции height и width ведут себя аналогично; обе допускают использование префиксов min- и max-. В листинге 9 показан правильно построенный медиазапрос с использованием этих функций.

Листинг 9. Медиазапрос с функциями height и width

@media (min-width:800px) and (min-height:400px) { ... }

Медиафункции width и height можно использовать без префикса min- или max- (см. листинг 10).

Листинг 10. Медиафункции без префиксов min- и max-

@media (width:800px) and (height:400px) { ... }

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

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

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

Медиазапрос для смартфона в альбомном режиме: @media (min-width: 321px) { ... }

Медиазапрос для смартфона в портретном режиме: @media (max-width: 320px) { ... }

Медиазапрос для Apple iPad в альбомном режиме: @media (orientation: landscape) { ... }

Медиазапрос для iPad в альбомном режиме: @media (orientation: portrait) { ... }

Обратите внимание на использование медиафункции orientation для iPad и на использование медиафункции width для Apple iPhone. Это объясняется следующим обстоятельством. К сожалению, iPhone не поддерживает медиафункцию orientation. Для имитации определения ориентации необходимо использовать функцию width. Для получения дополнительной информации о наиболее употребительных медиазапросах обратитесь к разделу Ресурсы.

Поддержка технологии SASS (Syntactically Awesome Style Sheets) встроена в инфраструктуру Ruby on Rails, что способствует популярности SASS и ее все более широкому распространению в сообществе веб-разработчиков. Детальное рассмотрение SASS выходит за рамки данной статьи, я лишь изложу основы использования медиазапросов в таблицах стилей на базе SASS. Для получения дополнительной информации о SASS обратитесь к разделу Ресурсы.

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

Листинг 11. Вложенный медиазапрос

#header {
  width: 400px;
  @media (min-width: 800px) {
    width: 100%;
  }
}

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

Листинг 12. Результат компиляции

#header {
  width: 400px;
}
@media (min-width: 800px) {
  #header {
    width: 100%;
  }
}

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

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

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

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

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

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

• Хорошая новость состоит в том, что большинство современных браузеров (включая браузеры для смартфонов) поддерживает CSS-медиазапросы.
• Плохая новость состоит в том, что в Microsoft Windows® Internet Explorer® версии 8 поддержка медиазапросов все еще отсутствует.

С точки зрения большинства профессиональных веб-разработчиков это означает, что для поддержки медиазапросов в Internet Explorer м необходимо специальное решение. Ниже описывается одно из таких решений под названием respond.js, которое представляет собой т.н. polyfill-скрипт на базе JavaScript.

Реализация polyfill-скрипта с помощью respond.js

Respond.js — это небольшая JavaScript-библиотека, которая расширяет возможности веб-браузеров и поддерживает CSS-медиазапросы в тех браузерах, где отсутствует их нативная поддержка. Polyfill-скрипт циклически проходит по всему CSS-коду, на который ссылается данная страница, и анализирует CSS-правила, использующие медиазапросы. Затем этот скрипт отслеживает изменения ширины в браузере, добавляя и удаляя стили в соответствии с CSS-медиазапросом. Тем самым обеспечивается работа CSS-медиазапросов в браузерах, не имеющих их встроенной поддержки.

Это решение базируется на JavaScript, поэтому для работы polyfill-скрипта в браузере должна быть активирована технология JavaScript. Этот скрипт предназначен лишь для поддержки медиазапросов, в которых фигурируют минимальные или максимальные значения width, что требуется для создания динамичных дизайнов. Он не обеспечивает полномасштабной замены всех возможных CSS-медиазапросов. За дополнительной информацией о функциях и ограничениях этого скрипта обратитесь к разделу Ресурсы.

Respond.js — это один из множества доступных polyfill-скриптов с открытым исходным кодом для поддержки медиазапросов. Если respond.js не удовлетворяет ваши потребности, будет несложно найти альтернативные варианты.

Заключение

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

Ресурсы для скачивания

Похожие темы

Подпишите меня на уведомления к комментариям

Наиболее рекомендуемый запрос CSS Media для мобильных телефонов и планшетных устройств

Я хотел получить некоторое представление о том, что может быть наиболее рекомендуемым запросом css media для целевых мобильных телефонов (карманных) и планшетов. У меня есть следующий код, и я хотел бы знать, если это так

@media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (min-device-width : 768px) {
    /*style*/
}

Спасибо!

 @media (min-width:320px)  { /* smartphones, portrait iPhone, portrait 480x320 phones (Android) */ }
    @media (min-width:480px)  { /* smartphones, Android phones, landscape iPhone */ }
    @media (min-width:600px)  { /* portrait tablets, portrait iPad, e-readers (Nook/Kindle), landscape 800x480 phones (Android) */ }
    @media (min-width:801px)  { /* tablet, landscape iPad, lo-res laptops ands desktops */ }
    @media (min-width:1025px) { /* big landscape tablets, laptops, and desktops */ }
    @media (min-width:1281px) { /* hi-res laptops and desktops */ }

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

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

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

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

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

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

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

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

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

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

<!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>

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

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

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

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

<!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>