Please enable JavaScript.
Coggle requires JavaScript to display documents.
Создание веб сайтов для любых устройств и браузеров. (Отмена…
Создание веб сайтов для любых устройств и браузеров.
mediaquery.es - вебсайт для получения вдохновения
Логика медиа - запросов
screen - экран, orientation: portrait - устройство находится в портретной ориентации
<link rel="stylesheet" media="screen and (orientation: portrait)" href="portrait-screen.css" />
not инвертирует логику запроса
<link rel="stylesheet" media="not screen and (orientation: portrait)" href="portrait-screen.css"
and связывает запросы друг с другом
<link rel="stylesheet" media="screen and (orientation: portrait) and (min-width: 800px)" href="800wide-portrait-screen.css" />
Медиа - запросы можно использовать в CSS таблицах
media
screen and (max-device-width: 400px) {
h1 { color: green }
}
import
позволяет импортировать таблицу стилей
import
url("phone.css") screen and (max-width:360px);
Проверка при помощи медиа - запросов
device-height
Высота экрана устройства
orientation
Ориентация экрана - книжная или альбомная
device-width
Ширина экрана устройства
aspect-ratio
Соотношение ширины и высоты области просмотра. Например, 16:9
height
Высота области просмотра
device-aspect-ratio
Аналогично, но вычисляется на основе ширины и высоты устройства
width
Ширина области просмотра
color
Количество бит на каждый из цветовых компонентов.
Например, min-color: 16 будет означать, что экран конкретного устройства имеет 16-битную глубину цвета
monochrome
позволяет узнать, сколько бит приходится на каждый пиксел в буфере монохромных кадров.
Значение должно быть числом (целым), например monochrome: 2, и не может быть отрицательным.
color-index
Количество записей в таблице подстановки цветов.
Значения должны быть числовыми и не могут быть отрицательными
resolution
scan
grid
Первый адаптивный веб - дизайн
Шаг 1
Создаем блок обертку.
wrapper {
margin-right: auto;
margin-left: auto;
width: 960px;
}
Отмена автоматического изменения страниц
<meta name="viewport" content="initial-scale=2.0,width=device-width" />
content="Initial-scale=2.0 - означает увеличение экрана в два раза, по сравнению с первоначальным размером.
width = device-width - сообщает, что ширина страницы должна быть равна ширине браузера.
name ="viewport" - обозначает экран устройства.
<meta name="viewport" content="width=device-width, maximum-scale=3, minimum-scale=0.5" />
maximun-scale - позволяет указать максимальный размер увеличения масштабов страницы
mininmum - scale - минимальный размер уменьшения страницы.
<meta name="viewport" content="initial-scale=1.0, user-scalable=no"
user-scalable=no - позволяет запретить масштабирование страницы.
viewport
{ width: 320px; }.
viewport
{ width: 320px; }.
Новое CSS правило для браузеров, аналогичное тегу meta name =viewport
Использование резиновых макетов