Posted on By seodiz_baza_

Media устройства — как изменить стиль в зависимости от разрешения экрана

какое разрешение экрана можно считать лучшим для медиа устройств

В этой статье мы рассмотрим как используя параметры @media подключить стили CSS и изменить стиль отображения страницы для устройств различных типов с разным разрешением (шириной) экрана.

Типы @media устройств

Всего существует 10 типов media устройств:

  1. all: Универсальный тип используемый для всех устройств одновременно.
  2. aural: Применяется для звуковых и голосовых синтезаторов (синтезаторов речи).
  3. braille: Для устройств работающих с использованием техники Брайля (основана на тактильных ощущениях и используется незрячими для чтения и письма).
  4. embossed: Принтеры использующие шрифт Брайля
  5. handheld: Мобильные телефоны или другие устройства с очень маленьким разрешением экрана
  6. print: Устройства — принтеры
  7. projection: Проекторы и им подобные устройства
  8. screen: Экраны компьютеров (мониторы)
  9. tty: Различные терминалы и телетайпы
  10. tv: Тип используемый для телевизоров и других широкоэкранных устройств.

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

Способы подключения CSS стилей:

Самый распространенный способ подключения стилей — добавлением в секцию HEAD кода:

<link rel="stylesheet" href="http://ВАШ_САЙТ.РУ/style.css" type="text/css" media="all" />

для всех, или только для мониторов:

<link rel="stylesheet" href="http://ВАШ_САЙТ.РУ/style.css" type="text/css" media="screen" />

Второй способ подключения при помощи импорта ( @import) листа стилей в секции HEAD:

<style type="text/css"> @import url("style.css") screen, projection; </style>

Как изменить стиль CSS для media устройств с разным разрешением (шириной экрана)

Для того чтобы изменить стиль отображения страницы на устройствах с разной шириной (размером) экрана используются параметры media: min-width и max-width.
Их можно использовать в секции HEAD страницы:

<link rel="stylesheet" media="all and (min-width: 1279px)" href="style.css" />

это мы определили лист стилей для всех типов и для устройств с разрешением 1280px и больше. Можно так-же установить диапазон ширины экрана на которые будет распространяться определенный стиль:

<link rel="stylesheet" href="style.css" @media="(max-width: 799px) and (min-width: 300px)"/>

Кроме этого определять стили для устройств можно и в самом листе стилей с типом медиа: all добавляя в его самый низ указания для каждого отдельного устройства:

@media print{
#sidebar{display:none;}
#content{width:100%}} // стиль для печати документа, спрятан сайдбар а контент расширен на всю страницу
@media (max-width: 799px) and (min-width: 300px) {
#content{width:100%; float:none}
#sidebar{width:100%; float:none}} // стиль для мобильников и iPad с разрешением от 300 до 799px, контент расширен на всю страницу а сайдбар размещен под контентом
@media (min-width: 1279px) {
#page{max-width:1240px}} // для мониторов с разрешением экрана выше 1280px мы запретили растягивать дизайн нашего резинового сайта шире 1240px

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

Читайте также: media css html сайты