slogin.info

ihc 468x60 1 1
Звезда активнаЗвезда активнаЗвезда активнаЗвезда активнаЗвезда активна5 / 5
 
Автор: Администратор
Просмотров: 5416
Теги: css, media, адаптивность, adaptive

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

Адаптивность

В первую очередь хотелось бы сказать, что такое адаптивность. Мы не будем приводить определения из википедии или ещё откуда-то, а скажем своими словами.

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

На изображении приведен пример отображения такого сайта.

17cdbe28f860f68cba6844c915ad5f4e

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

Вернёмся к CSS и собственно самим media-запросам. Этот механизм является такое конструкцией, который позволяет задавать стили только для устройств с определенными параметрами.

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

Все медиа-запросы начинаются с @media, после чего идут условия проверки и в фигурных скобках CSS-стили, пример:

@media screen and (max-height: 600px){
/* CSS-стили */
}

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

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

Табл. 1. Устройства и их описание
ТипОписание
all Все типы. Это значение используется по умолчанию.
braille Устройства, основанные на системе Брайля, которые предназначены для чтения слепыми людьми.
embossed Принтеры, использующие для печати систему Брайля.
handheld Смартфоны и аналогичные им аппараты.
print Принтеры и другие печатающие устройства.
projection Проекторы.
screen Экран монитора.
speech Речевые синтезаторы, а также программы для воспроизведения текста вслух. Сюда, например, можно отнести речевые браузеры.
tty Устройства с фиксированным размером символов (телетайпы, терминалы, устройства с ограничениями дисплея).
tv Телевизоры.

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

По мимо этого в медиа-запросах могут использоваться логические операторы.

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

and

Логическое И. Объединяет несколько условий, которые должны выполняться одновременно.

В первом примере как раз используется этот оператор.

not

Логическое отрицание(НЕ). Соответственно инвертирует одно из условий.

Пример, для всех типов устройств, кроме смартфонов:

@media all and (not handheld){
/* CSS-стили */
}

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

,

Запятая служит для обозначения логического ИЛИ. Запрос срабатывает если выполняется хотя бы одно из указанных через запятую условий.

Пример, для телевизоров или проекторов:

@media tv, projection{
/* CSS-стили */
}

only

Этот оператор ничего из себя не представляет и применяется лишь для того, чтобы медиа-запросы поддерживались старыми браузерами.

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

Пример, для мониторов или смартфонов:

@media only screen, only handheld{
/* CSS-стили */
}

По мимо выше указанных условий можно использовать медиа функции.

Media-функции:

Они задают технические характеристики устройства, на котором смотрят сайт. Почти все такие функции имеют приставки min- и max-, которые соответствуют минимальному и максимальному значению для характеристики. Например min-height:200, говорит о том, что бы стиль применялся к устройствам с высотой равной/более 200 px. А max-height:200, для устройств с равной/меньшей высотой 200 пикселям.

aspect-ratio (min-aspect-ratio, max-aspect-ratio)

Типы устройств, к котором применяетсяhandheld, print, projection, screen, tty, tv.

Значение - целое число/целое число.

Определяет соотношение ширины к высоте устройства. Значение задается в виде двух целых чисел, разделяемых слешем.

color (min-color, max-color)

Типы устройств, к котором применяетсяhandheld, print, projection, screen, tty, tv.

Значение - целое число.

Определяет число бит на канал цвета. К примеру, значение 3 означает, что красный, зелёный и синий канал могут отображать 23 цветов каждый, что в общем составляет 512 цветов (8×8×8). Если значение не указано, тогда проверяется что устройство цветное.

color-index (min-color-index, max-color-index)

Типы устройств, к котором применяетсяhandheld, print, projection, screen, tty, tv.

Значение - целое число.

Определяет количество цветов, которые должно поддерживать устройство.

device-aspect-ratio (min-device-aspect-ratio, max-device-aspect-ratio)

Типы устройств, к котором применяетсяhandheld, print, projection, screen, tty, tv.

Значение - целое число/целое число.

Определяет соотношение сторон экрана устройства. Отличается от aspect-ratio тем, что применяется относительно самого устройства а не видимой части.

device-height (min-device-height, max-device-height)

Типы устройств, к котором применяется - все кроме speech.

Значение - размер.

Определяет размер доступной высоты или печатной страницы. Задается числом, которое определяет количество пикселей.

device-width (min-device-width, max-device-width)

Типы устройств, к котором применяется - все кроме speech.

Значение - размер.

Определяет размер доступной ширины или печатной страницы. Задается числом, которое определяет количество пикселей.

grid

Типы устройств, к котором применяетсяall.

Значение - нет.

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

height (min-height, max-height)

Типы устройств, к котором применяется - все кроме speech.

Значение - размер.

Высота отображаемой области.

monochrome (min-monochrome, max-monochrome)

Типы устройств, к котором применяетсяhandheld, print, projection, screen, tty, tv.

Значение - целое число.

Определяет, что устройство монохромное. Если указано число, то оно обозначает число бит на пиксель. Так, значение 8 равнозначно 256 оттенкам серого (или другого цвета). В примере 6 показан стиль для монохромного и цветного принтера.

orientation

Типы устройств, к котором применяется - handheld, print, projection, screen, tty, tv.

Значениеlandscape | portrait.

Определяет, что устройство находится в альбомном режиме (ширина больше высоты) или портретном (ширина меньше высоты).

resolution (min-resolution, max-resolution)

Типы устройств, к котором применяетсяhandheld, print, projection, screen, tty, tv.

Значение - разрешение в dpi (точек на дюйм) или dpcm (точек на сантиметр).

Определяет разрешение устройства, например, принтера. В примере 8 стиль будет работать для принтера с минимальным разрешением 300 точек на дюйм.

scan

Типы устройств, к котором применяетсяtv.

Значениеinterlace | progressive.

Определяет тип развертки телевизора — чересстрочная (interlace) или прогрессивная (progressive). При чересстрочной развёртке телевизор вначале показывает нечётные строки кадра, затем чётные, что позволяет сократить передаваемые данные. В прогрессивной развёртке кадр передаётся и показывается целиком.

width (min-width, max-width)

Типы устройств, к котором применяется - все кроме speech.

Значение - размер.

Описывает ширину отображаемой области. Это может быть окно браузера или печатная страница. В примере 9 при уменьшении окна до 600 пикселов и меньше меняется цвет фона веб-страницы.

Самые распространенные медиа-запросы 

/* Smartphones (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 320px) 
and (max-device-width : 480px) {
/* CSS-код */
}
 
/* Smartphones (landscape) ----------- */
@media only screen and (min-width : 321px) {
/* CSS-код */
}
 
/* Smartphones (portrait) ----------- */
@media only screen and (max-width : 320px) {
/* CSS-код */
}
 
/* iPads (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 768px) 
and (max-device-width : 1024px) {
/* CSS-код */
}
 
/* iPads (landscape) ----------- */
@media only screen
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) {
/* CSS-код */
}
 
/* iPads (portrait) ----------- */
@media only screen
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) {
/* CSS-код */
}
 
/* Desktops and laptops ----------- */
@media only screen and (min-width : 1224px) {
/* CSS-код */
}
 
/* Large screens ----------- */
@media only screen and (min-width : 1824px) {
/* CSS-код */
}
 
/* iPhone 4 ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* CSS-код */
}
 
/* BlackBerry Torch -------- */
@media screen and (max-device-width: 480px) {
/* CSS-код */
} 
 
/* Samsung GALAXY Tab -------- */
@media (max-device-width: 1024px) and (orientation: landscape) {
//css code here
} 
 
/* Dell Streak 7 --------- */
@media (max-device-width: 800px) {
/* CSS-код */
} 
 
/* Motorola's Xoom -------- */
@media (max-device-width: 1280px) {
/* CSS-код */
} 
 
/* Samsung GALAXY Tab -------- */
@media (max-device-width: 1024px) and (orientation: landscape) {
/* CSS-код */
} 

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

Авторизоваться с помощью:

     


Защитный код
Обновить

Поиск по сайту

Топ 10 активных пользователей

  • Имя пользователя Баллы
  • gawk
    44.20
  • hr@proovelab
    15.00
  • intuit89
    5.60
  • Varvarka
    4.00
  • Akyla58
    3.00
  • AnnaOl
    3.00
  • dimasik_3557
    3.00
  • ErcardSa
    3.00
  • Galinamuh
    3.00
  • Hozephlof
    3.00
 

Рекламные ссылки

IHC

Пожертвования

icon donate

Yandex.Money: 410011571748395

Webmoney:

R362907776401 (Рубли)

Z410919458006 (Доллары)

ihc 468x60 1 1

Похожие материалы

Языки программирования сайтов

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

Теги:

css, html, javascript, php, веб

Комментариев: 0 Подробнее
Удобное собрание CSS хаков для самых популярных браузеров

Для каждого хорошего верстальщика в какой-то момент времени встает вопрос кроссбраузерности. Что такое кроссбраузерность? Это свойство сайта или дизайна сайта отображаться одинакого в разных барузерах. Дело в том, что при создании браузеров разработчики не сильно задумываются о стандартизации, это порождает разное представление одного и того же сайта в их продукции. Создание кроссбраузерной верстки/сайта и позволяет преодолеть эту разницу.

Теги:

css, хаки, hacks, читы

Комментариев: 0 Подробнее
!important в CSS Просмотров 2078
!important в CSS

Часто бывает, что люди, давно изучающие CSS, не имеют представления или не понимают до конца как работает директива !important в CSS. В этой статье я постараюсь описать её действие и показать пару примеров, такая статья так же пригодится тем, кто только начал изучать CSS.

Теги:

css, css3, style, !important

Комментариев: 0 Подробнее
Как подключать свои шрифты на сайт, или все о @font-face в CSS

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

Теги:

css, css3, @font-face, font, шрифт

Комментариев: 0 Подробнее

Последнее с форума

intuit89 аватар
Работаем в прежнем режиме, ждем новых заказов с интересными проектами...
Перейти в тему
ZOMRO аватар
Виртуальные выделенные сервера на облачной платформе Облачные VDS/VPS — это услуга, которая поможет...
Перейти в тему
ZOMRO аватар
Друзья, встречайте новинку в ассортименте наших услуг — тарифный план “Nano”. Тариф VDS/VPS «NANO» ...
Перейти в тему

Последние статьи

Javascript функции

Функции - одна из основных концепций языка JavaScript. При этом есть кардинальное отличие от многих языков программирования, в JS каждая функция сама по себе является объектом, а соответственно и манипулировать с ней можно разными способами:

Ссылка на телефон

В этой статье мы рассмотрим простой и обычный способ создания ссылки на телефон.

CPA сети 30.01.2017
CPA сети

Сегодня мы подробно рассмотрим тему зарабатка на своих проектах (т.е. это не обязательно сайты) при помощи CPA сетей.