СSS3 Правило @media
Пример
Изменить цвет фона элемента <body> на «lightblue», когда окно браузера будет иметь ширину 600 пикселей или меньше:
@media only screen and (max-width: 600px) {
body {
background-color: lightblue;
}
}
Определение и использование
Правило @media
используется в запросах мультимедиа для применения различных стилей для различных типов носителей/устройств.
Медиа-запросы могут использоваться для проверки многих вещей, таких как:
- ширина и высота окна просмотра
- ширина и высота устройства
- ориентация (планшет/телефон находится в альбомном или портретном режиме?)
- разрешение
Использование медиа-запросов популярный метод обеспечения адаптированной таблицы стилей (адаптивного веб-дизайна) для настольных компьютеров, ноутбуков, планшетов и мобильных телефонов.
Вы также можете использовать запросы мультимедиа, чтобы указать, что определенные стили предназначены только для печатных документов или для чтения с экрана (тип носителя: print, screen, или speech).
В дополнение к типам носителей, есть также функции мультимедиа. Функции мультимедиа предоставляют более подробные сведения для запросов мультимедиа, позволяя тестировать определенные функции пользовательского агента или устройства отображения. Например, стили можно применять только к тем экранам, которые больше или меньше определенной ширины.
Поддержка браузеров
Числа в таблице указывают первую версию браузера, которая полностью поддерживает правило @media.
Свойство | |||||
---|---|---|---|---|---|
@media | 21 | 9 | 3.5 | 4.0 | 9 |
CSS Синтаксис
@media not|only mediatype и (mediafeature and|or|not mediafeature) {
CSS-Code;
}
значение слова not, only и and ключевое слово:
not: Ключевое слово not возвращает значение всего запроса мультимедиа.
only: Ключевое слово only предотвращает применение указанных стилей в старых браузерах, которые не поддерживают запросы мультимедиа с функциями мультимедиа. Это не влияет на современные браузеры.
and: Ключевое слово and объединяет функцию мультимедиа с типом мультимедиа или другими функциями мультимедиа.
Все они являются необязательными. Однако, если вы используете not или only, также необходимо указать тип носителя.
Вы также можете иметь разные stylesheets для различных мультимедиа носителей, как это:
<link rel=»stylesheet» media=»screen and (min-width:
900px)» href=»widescreen.css»>
<link rel=»stylesheet» media=»screen and (max-width:
600px)» href=»smallscreen.css»>
Media Types
Значение | Описание |
---|---|
all | По умолчанию. Используется для всех устройств типа носитель |
Используется для принтеров | |
screen | Использованный для экранов компьютера, планшетов, смарт-телефонов и т.д. |
speech | Используется для чтения с экрана, который «читает» страницу вслух |
Мультимедийные возможности
Значение | Описание |
---|---|
any-hover | Позволяет ли какой-либо доступный механизм ввода пользователю наводить курсор на элементы? (добавлено в Медиа запросы Уровень 4) |
any-pointer | Является ли какой-либо доступный механизм ввода указательным устройством, и если да, то насколько он точен? (добавлено в Медиа запросы Уровень 4) |
aspect-ratio | Соотношение между шириной и высотой окна просмотра |
color | Количество бит на цветовой компонент для устройства вывода |
color-gamut | Приблизительный диапазон цветов, поддерживаемых агентом пользователя и устройством вывода (добавлено в Медиа запросы Уровень 4) |
color-index | Количество цветов, которые может отображать устройство |
grid | Является ли устройство сеткой или растровым изображением |
height | Высота области просмотра |
hover | Позволяет ли основной механизм ввода пользователю наводить курсор на элементы? (добавлено в Медиа запросы Уровень 4) |
inverted-colors | Является ли браузер или базовая ОС инвертирующими цветами? (добавлено в Медиа запросы Уровень 4) |
light-level | Текущий уровень рассеянного света (добавлен в Медиа запросы Уровень 4) |
max-aspect-ratio | Максимальное соотношение между шириной и высотой экрана |
max-color | Максимальное количество бит на цветовой компонент для устройства вывода |
max-color-index | Максимальное количество цветов, которое может отображать устройство |
max-height | Максимальная высота области отображения, например окна браузера |
max-monochrome | Максимальное количество бит на «color» на monochrome (в оттенках серого) устройстве |
max-resolution | Максимальное разрешение устройства, используя dpi или dpcm |
max-width | Максимальная ширина области отображения, например окна браузера |
min-aspect-ratio | Минимальное соотношение между шириной и высотой области отображения |
min-color | Минимальное количество бит на цветовой компонент для устройства вывода |
min-color-index | Минимальное количество цветов, которое может отображать устройство |
min-height | Минимальная высота области отображения, например окна браузера |
min-monochrome | Минимальное количество бит на «color» на monochrome (в оттенках серого) устройстве |
min-resolution | Минимальное разрешение устройства, используя dpi или dpcm |
min-width | Минимальная ширина области отображения, например окна браузера |
monochrome | Количество бит на «цвет» на монохромном (в оттенках серого) устройстве |
orientation | ориентация области просмотра экрана (альбомный или книжный режим) |
overflow-block | Как устройство вывода обрабатывает содержимое, которое переполняет область просмотра экрана вдоль оси блока (добавлен в Медиа запросы Уровень 4) |
overflow-inline | Можно ли прокручивать содержимое, которое переполняет область просмотра экрана вдоль встроенной оси (добавлен в Медиа запросы Уровень 4) |
pointer | Является ли основной входной механизм указательным устройством, и если да, то насколько он точен? (добавлен в Медиа запросы Уровень 4) |
resolution | Разрешение устройства вывода, используя dpi или dpcm |
scan | Процесс сканирования выходного устройства |
scripting | Доступен ли сценарий (например, JavaScript)? (добавлен в Медиа запросы Уровень 4) |
update | Как быстро устройство вывода может изменить внешний вид содержимого (добавлен в Медиа запросы Уровень 4) |
width | Ширина области просмотра экрана |
Примеры
Пример
Скрыть элемент, если ширина браузера составляет 600 пикселей в ширину или меньше:
@media screen and (max-width: 600px) {
div.example {
display:
none;
}
}
Пример
Использовать запросы мультимедиа, чтобы установить цвет фона в лавандовый, если видовой экран имеет ширину 800 пикселей или шире, в светло-зеленый, если видовой экран имеет ширину от 400 до 799 пикселей. Если видовой экран меньше 400 пикселей, цвет фона будет светло-синим:
body {background-color: lightblue;
}
@media screen and (min-width:
400px) {
body {
background-color: lightgreen;
}
}
@media
screen and (min-width: 800px) {
body {
background-color: lavender;
}
}
Пример
Создать адаптивное меню навигации (отображается горизонтально на больших экранах и вертикально на маленьких экранах):
@media screen and (max-width: 600px) {
.topnav a {
float: none;
width: 100%;
}
}
Пример
Использовать запрос мультимедиа для создания адаптивного макета столбцов:
/* На экранах шириной 992px или меньше перейти от четырех столбцов к двум столбцам */@media screen and (max-width: 992px) {
.column {
}
}
/* На экранах шириной 600 пикселей или меньше сделать столбцы стеком
на вершине друг друга, а не рядом друг с другом */
@media screen and (max-width:
600px) {
.column {
width: 100%;
}
}
Пример
Использовать медиа-запросы для создания адаптивного веб-сайта:
Редактор кода »Пример
Медиа-запросы также можно использовать для изменения макета страницы в зависимости от ориентации браузера. Вы можете иметь набор свойств CSS, которые будут применяться только тогда, когда окно браузера шире, чем его высота, так называемая «ландшафтная» ориентация.
Использовать светло-синий цвет фона, если ориентация находится в альбомном режиме:
@media only screen and (orientation:
landscape) {
body {
background-color: lightblue;
}
}
Пример
С помощью запросов мультимедиа можно задать зеленый цвет текста при отображении документа на экране и черный при печати:
@media screen {body {
color: green;
}
}
@media print {
body {
color: black;
}
}
Пример
Список, разделенный запятыми: добавить дополнительный медиа-запрос к уже существующему, используя запятую (это будет вести себя как оператор OR):
/* Если ширина находится между 600px и 900px или выше 1100px — измените
внешний вид <div> */
@media screen and (max-width: 900px) and
(min-width: 600px), (min-width: 1100px) {
div.example {
font-size: 50px;
padding: 50px;
border: 8px solid black;
background: yellow;
}
}
Связанные страницы
CSS Учебник: CSS Медиа запросы
CSS Учебник: CSS Медиа запросы примеры
RWD Учебник: Адаптивный веб-дизайн с Медиа запросами
JavaScript Учебник: Метод window.matchMedia()
@media | htmlbook.ru
Chrome | Opera | Safari | Firefox | Android | iOS | |
9.0+ | 1.0+ | 9.2+ | 1.3+ | 1.0+ | 1.0+ | 1.0+ |
Краткая информация
Версии CSS
CSS 1 | CSS 2 | CSS 2.1 | CSS 3 |
---|---|---|---|
Описание
Правило @media позволяет указать тип носителя, для которого будет применяться указанный стиль. В качестве типов выступают различные устройства, например, принтер, КПК, монитор и др. В табл. 1 перечислены некоторые из них.
Тип | Описание |
---|---|
all | Все типы. Это значение используется по умолчанию. |
aural | Речевые синтезаторы, а также программы для воспроизведения текста вслух. Сюда, например, можно отнести речевые браузеры. |
braille | Устройства, основанные на системе Брайля, которые предназначены для слепых людей. |
handheld | Наладонные компьютеры и аналогичные им аппараты. |
Печатающие устройства вроде принтера. | |
projection | Проектор. |
screen | Экран монитора. |
tv | Телевизор. |
Синтаксис
@media тип1 [, тип2] {
Описание стиля
}
Значения
После ключевого слова @media идет один или несколько типов носителя, перечисленных в табл. 1; если их больше одного, то они разделяются между собой запятой. После чего следуют обязательные фигурные скобки, внутри которых идет обычное описание стилевых правил.
Пример 1
XHTML 1.0CSS2.1IECrOpSaFx
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>@media</title>
<style type="text/css">
@media screen { /* Стиль для отображения в браузере */
body {
font-family: Arial, Verdana, sans-serif; /* Рубленый шрифт */
font-size: 0.9em; /* Размер шрифта */
color: #000080; /* Цвет текста */
}
h2 {
background: #faf0e6; /* Цвет фона под текстом */
border: 2px dashed #800000; /* Рамка вокруг заголовка */
color: #a0522d; /* Цвет текста */
padding: 7px; /* Поля вокруг текста */
}
h3 {
color: #556b2f; /* Цвет текста */
margin: 0; /* Убираем отступы */
}
p {
margin-top: 0.5em; /* Отступ сверху */
}
}
@media print { /* Стиль для печати */
body {
font-family: Times, 'Times New Roman', serif; /* Шрифт с засечками */
}
h2, h3, p {
color: #000; /* Черный цвет текста */
}
}
</style>
</head>
<body>
<h2>Метод ловли льва в пустыне</h2>
<h3>Метод последовательного перебора</h3>
<p>Пусть лев имеет габаритные размеры LxWxH, где L — длина льва от кончика носа
до кисточки хвоста, W — ширина льва, а H — его высота. После чего пустыню разбиваем на
ряд элементарных прямоугольников, размер которых совпадает с шириной и длиной льва.
Учитывая, что лев может находиться не строго на заданном участке, а одновременно на
двух из них, клетку для ловли следует делать повышенной площади, а именно 2Lx2W.
Благодаря этому мы избежим ошибки, когда в клетке окажется пойманным лишь половина
льва или, что хуже, только его хвост.</p>
<p>Далее последовательно накрываем каждый из размеченных прямоугольников пустыни
клеткой и проверяем, пойман лев или нет. Как только лев окажется в клетке, процедура
поимки считается завершенной.</p>
</body>
</html>
В данном примере вводится два стиля — один для изменения вида элементов при их обычном отображении в браузере, а второй — при выводе страницы на печать. При этом облик документа для разных носителей может сильно различаться между собой, например, как это показано на рис. 1 и рис. 2.
Рис. 1. Страница для отображения в окне браузера
Рис. 2. Страница, предназначенная для печати
Просмотреть документ, у которого CSS установлен как тип print можно, если распечатать определенную страницу. Или пойти на хитрость и временно заменить слово print на screen, чтобы отобразить итог в браузере. Именно так был получен рис. 2.
Команда @media применяется в основном для формирования одного стилевого файла, который разбит на блоки по типу устройств. Иногда же имеет смысл создать несколько разных CSS-файлов — один для печати, другой для отображения в браузере — и подключать их к документу по мере необходимости. В подобном случае следует воспользоваться тегом <link> с атрибутом media, значением которого выступают те же типы, перечисленные в табл. 1.
Пример 2
HTML5CSS2.1IECrOpSaFx
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>@media</title>
<link media="print, handheld" rel="stylesheet" href="print.css">
<link media="screen" rel="stylesheet" href="main.css">
</head>
<body>
<p>...</p>
</body>
</html>
В данном примере используются две таблицы связанных стилей, одна для отображения в браузере, а вторая — для печати документа и его просмотре на КПК. Хотя на страницу загружаются одновременно два разных стиля, применяются они только для определенных устройств.
@media | CSS | WebReference
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>@media</title>
<style type="text/css">
@media screen { /* Стиль для отображения в браузере */
body {
font-family: Arial, Verdana, sans-serif; /* Рубленый шрифт */
font-size: 0.9em; /* Размер шрифта */
color: #000080; /* Цвет текста */
}
h2 {
background: #faf0e6; /* Цвет фона под текстом */
border: 2px dashed #800000; /* Рамка вокруг заголовка */
color: #a0522d; /* Цвет текста */
padding: 7px; /* Поля вокруг текста */
}
h3 {
color: #556b2f; /* Цвет текста */
margin: 0; /* Убираем отступы */
}
p {
margin-top: 0.5em; /* Отступ сверху */
}
}
@media print { /* Стиль для печати */
body {
font-family: Times, 'Times New Roman', serif; /* Шрифт с засечками */
}
h2, h3, p {
color: #000; /* Черный цвет текста */
}
}
</style>
</head>
<body>
<h2>Метод ловли льва в пустыне</h2>
<h3>Метод последовательного перебора</h3>
<p>Пусть лев имеет габаритные размеры LxWxH, где L — длина льва от кончика носа
до кисточки хвоста, W — ширина льва, а H — его высота. После чего пустыню разбиваем на
ряд элементарных прямоугольников, размер которых совпадает с шириной и длиной льва.
Учитывая, что лев может находиться не строго на заданном участке, а одновременно на
двух из них, клетку для ловли следует делать повышенной площади, а именно 2Lx2W.
Благодаря этому мы избежим ошибки, когда в клетке окажется пойманным лишь половина
льва или, что хуже, только его хвост.</p>
<p>Далее последовательно накрываем каждый из размеченных прямоугольников пустыни
клеткой и проверяем, пойман лев или нет. Как только лев окажется в клетке, процедура
поимки считается завершенной.</p>
</body>
</html>
В данном примере вводится два стиля — один для изменения вида элементов при их обычном отображении в браузере, а второй — при выводе страницы на печать. При этом облик документа для разных носителей может сильно различаться между собой, например, как это показано на рис. 1 и рис. 2.
Рис. 1. Страница для отображения в окне браузера
Рис. 2. Страница, предназначенная для печати
Просмотреть документ, у которого CSS установлен как тип print можно, если распечатать определенную страницу. Или пойти на хитрость и временно заменить слово print на screen, чтобы отобразить итог в браузере. Именно так был получен рис. 2.
Команда @media применяется в основном для формирования одного стилевого файла, который разбит на блоки по типу устройств. Иногда же имеет смысл создать несколько разных CSS-файлов — один для печати, другой для отображения в браузере — и подключать их к документу по мере необходимости. В подобном случае следует воспользоваться элементом <link> с атрибутом media, значением которого выступают те же типы, перечисленные в табл. 1.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>@media</title>
<link media="print" rel="stylesheet" href="print.css">
<link media="screen" rel="stylesheet" href="main.css">
</head>
<body>
<p>...</p>
</body>
</html>
В данном примере используются две таблицы стилей, одна для отображения в браузере, а вторая — для печати документа. Хотя на страницу загружаются одновременно два разных стиля, применяются они только для определённых устройств.
Адаптивный сайт с помощью Media Queries
Адаптивный сайт на сегодняшний день является основным требованием к любому проекту. Не все знают как правильно построить сайт для корректного отображения на любых устройствах, используя все современные возможности HTML5.
Как сделать правильно?
На сегодняшний день выделить качественные сайты достаточно трудно — таких меньшинство. Что уж говорить об адаптивности — этот круг становится крайне узким. Многие владельцы сайтов по сей день не считают это серьёзной проблемой — что является серьёзной ошибкой.
В недалеком прошлом веб-сайты создавались непосредственно для персональных компьютеров и особо заморачиваться с отображением не приходилось — всего несколько возможных экранов, под которые не составляло труда спроектировать сайт.
В последнее время выявлены серьёзные изменения, разбивающие этот стереотип. Дело в том, что подавляющее пользователей перешли с настольных компьютеров на планшеты и мобильные устройства. Уверен, каждый это заметил и сам активно используют свои портативные девайсы. И это не вся проблема!
Помимо мобильных устройств в ход пошли широкоформатные мониторы, которые разбивают старый стереотип на мелкие кусочки. Вёрстка сайта начинает съезжать и некорректно отображаться. Решение этой проблемы не заставило себя ждать!
Для обеспечения корректного отображения сайта на всех устройствах и любых форматах были внедрены мобильные версии сайта. К этому способу решения проблемы мало кто перешёл — так как далеко не дешевое это удовольствие, да ещё и довольно сложное в реализации.
Мобильная версия требовала создания дубликата основной версии сайта, с урезанием некоторой части страницы, для корректного упрощенного отображения. Логично предположить, что функционал и возможные ключевые фрагменты сайта теряются, что вызывает неудобства в использовании.
HTML5 — это лучшее решение, которое решает проблему без потери фрагментов сайта и создания отдельной версии под мобильные устройства. А если быть точнее, то решением проблемы служит такая спецификация CSS3, как Media Queries.
Адаптивный дизайн с Media Queries
О нововведениях в HTML5 мы уже говорили, но ещё одно преимущество раскрывается именно в его использовании в адаптивности сайта. В совместном использовании с CSS3 появляется возможность использовать такую интересную спецификацию, как Media Queries.
Данная спецификация позволяет масштабировать и изменять сайт в зависимости от заданных значений размера экрана. Сайты с фиксированной шириной уходят навсегда в историю — именно резиновый дизайн сайта является современной тенденцией.
Преимущество адаптивного сайта:
- корректное отображение на всех устройствах
- возможность детального контроля над любым блоком сайта
- отсутствие дубликатов сайта
- преимущество в ранжировке
- повышение посещаемости
- понижение отказов
Как видно, преимуществ гораздо больше, чем можно было подумать. Адаптивность ценится не только пользователями сайта, но и поисковыми машинами, что позволяет получить необходимое преимущество в выдаче и занять лидирующие позиции в топе.
Дело в том, что с недавних пор Google и Яндекс буквально навязывают веб-мастерам создавать адаптивные сайты и за это поощряют их высокими позициями. Тем самым, в скором времени адаптивные сайты навсегда отодвинут устаревшие сайты, даже если последние имеют большую ценность.
Эта позиция верна и логична — такие условия подвергнут серьёзным изменениям веб-сайтов в лучшую сторону. Качество ресурсов станет выше, что повысит юзабилити и послужит развитию этой сферы. В конечно итоге, такая политика создаст комфортную среду для пользователей — что является неоспоримым плюсом!
Что касается посетителей сайта — адаптивность сайта не останется незамеченным: посещаемость будет расти, а отказы падать. Этот фактор положительно отразится на доходе проекта. Не говоря уже о существенной разгрузке сайта и простоте его использования.
Подробно о Media Queries
При качественной вёрстке и создания адаптивного сайта, корректность работы гарантирована, без всевозможных проблем.
Использование Media Queries имеет своеобразный синтаксис:
@media screen and (max-width:480px) { //необходимые CSS-правила }
@media screen and (max-width:480px) { //необходимые CSS-правила } |
В примере выше мы задаём CSS-правила для экрана, с шириной не более 480px. Аналогичные спецификации можно создавать абсолютно для любого значения. Имеется возможность задать промежуток значений, если в этом есть необходимость:
@media screen and (max-width:480px) and (min-width:320px) { //необходимые CSS-правила }
@media screen and (max-width:480px) and (min-width:320px) { //необходимые CSS-правила } |
Теперь наши CSS-свойства будут работать непосредственно на экранах, с шириной 320-480px. Это очень удобно, если элементы сайта требуют более точной настройки.
Это всё, что следует знать о Media Queries.
Адаптивный сайт — тонкости создания
Для создания резиновых блоков на сайте необходимо задать всем нашим блокам сайта удобное отображение:
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } |
После этого преобразования — блоки будет гораздо легче расставить на свои места.
Следующим этапом будет создание CSS-правил под удобный вам экран (обычно я начинаю со своего монитора). В моём случае правила выглядят таким образом:
.header{ //шапка сайта width: 100%; height: 60px; } #content{ //непосредственно контент width: 70%; float: left; } #secondary{ //сайдбар width: 25%; float: right; } .footer-block{ width: 100%; height: 212px; }
.header{ //шапка сайта width: 100%; height: 60px; } #content{ //непосредственно контент width: 70%; float: left; } #secondary{ //сайдбар width: 25%; float: right; } .footer-block{ width: 100%; height: 212px; } |
В моём случае, всё задано в процентных соотношениях, что позволяет не используя Media Queries добиться адаптивности в отображении. При сжимании экрана — блоки будут спадать вниз (сайдбар спадёт под контент).
Но возникает проблема с величиной шрифта, формой поиска, а также размером иконки счётчика посещаемости поста и количеством комментариев. Эту проблему я решил с помощью спецификации Media Queries:
.entry-header h2 { //заголовок статьи (большой экран) font-size: 1.8em; } @media (max-width: 1200px) and (min-width: 980px){ .entry-header h2 { //заголовок статьи (с меньшим экраном пк) font-size: 1.4em; } } @media (max-width: 767px){ .entry-header h2 { //заголовок статьи (планшетный экран) font-size: 1.4em; } } @media (max-width: 480px){ .entry-header h2 { //заголовок статьи (мобильный экран) font-size: 1.4em; } } #content .entry-meta { //значение счетчика посещаемости (большой экран) font-size: 1.2em; } @media (max-width: 767px){ #content .entry-meta { //значение счетчика посещаемости (планшетный экран) font-size: 0.95em; } } @media (max-width: 480px){ #content .entry-meta { //значение счетчика посещаемости (мобильный экран) font-size: 0.85em; } }
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
.entry-header h2 { //заголовок статьи (большой экран) font-size: 1.8em; } @media (max-width: 1200px) and (min-width: 980px){ .entry-header h2 { //заголовок статьи (с меньшим экраном пк) font-size: 1.4em; } } @media (max-width: 767px){ .entry-header h2 { //заголовок статьи (планшетный экран) font-size: 1.4em; } } @media (max-width: 480px){ .entry-header h2 { //заголовок статьи (мобильный экран) font-size: 1.4em; } }
#content .entry-meta { //значение счетчика посещаемости (большой экран) font-size: 1.2em; } @media (max-width: 767px){ #content .entry-meta { //значение счетчика посещаемости (планшетный экран) font-size: 0.95em; } } @media (max-width: 480px){ #content .entry-meta { //значение счетчика посещаемости (мобильный экран) font-size: 0.85em; } } |
Таким способом мне удалось задать подходящие CSS-свойства для различных размеров экрана, оформив должным образом все элементы.
При необходимости, можно аналогично воспользоваться спецификацией и для размера колонок и блоков на странице, к примеру:
@media (min-width: 1200px){ .header{ //шапка сайта (большой экран) width: 1200px; height: 60px; } } @media (max-width: 980px){ .header{ //шапка сайта (небольшой экран) width: 95%; height: 60px; } } @media (min-width: 1200px){ #content{ //непосредственно контент (большой экран) width: 950px; float: left; } } @media (max-width: 980px){ #content{ //непосредственно контент (небольшой экран) width: 70%; float: left; } } @media (max-width: 767px){ //переход в одноколоночный режим #content{ //непосредственно контент (планшетный экран) width: 100%; float: left; } } @media (min-width: 1200px){ #secondary{ //сайдбар width: 250px; float: right; } } @media (max-width: 980px){ #secondary{ //сайдбар width: 25%; float: right; } } @media (max-width: 767px){ //переход в одноколоночный режим #secondary{ //сайдбар width: auto; float: right; } } .footer-block{ width: 100%; height: 212px; }
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 |
@media (min-width: 1200px){ .header{ //шапка сайта (большой экран) width: 1200px; height: 60px; } } @media (max-width: 980px){ .header{ //шапка сайта (небольшой экран) width: 95%; height: 60px; } }
@media (min-width: 1200px){ #content{ //непосредственно контент (большой экран) width: 950px; float: left; } } @media (max-width: 980px){ #content{ //непосредственно контент (небольшой экран) width: 70%; float: left; } } @media (max-width: 767px){ //переход в одноколоночный режим #content{ //непосредственно контент (планшетный экран) width: 100%; float: left; } }
@media (min-width: 1200px){ #secondary{ //сайдбар width: 250px; float: right; } } @media (max-width: 980px){ #secondary{ //сайдбар width: 25%; float: right; } } @media (max-width: 767px){ //переход в одноколоночный режим #secondary{ //сайдбар width: auto; float: right; } }
.footer-block{ width: 100%; height: 212px; } |
Важно использовать процентные соотношения, а не фиксированные размеры — именно это позволяет делать наш дизайн резиновым.
Размеры экранов
Я советую пользоваться рекомендациями bootstrap, которые предлагают для полной адаптивности использовать 4 возможных вариантов:
@media (min-width: 1200px){…} //большие экраны @media (max-width: 992px){…} //небольшие экраны @media (max-width: 767px){…} //планшетные экраны @media (max-width: 480px){…} //мобильные экраны
@media (min-width: 1200px){…} //большие экраны @media (max-width: 992px){…} //небольшие экраны @media (max-width: 767px){…} //планшетные экраны @media (max-width: 480px){…} //мобильные экраны |
Именно эти варианты являются самыми оптимальными и оправданы тестами. Кстати, о бутстрапе мы поговорим отдельно — это очень интересно и удобно!
Intial Scale Meta Tag
Данный мета-тег является важным и полезным для корректного отображения на Iphone. Он даёт указания браузеру Safari не сжимать страницы под экран (по умолчанию), а использовать ширину устройства, как ширину окна.
<meta name=»viewport» content=»width=device-width; initial-scale=1.0″>
<meta name=»viewport» content=»width=device-width; initial-scale=1.0″> |
Не советую им пренебрегать, поскольку ему уделяется отдельное внимание даже в вебмастере Google и Яндекс.
Современные браузеры и IE
На сегодняшний день HTML5 и CSS3 поддерживают практически все браузеры и не проблем практически нет, кроме IE до версии 9. Начиная с IE9 — полая поддержка гарантирована, но учитывая что есть немало пользователей старых версий, при желании можно и для них адаптировать наш сайт.
Для этого достаточно добавить следующий код:
<!—[if lt IE 9]> <script src=»http://html5shim.googlecode.com/svn/trunk/html5.js»></script> <![endif]—>
<!—[if lt IE 9]> <script src=»http://html5shim.googlecode.com/svn/trunk/html5.js»></script> <![endif]—> |
После этого можно не беспокоится о возможных проблемах — всё будет в лучшем виде!
В целом, при желании, можно практически без проблем сделать сайт адаптивным и современным. Это решит многие проблемы и позволит проекту оставаться свежим и современным, а также получать ещё больше трафика от поисковых систем.
Я надеюсь что эта статья многим поможет и облегчит жизнь. Будьте в курсе и следите за новостями
Вконтакте
Google+