uzluga.ru
добавить свой файл


Адаптивный веб-дизайн

Информационные технологии

Что это?

  • Адаптивный веб-дизайн – дизайн веб-страниц, обеспечивающий удобное восприятие на различных устройствах.

  • Цель адаптивного веб-дизайна – универсальность веб-сайта для различных устройств.



Причины появления

  • Увеличение количества различных разрешений устройств.

  • Популярность мобильных устройств.

  • Доступность мобильного интернета.



«Недостатки»

  • Необходим «правильный» подбор предметной области.

  • Увеличение интернет-трафика.

  • Нет возможности перехода к полной версии сайта.



Проблемы адаптивного дизайна

  • Согласование макетов страниц.

  • Навигационная панель.

  • Масштабируемость изображений.

  • Масштабируемость таблиц.

  • Старые сайты с фиксированной шириной.

  • Старые версии Internet Explorer.

  • Тестирование и отладка.



Адаптивные разметки адаптивного сайта



Вариант «адаптации» таблиц



Вариант «адаптации» таблиц



Вариант «адаптации» таблиц



Варианты реализации

  • Правило @media

    • CSS 2
    • CSS 2.1
    • CSS 3
  • Медиа-запросы

    • CSS 3
  • Свойство background

    • CSS 1
    • CSS 3
  • Свойство background-size

    • CSS 3


Правило @media

  • all – Все типы (значение по умолчанию).

  • aural – Речевые синтезаторы, а также программы для воспроизведения текста вслух. Сюда, например, можно отнести речевые браузеры.

  • braille – Устройства, основанные на системе Брайля, которые предназначены для слепых людей.

  • handheld – Наладонные компьютеры и аналогичные им аппараты.

  • print – Печатающие устройства вроде принтера.

  • projection – Проектор.

  • screen – Экран монитора.

  • tv – Телевизор.



Правило @media

@media screen {

body {
    • font-family: Arial, Verdana, sans-serif;
    • font-size: 0.9em;
    • color: #000080;

}

h1 {
    • color: #a0522d;

}

h2 {
    • color: #556b2f;
    • margin: 0;

}

p {
    • margin-top: 0.5em;

}

}

Правило @media



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

  • Правило @media.

  • Тип носителя.

  • Логический оператор.

  • Медиа-функция.



Типы носителей

  • all – Все типы (значение по умолчанию).

  • braille – Устройства, основанные на системе Брайля, которые предназначены для чтения слепыми людьми.

  • embossed – Принтеры, использующие для печати систему Брайля.

  • handheld – Смартфоны и аналогичные им аппараты.

  • print – Принтеры и другие печатающие устройства.

  • projection – Проекторы.

  • screen – Экран монитора.

  • speech – Речевые синтезаторы, а также программы для воспроизведения текста вслух. Сюда, например, можно отнести речевые браузеры.

  • tty – Устройства с фиксированным размером символов (телетайпы, терминалы, устройства с ограничениями дисплея).

  • tv – Телевизоры.



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

  • and

    • Указывается для объединения нескольких условий.
  • not

    • Указывается для отрицания условия.
  • only

  • Вместо or используется «,»

    • Если хотя бы одно условие выполняется, то стиль будет применён.


Использование логических операторов

  • Стиль для всех цветных устройств:

    • @media all and (color) { ... }
  • Стиль для всех устройств, кроме смартфонов:

    • @media all and (not handheld) { ... }
  • Стиль для устройств с альбомной ориентацией или минимальной шириной 480 пикселов:

    • @media all and (orientation: landscape), all and (min-width: 480px) { ... }
  • Стиль для новых браузеров:

    • @media only all and (not handheld) { ... }


Медиа-функции

  • Задают технические характеристики устройства, на котором отображается документ.

  • Содержат приставку min- и max-, которая соответствуют минимальному и максимальному значению.

  • У определённого типа носителя свой набор медиа-запросов.



Медиа-функции

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

    • Определяет соотношение ширины и высоты отображаемой области устройства. Значение указывается в виде двух целых чисел разделяемых между собой слэшем (/).
  • color (min-color, max-color)

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

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


Медиа-функции

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

    • Определяет соотношение сторон экрана устройства. Значение указывается в виде двух целых чисел разделяемых между собой слэшем (/).
  • device-height (min-device-height, max-device-height)

    • Определяет всю доступную высоту экрана устройства или печатной страницы.
  • device-width (min-device-width, max-device-width)

    • Определяет всю доступную ширину экрана устройства или печатной страницы.


Медиа-функции

  • grid

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

    • Высота отображаемой области.
  • monochrome (min-monochrome, max-monochrome)

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


Медиа-функции

  • orientation

    • Определяет, что устройство находится в альбомном режиме или портретном (книжном).
  • resolution (min-resolution, max-resolution)

  • scan

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

    • Описывает ширину отображаемой области. Это может быть окно браузера или печатная страница.


Использование медиа-функций

  • Стиль для цветных устройств:

@media screen and (color) { /* Для цветных экранов */

body { background: #fc0; }

}

@media screen and (min-color:3) { /* Минимум 512 цветов */

body { background: #ccc; }

}
  • Стиль для экранов с соотношением сторон 16:9 и более:

@media screen and (min-device-aspect-ratio: 16/9) { ... }

Использование медиа-функций

  • Стиль для разных ориентаций устройств:

@media screen and (orientation: landscape) {

#logo { background: url(logo1.png) no-repeat; }

}

@media screen and (orientation: portrait) {

#logo { background: url(logo2.png) no-repeat; }

}

Использование background-size

  • Стиль для масштабирования фона:

div {

height: 200px;

border: 2px solid #000;

background: url(images/mybg.png) 100% 100% no-repeat;

background-size: cover;

}

Пример адаптивного дизайна



Пример адаптивного дизайна