В этой статье мы рассмотрим как используя параметры @media подключить стили CSS и изменить стиль отображения страницы для устройств различных типов с разным разрешением (шириной) экрана.
Типы @media устройств
Всего существует 10 типов media устройств:
- all: Универсальный тип используемый для всех устройств одновременно.
- aural: Применяется для звуковых и голосовых синтезаторов (синтезаторов речи).
- braille: Для устройств работающих с использованием техники Брайля (основана на тактильных ощущениях и используется незрячими для чтения и письма).
- embossed: Принтеры использующие шрифт Брайля
- handheld: Мобильные телефоны или другие устройства с очень маленьким разрешением экрана
- print: Устройства — принтеры
- projection: Проекторы и им подобные устройства
- screen: Экраны компьютеров (мониторы)
- tty: Различные терминалы и телетайпы
- 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 документа.
Читайте также:
- Возможности и недостатки разметки HTML5 для создания web сайтов
- Все правильные doctype и запрещенные в них HTML теги
- Самостоятельное создание логотипа для сайта онлайн
- Текущая дата и время на сайте — php скрипт даты
- Все о семантическом ядре, как подобрать слова и запросы
- Полный текст RSS новостей из сокращенного фида
- Купить домен просто, а выбрать ему имя тяжело
- Платный хостинг бесплатно
- Запрет доступа к сайту с домена или IP
- Английский МФА — Начало завоевания англоязычного интернета