Css media all iphone

2.26. CSS3-медиазапросы

В 2001 году в HTML4 и CSS2 была введена поддержка аппаратно-зависимых таблиц стилей, позволившая создавать стили и таблицы стилей для определенных типов устройств. В качестве медиа-типов были определены следующие: aural , braille , handheld , print , projection , screen , tty , tv . Таким образом, браузер применял таблицу стилей только в случае, когда активизировался данный тип устройства.

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

В HTML4 медиа-запрос записывался следующим образом:

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

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

Текущий синтаксис HTML5 и CSS3 напрямую ссылается на первую спецификацию Media Queries, обновляя правила для HTML. Также был расширен список характеристик медиа-носителей.

Медиазапросы, характеристики устройств и разрешения экрана

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

IE: 9.0 (кроме вложенных медиазапросов)
Edge: 12.0
Firefox: 3.5
Chrome: 26.0
Safari: 6.1
Opera: 10.1
iOS Safari: 7.1
Android: 4.4
Chrome for Android: 55.0

1. Что такое медиа-запрос

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

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

1) С помощью HTML:

2) С помощью правила @import внутри элемента

4) Внутри таблицы стилей style.css:

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

Для поддержки медиа-запросов в старых браузерах можно воспользоваться JavaScript-библиотекой css3-mediaqueries.js , доступную по адресу https://code.google.com/archive/p/css3-mediaqueries-js/.

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

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

2.1. Оператор and

Оператор and связывает друг с другом разные условия:

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

Стили этого запроса будут применяться для всех устройств при ширине области просмотра от 600px до 800px включительно.

Правило @media all and (max-width: 600px) <. >равнозначно правилу @media (max-width: 600px) <. >.

2.2. Оператор запятая

Оператор запятая работает по аналогии с логическим оператором or .

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

2.3. Оператор not

Оператор not позволяет сработать медиазапросу в противоположном случае. Ключевое слово not добавляется в начало медиазапроса и применяется ко всему запросу целиком, т.е. запрос

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

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

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

2.4. Оператор only

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

Эти браузеры ожидают список медиа-типов, разделённых запятыми. И, согласно спецификации, они должны отсекать каждое значение непосредственно перед первым неалфавитно-цифровым символом, который не является дефисом. Таким образом, старый браузер должен интерпретировать предыдущий пример как media=»only» . Поскольку данного типа медиа-типа не существует, то и таблицы стилей будут игнорироваться.

3. Тип носителя

Тип носителя представляет собой тип устройства, например, принтеры, экраны.

Таблица 1. Тип носителя

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

CSS2.1 и Media Queries 3 определяли несколько дополнительных типов, таких как aural , braille , embossed , projection , tty , tv и handheld , но они приняты устаревшими в Media Queries 4 и не будут использоваться.

4. Характеристики носителя

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

Таблица 2. Характеристики носителя

Параметр	Описание
width	Проверяет ширину области просмотра. Значения задаются в единицах длины, px , em и т.д., например, (width: 800px) . Обычно для проверки используются минимальные и максимальные значения ширины. min-width применяет правило если ширина области просмотра больше значения, указанного в запросе, max-width — ширина области просмотра меньше значения, указанного в запросе.
height	Проверяет высоту области просмотра. Значения задаются в единицах длины, px , em и т.д., например, (height: 500px) . Обычно для проверки используются минимальные и максимальные значения высоты. min-height применяет правило если высота области просмотра больше значения, указанного в запросе, max-height — высота области просмотра которого меньше значения, указанного в запросе.
aspect-ratio	Проверяет соотношение ширины к высоте области просмотра. Широкоэкранный дисплей с соотношением сторон 16:9 может быть помечен как (aspect-ratio: 16/9) . min-aspect-ratio проверяет минимальное соотношение, max-aspect-ratio — максимальное соотношение ширины к высоте области просмотра.
orientation	Проверяет ориентацию области просмотра. Принимает два значения: (orientation: portrait) и (orientation: landscape) .
resolution	Проверяет разрешение экрана (количество пикселей). Значения также могут проверять количество точек на дюйм (dpi) или количество точек на сантиметр (dpcm), например, (resolution: 300dpi) . min-resolution проверяет минимальное разрешение экрана, max-resolution — максимальное.

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

—>

color Проверяет количество бит на каждый из цветовых компонентов устройства вывода. Например, (min-color: 4) означает, что экран конкретного устройства должен иметь 4-битную глубину цвета.
min-color проверяет минимальное количество бит, max-color — максимальное количество бит. color-index Проверяет количество записей в таблице подстановки цветов. В качестве значения указывается положительное число, например, (color-index: 256) .
min-color-index проверяет минимальное количество записей, max-color-index — максимальное количество записей. monochrome Проверяет количество битов на пиксель монохромного устройства. Значение задается целым положительным числом, например, (min-monochrome: 8) .
min-monochrome проверяет минимальное количество битов, max-monochrome — максимальное количество битов. -webkit-device-pixel-ratio Задаёт количество физических пикселей устройства на каждый CSS-пиксель.

device-width , device-height , device-aspect-ratio являются устаревшими API, они удалены из Media Queries Level 4.

5. Метатег viewport

Для управления разметкой в мобильных браузерах используется метатег viewport . Изначально данный тег был представлен разработчиками Apple для браузера Safari на iOS. Мобильные браузеры отображают страницы в виртуальном окне просмотра, которое обычно шире, чем экран устройства. С помощью метатега viewport можно контролировать размер окна просмотра и масштаб.

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

Свойство width определяет виртуальную ширину окна просмотра, значение device-width — физическую ширину устройства. Другими словами, width отражает значение document.documentElement.clientWidth , а device-width — screen.width .

При первой загрузке страницы свойство initial-scale управляет начальным уровнем масштабирования, initial-scale=1 означает, что 1 пиксель окна просмотра = 1 пиксель CSS.

Рис. 2. Разница между width и device-width

6. На какие размеры экрана нужно ориентироваться

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

Чтобы проверить, как выглядит ваш сайт на разных устройствах, можно воспользоваться сервисом Responsive design testing for the masses.

7. Стратегии использования медиа-запросов

Для создания дизайна, позволяющего лучшим образом отображать сайт на различных устройствах, используют общие стратегии медиа-запросов:
1) Уменьшение количества колонок (столбцов) и постепенная отмена обтекания для мобильных устройств.
2) Использование свойства max-width вместо width при задании ширины блока-контейнера.
3) Уменьшение полей и отступов на мобильных устройствах (например, нижних отступов между заголовком и текстом, левого отступа для списков и т.п.).
4) Уменьшение размеров шрифтов для мобильных устройств.
5) Превращение линейных навигационных меню в раскрывающиеся.
6) Скрытие второстепенного содержимого на мобильных устройствах с помощью display: none .
7) Подключение фоновых изображений уменьшенных размеров.

Источник

Адаптивный и мобильный дизайн с CSS3 Media Queries

Для начала посмотрим это в действии.

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

Другие примеры

Если вы хотите увидеть больше примеров, посмотрите следующие темы для WordPress, которые я сделал используя media queries: iTheme2, Funki, Minblr и Wumblr.

Обзор

Контейнер страницы имеет ширину 980px для любого разрешения, больше 1024px. Для проверки ширины используются media queries, если ширина меньше чем 980px, в этом случае макет становится резиновым, вместо фиксированной ширины. Если ширина меньше 650px, то контейнеры с контентом и боковой панелью расширяются на полный экран и становятся в одну колонку.

HTML5.js

Сбрасываем HTML5 элементы в block

article , aside , details , figcaption , figure , footer , header , hgroup , menu , nav , section <
display : block ;
>

Описываем основную структуру в CSS

#pagewrap <
width : 980px ;
margin : 0 auto ;
>
#header <
height : 160px ;
>
#content <
width : 600px ;
float : left ;
>
#sidebar <
width : 280px ;
float : right ;
>
#footer <
clear : both ;
>

Шаг 1

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

CSS3 Media Queries

Теперь начинается самое интересное – media queries.

Подключаем Media Queries Javascript

Подключаем CSS media queries

link href = «media-queries.css» rel = «stylesheet» type = «text/css» >

Размер экрана меньше 980px (резиновый макет)

@media screen and (max-width: 980px) <
#pagewrap <
width : 95 % ;
>
#content <
width : 60 % ;
padding : 3 % 4 % ;
>
#sidebar <
width : 30 % ;
>
#sidebar .widget <
padding : 8 % 7 % ;
margin-bottom : 10px ;
>
>

Размер экрана меньше 650px (одноколоночный макет)

@media screen and (max-width: 650px) <
#header <
height : auto ;
>
#searchform <
position : absolute ;
top : 5px ;
right : 0 ;
>
#main-nav <
position : static ;
>
#site-logo <
margin : 15px 100px 5px 0 ;
position : static ;
>
#site-description <
margin : 0 0 15px ;
position : static ;
>
#content <
width : auto ;
float : none ;
margin : 20px 0 ;
>
#sidebar <
width : 100 % ;
float : none ;
margin : 0 ;
>
>

Размер экрана меньше 480px

@media screen and (max-width: 480px) <
html <
-webkit-text-size-adjust : none ;
>
#main-nav a <
font-size : 90 % ;
padding : 10px 8px ;
>
>

Эластичные изображения

img <
max-width : 100 % ;
height : auto ;
width : auto \ 9 ; /* ie8 */
>

Эластичные встраиваемые видео

.video embed ,
.video object ,
.video iframe <
width : 100 % ;
height : auto ;
>

Initial Scale Meta Tag (iPhone)

meta name = «viewport» content = «width=device-width; initial-scale=1.0» >

Финальное Демо

Откроем финальное демо и поизменяем размер экрана, что бы увидеть media queries в действии. Не забудьте проверить в iPhone, iPad, Blackberry (последние версии) и Android телефонах, что бы увидеть мобильную версию.

Источник