Media screen and max width

.

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

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

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

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

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

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

@media (max-width:1024px;) {

.all {padding: 10px;}

}

Данная запись говорит о том, что для класса all будет применены отступы в 10px в том случае, когда разрешение экрана будет до 1024px.

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

@media (min-width:1024px;) and (max-width:1640px) {
        .all {padding: 10px;}

        table {width:80%}
}

В этом случае свойства стилей будут применены для экранов, которые используют разрешения от 1024 до 1640px.

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

<link rel=’stylesheet’ type=»text/css» href=’css/style.css’ />

<link rel=’stylesheet’ type=»text/css» media='(min-width: 1024px)’ href=’css/style1024.css’ />

<link rel=’stylesheet’ type=»text/css» media='(max-width: 1024px) and (min-width: 800px)’ href=’css/style800.css’ />

Когда нужно указать правила только для мобильных устройств (планшеты, смартфоны), то в данном случае применяется запись max-device-width или min-device-width для обозначения максимального и минимального разрешений соответственно.

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

Запись будет иметь вид:

@media screen (max-width:1380px) { … }

Она обозначает, что стили будут применены только к настольным компьютерам, с шириной экрана до 1380px.

Таким же образом, вместо screen, можно указывать handheld (мобильные устройства), print (принтеры), projection (проекторы), tv (телевизоры).

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

Адаптивный дизайн — это дизайн сайта, который подстраивается под разрешение устройства, с которого выполнен вход на сайт. Расскажу о принципах проектирования адаптивных сайтов и зачем нужны разные версии сайтов. Скачайте PSD-исходник адпативного сайта.

Есть принцип «сначала мобильные», об этом есть полезная книга. Больше книг для дизайнеров в статье «книги для веб-дизайнеров». Книга хорошая, но её суть можно изложить в двух предложениях.
1. Компании, которые не делают мобильную версию сайта, теряют много денег.
2. Веб-разработчики и дизайнеры должны разрабатывать концепты сайта сначала для мобильных, потом для компьютеров.
Принцип «сначала мобильные» (или “mobile first”) основан на том, что самый важный  параметр любого сайта — контент, то есть содержание вашего сайта. Он максимально важен и должен хорошо отображаться на любых устройствах. Когда начинаешь рисовать дизайн сначала для большого экрана, есть вероятность, что напичкаешь его совершенно ненужным контентом. Пропадают акценты. Помимо заголовков на первый план может выйти корзина или какие-то кнопки. Когда пользователь заходит на сайт, он не понимает с чего начать. Такая беспорядочная структура распространена на старых сайтах. Если начинаешь проектирование сайта с мобильной версии и у тебя мало пространства, ты сделаешь акцент на нужной вещи, будь то заголовок или какой-то товар. Принцип «сначала мобильные» дисциплинирует, когда создаешь макет.

Как выглядит адаптивный сайт

Есть один и тот же сайт, но на разных устройствах он выглядит по-разному:

Как адаптивный сайт выглядит на разных устройствах

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

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

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

Блог перестроился версии для ПК на версию для планшета при сжатии браузера

Такие моменты перехода называют контрольной точкой или точкой перегиба. Если сжимать дальше (минимальный размер 460 пикселей), то можно увидеть как сайт будет отображаться на айфоне. Есть несколько точек перегиба, в которых меняется дизайн. Таким простым способом можно определить адаптивность сайта. Адаптивный дизайн — когда вы делаете не одну версию сайта, которая отображается везде одинаково, а несколько версий под разные устройства.

По принципу «сначала мобильные» нужно начинать с разработки версии для мобильного устройства (например, айфона), то есть с размер макета 460 х 960. Второй размер для планшета 768×1024, третий — разрешения ноутбука 1280×802. Последний контрольный размер 1600×992. Под эти разрешения нам нужно разрабатывать наши дизайн-макеты.

Создание адаптивного дизайна сайта в Фотошоп

Проектирование сайта для настольного ПК. Создаешь макет как обычно с использованием модульной сетки и 12 колонок.

Макет адаптивный дизайн сайта для ПК и ноутбука

Далее создаете новый файл с разрешением 768 х 1024 рх. Перестраиваешь макет сайта так, чтобы его было удобно смотреть в таком формате. Например, вынеси меню наверх. Следует учесть, что на планшетах люди будут работать не мышкой и стрелочками, а нажимать пальцами. Поэтому стоит сделать кнопки крупнее и не делать ссылки близко друг к другу. Обычным меню сайта уже будет не очень удобно пользоваться, поэтому лучше сделать раскрывающееся. Размер карточек товара не стоит изменять в размерах, можно уменьшить их количество в строке. Здесь в сетке уже не 12 колонок, а 9.

Адаптивный дизайн сайта для планшета

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

Адаптивный дизайн сайта для планшета

Поскольку это интернет-магазин, то проектирование удобнее начинать с компьютерной версии и постепенно сжимать до мобильной версии. Если вам надо сделать лендинг или сайт компании, то стоит начинать с компании.
Раньше люди отдельно создавали 2 версии сайтов: для компьютера и для телефона. Адаптивный дизайн позволяет делать 1 сайт, но с разрешениями для различных устройств.

Адаптивный контент

Если вы сделали блог и хотите, чтобы он удобно читался на всех устройствах, надо предусмотреть все возможные разрешения, на которых сайт будет открываться. После отрисовки макетов для всех устройств, верстальщик их превратит в действующий html. В коде есть возможность отключать ненужные элементы и я советую помимо адаптивного дизайна делать адаптивный контент. Допустим, у вас есть в интернет-магазине карточка товара для наушников. В версии для компьютера вы ставите фотографию, пишете название, цену, кнопку купить и большую таблицу с техническими характеристиками. Для мобильной версии сайта в той же карточке товара важно оставить название, фото, цену и кнопку купить. Характеристики, желательно, прятать в специальную вкладку, чтобы она дополнительно загружалась, при желании клиента. С телефона вся остальная информация избыточна и её тяжело читать, да и не заходят с мобильного для того, чтобы информацию читать. Если же человеку это действительно нужно прочитать, он сможет это подгрузить. Это принцип адаптивного контента. В мобильных версиях старайтесь использовать минимум контента. Исходи из принципа «было бы мне удобно?». Представляй себя человеком, который заходит на сайт в метро, одной рукой держится за поручень, другой открывает твой сайт. Было бы тебе удобно перемещаться по сайту и искать нужную информацию?!

Сервисы для тестирования адаптивного дизайна

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

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

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

Дополнительная информация по адаптивному дизайну

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

Не теряй деньги клиента из-за неудобного сайта, создавай адаптивные сайты и зарабатывай больше 🙂

Медиа запросы (@media) позволяют сделать из одного сайта несколько версий дизайна в зависимости от характеристик устройства, на котором осуществляет просмотр.

Медиа запросы (@media CSS)

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

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


Синтаксис CSS @Media

@mediaтип_устройства and|not|only (медиа_особенности){ … Описание стилей … }


Где тип устройства может принимать следующие значения:

  • all — для всех типов устройств (по умолчанию используется это значение)
  • braille — для устройств Брайля (для чтения слепыми людьми)
  • embossed — для принтеров Брайля
  • handheld — для смартфонов или портативных устройств
  • print — для принтеров
  • projection — для проекторов
  • screen — для экранов компьютеров, планшетов, смартфонов и т.д.
  • speech — для речевых браузеров
  • tty — для устройств с фиксированным шагом символов, такие как телетайпы и терминалы
  • tv — для телеэкранов

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



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

  • and (и) — логическое И. С помощью него можно задать несколько условий и только при условии, что все они будут выполнены, тогда стиль будет применен
  • or (или) — логическое ИЛИ. Необходимо, чтобы хотя бы одно из условий выполнилось
  • not (не) — логическое отрицание. Условие стоящие за not должно не выполняться
  • only — скрыть правило @media от старых браузеров. Новые браузеры просто не заметят этот оператор

Примечание
Запятая воспринимается как оператор or.


Рассмотрим какие есть медиа особенности.

Медиа особенности

  • aspect-ratio (min-aspect-ratio, max-aspect-ratio) — определяет отношение ширины и высоты области просмотра
  • color (min-color, max-color) — определяет количество бит на цвет для устройства
  • color-index (min-color-index, max-color-index) — определяет количество цветов, которое устройство может отображать
  • device-aspect-ratio (min-device-aspect-ratio, max-device-aspect-ratio) — определяет соотношение сторон экрана устройства через. Записывается через слэш
  • device-height (min-device-height, max-device-height) — определяет всю доступную высоту экрана устройства
  • device-width (min-device-width, max-device-width) — определяет всю доступную ширину экрана устройства
  • grid — отвечает за вывод у устройства. Бывает два вида: сеточный и точечный. Терминалы, дисплей телефона поддерживают только один шрифт, что равносильно значению 1.
  • height (min-height, max-height) — высота области просмотра
  • width (min-width, max-width) — ширина области просмотра
  • orientation ([landscape] | [portrait]) — определяет в каком положение находится экран (альбомном или портретном)
  • resolution (min-resolution, max-resolution) — определяет разрешение устройства вывода

Из всех выше описанных медиа особенностей лишь два используются наиболее часто min-width и max-width.


Примеры с медиа запросами

Пример №1.

Ограничение на максимальную ширину

@mediascreen and (max-width: 800px) { … стили … }

Например, данный код будет работать для устройств с шириной экрана меньше 800px. Атрибут screen and можно не писать.



Пример №2. Задание диапазона на ширину

@media (max-width: 1024px) and (min-width: 640px) { … стили … }

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


Пример №3. Исключение диапазона

@media (min-width: 1024px), (max-width: 640px) { … стили … }

Этот код только будет работать только в случае, если ширина экрана меньше 640 пикслей или наоборот больше 1024 пикселей.


Пример №4. Исключение устройства

@mediaall and (not handheld) { … стили … }

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

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

<linkrel=»stylesheet» media=»тип_устройства and|not|only (медиа_особенности)» href=»ссылка_на_стиль»> Например:<linkrel=»stylesheet» media=»only screen and (max-width: 800px)» href=»mob_style.css»>

Читайте также:
• Адаптивная верстка сайта
• Свойство display
• Свойство transform
• Свойство transform-origin
• Свойство border
• Свойство background
• Свойство transition
• Свойство nth-child
• Свойство overflow
• Свойство box-shadow

← Перейти в каталог CSS уроков

CSS Медиа запросы. Способ построения адаптивного сайта

Подробности
Категория: Для сайта
Опубликовано 30.08.2014 13:46

Итак, в этом материале мы затронем весьма интересную тему создания адаптивных HTML страниц путём использования CSS медиа запросов.

Что вообще такое эти медиа запросы CSS? Эти самые запросы представляют собой обрамлённые коды в определённом синтаксисе, которые применяются только если экран пользователя соответствует условию запроса.

Вот пример запроса:

@media screen and (max-width: 600px) {
body {
background: #ccc;
}
/*Ваш код CSS*/
}

Из премера ясно что код будет применяться если  видимая область для сайта (viewport) конечного пользователя меньше или равен 600 пикселям по ширине.

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

@media screen and (min-width : 600px) and (max-width: 1000px) {
body {
background: #ccc;
}
/*Ваш код CSS*/
}

Сразу видно что выполняться будет если ширина вьюпорта от 600 до 1000 пикселей.

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

@media screen and (УСЛОВИЕ){
/*Код*/
}

Вы наверное обратили внимание на слово screen.

Это значит что-то вроде типа устройства куда идёт вывод. Ещё, кроме screen есть: all, projection, tv, print, 3d-glasses.  Для мониторов, мобилок это screen, поэтому с ним у нас и все примеры. Вообще вместо него лучше ставить all (для всего), если вы не уверены с какого вентилятора пользователь откроет ваше приложение или игру или что там у вас.

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

<link rel=»stylesheet» media=»only screen and (-webkit-min-device-pixel-ratio: 2)» type=»text/css» href=»/iphone4.css» />

Это файл который подключиться если плотность пикселей составит 2.

Адаптивная верстка: media queries

Применяется в основном для идентификации четвёртого айфона.

Таким самым образом можно отдельно написать CSS файлы для портретной или ландшафтной ориентации:

<link rel=»stylesheet» media=»all and (orientation:portrait)» href=»/portrait.css»> 
<link rel=»stylesheet» media=»all and (orientation:landscape)» href=»/landscape.css»>

Это применяется многими веб-девелоперами.

С этим разобрались.

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

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

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

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

min-width:100px — Минимальная ширина окна
max-width:35em — Максимальная ширина окна
max-device-width: 480px — Максимальная ширина устройства (в пикселях)
device-width: 768px — Ширина устройства
device-aspect-ratio: 9/16 — Соотношение сторон
orientation:landscape — Ландшафтная ориентация
orientation:portrait — Портретная ориентация
resolution: 96dpi — Плотность экрана
min-resolution: 192dpi — Минимальная плотность экрана
-webkit-device-pixel-ratio: .75 — Коэффициент плотности экрана (в примере значение 0.75)
-webkit-min-device-pixel-ratio: 1.3 Минимальный коэффициент плотности экрана

О последних параметрах хочется немного поговорить. Добавлю что resolution нестабильно работает. Некоторые устройства не принимают должным образом запрос. А вот -webkit-device-pixel-ratio это собственно условный коэффициент плотности экрана 0.75 это экран с низкой плотностью пикселей, а 2 это Retina.

P.S. Если вы хотите быстро проверить какие CSS запросы работают с вашим устройством и что они собственно отдают, тогда посетите вашим устройством. 

Оптимизация сайта для мобильных и больших дисплеев

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

Адаптивная верстка сайтов | Медиа-запросы

Так-как сейчас все больше как маленьких экранов мобильных смартфонов, так и больших экранов десктопов. Я как-то об этом не задумывался и как обычно делал свои сайты под экраны 1024px. Но посмотрев разрешение экранов посещающих мои сайты в яндекс метрике, был удевлен что 1024px уже не актуален и разнообразие разрешений просто огромное. А трафик с маленьких экранов мобильных устройств состовляет почти 20%. Вот скриншот из яндекс метрики одного из моих сайтов, о котором пойдет речь далее.

Разрешения экранов

Основные разрешения экранов, посещающие сайт, статистика за месяц

Получается что на каких-то устройствах сайт отображается очень мелко, на каких-то с горизонтальной прокруткой, а на больших экранах с пустыми полями по бокам и сайт выглядит очень маленьким. Так-же и гугл оповестил что «ваш сайт не оптимизирован для мобильных устройств». Ниже пример как сайт выглядил до оптимизации на разных разрешениях от мобильников 240*320px, до 1920*1200px.

Скриншот сайта на разных экранах

Скрин сайта на разрешении дисплеев 320px 800px 1280px 1920px

Приступив к оптимизации я первым делом добавил мета тег в body сайта. Сервис гугл для проверки оптимизации сказал что «сайт оптимизирован». Но на самом деле это не так. Данный тег заставляет сайт отображаться пиксель в пиксель, то-есть в зависимости от фактического разрешения экрана, определяет область просмотра. Так например на 320*480px будет отображаться только кусочек сайта, а на больших экранах пустые области.

Для отображения сайта пиксель в пиксель

Ниже код, который заставляет отображать сайт пиксель в пиксель на всех устройствах. И если у маленького экрана разрешение к примеру 6дюймов и 1280*800, то сайт будет малюсенький. А если экран 320*480px, то на экране отобразится кусочек сайта этих размеров. В данном примере значение 1:1, то-есть рано 1.0. Можно ставить свои значения и увеличивать или уменьшать сайт. К примеру на андроид и apple область просмотра сайтов 960-1024px, это значит что сайты с такой шириной будут отображаться на весь экран и без прокрутки, и это не зависит от фактического разрешения экрана, сайт просто масштабируется под размер экрана, Но если добавить этот тег То сайт начнет отображаться в соответствии с аппаратными пикселями, и если разрешение маленькое, то сайт будет слишком крупным и появится прокрутка, а если разрешение большое, то сайт будет маленьким. По-этому один этот viewport ничего не решает, он просто отображает сайт в соответствии с аппаратными пикселями, и отменяет настройки браузеров, что не правильно так-как у браузеров могут буть свои настройки.

Верстка сайта под разные экраны

Чтобы адаптировать сайт я добавил в boby сайта вот этот список мета тегов. viewport — заставляет сайт отображаться в соответствии с пикселями устройства. screen and — позволяет назначать CSS стили в зависимости от разрешения экрана.

Так например запись Указывает что для экранов с разрешением меньше 640px нужно применить стиль из файла style.css Так-же можно указывать стили в одном файле или распределить по разным css файлам. В css файле стиль для экранов как в данном примере max-width:640px делается так Стили css назначаются с помощью @media screen and (min-width: ХХХpx) Так-же можно указать стили для конкретных экранов, например (width: 480px), но сейчас там много разрешений что смысла нет писать большой css фаил чтобы для каждого конкретного экрана написать свои правила отображения. Я просто сделал резиновую верстку сайта в основных стилях. И если например разрешение экрана меньше (max-width: 640px), то все блоки у меня растягиваются по ширине экрана. А если экран от 640-1024px (max-width: 1024px), то я меняю только шрифт body {font-size: 85%;}, так-как по умолчанию он в браузерах 16px, а я его делаю 14px. Если разрешение (min-width: 1280px), то-есть 1280px и более, то я просто увеличил шрифт до 100%, а сайт в основной верстке расстягивается по ширине экрана.

То-есть я сделал резиновую верстку сайту, и подкорректировал указав некоторые css правила для отдельных разрешений экрана. В итоге сайт стал выглядеть вот так.

Скриншоты сайта е ветерок ру

Скриншоты в размерах 320px 640px 800px 1024px 1280px 1920px

Надеюсь что вам стало понятно как сделать. Думаю как сделать основную резиновую верстку вы и так знаете. Я к примеру все размеры указал в процентах (%) вместо пикселей (px). И указал дополнительно стили под различные разрешения экранов. Но этот сайт я пока не адаптировал под разные экраны, на момент написания этой статьи размеры сайта указаны 995px и все размеры в px.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *