Правило media – медиазапросы внутри класса или классы внутри медиазапроса? — Хабр Q&A

СSS3 Правило @media


Пример

Изменить цвет фона элемента <body> на «lightblue», когда окно браузера будет иметь ширину 600 пикселей или меньше:

@media only screen and (max-width: 600px) {
  body {
    background-color: lightblue;
  }
}

Редактор кода »

Определение и использование

Правило @media используется в запросах мультимедиа для применения различных стилей для различных типов носителей/устройств.

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

  • ширина и высота окна просмотра
  • ширина и высота устройства
  • ориентация (планшет/телефон находится в альбомном или портретном режиме?)
  • разрешение

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

Вы также можете использовать запросы мультимедиа, чтобы указать, что определенные стили предназначены только для печатных документов или для чтения с экрана (тип носителя: print, screen, или speech).

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


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

Числа в таблице указывают первую версию браузера, которая полностью поддерживает правило @media.

Свойство
@media2193.54.09


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По умолчанию. Используется для всех устройств типа носитель
printИспользуется для принтеров
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 {
    width: 50%;
  }
}

/* На экранах шириной 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

Internet Explorer
ChromeOperaSafariFirefoxAndroidiOS
9.0+1.0+9.2+1.3+1.0+1.0+1.0+

Краткая информация

Версии CSS

CSS 1CSS 2CSS 2.1CSS 3

Описание

Правило @media позволяет указать тип носителя, для которого будет применяться указанный стиль. В качестве типов выступают различные устройства, например, принтер, КПК, монитор и др. В табл. 1 перечислены некоторые из них.

Табл. 1. Типы носителей и их описание
ТипОписание
allВсе типы. Это значение используется по умолчанию.
auralРечевые синтезаторы, а также программы для воспроизведения текста вслух. Сюда, например, можно отнести речевые браузеры.
brailleУстройства, основанные на системе Брайля, которые предназначены для слепых людей.
handheldНаладонные компьютеры и аналогичные им аппараты.
printПечатающие устройства вроде принтера.
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

Рис. 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]—>

После этого можно не беспокоится о возможных проблемах — всё будет в лучшем виде! 

 

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

Я надеюсь что эта статья многим поможет и облегчит жизнь. Будьте в курсе и следите за новостями

 

 


Вконтакте

Facebook

Twitter

Google+

E-mail

Это интересно

Подписаться на новости

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

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