PNG также обладает замечательной способностью быть прозрачным, потому он отлично подходит
для иконок и всего, что требует прозрачности.
GIF
GIF формат существует с 1987 года. Если вам нужна простая анимация, GIF поможет. Формат
любим многими за способность в одном файле показывать сразу несколько картинок. Вероятно, вы не захотите использовать его в дизайне, поскольку такая анимация не является интерактивной, ее нельзя запустить или остановить. Кроме того, сжатие здесь менее эффективно, чем в PNG для
простых изображений и в JPG - для сложных.
Медиа-запросы
Медиа-запросы - сердце RWD. Идея адаптивного дизайна подразумевает, что для разных экранов
должны применяться свои правила.
Медиа-запросы - это команды CSS, влияющие на другие CSS селекторы, которые вступают в силу
при определенных условиях. Простыми словами - мультимедийный запрос говорит браузеру
применить 1-10 правила при ширине экрана до 700 пикселей, а другой запрос указывает браузеру
обратить внимание на правила 11-20, когда экран имеет ширину 701 пиксель и больше.
Медиа-запросы всегда начинаются с “@media”, браузеры умеют читать правила, которые
перечислены между фигурными скобками {}. Наиболее популярные условия, отображаемые медиа-
запросами - максимальная и минимальная ширина, однако можно использовать и другие свойства.
Изучение Медиа-запросов требует отдельной книги, ниже несколько ссылок по тематике:
CSS - Медиа запросы (media queries)
Стандартные @media для всех пользовательских устройств
Взгляните на эту коллекцию вдохновляющих сайтов, которые используют медиа-запросы и
адаптивный веб-дизайн: mediaqueri.es
12
Пример
Контейнер страницы имеет ширину 980 пикселей для любого разрешения более 1024 пикселей.
Для проверки ширины используются медиа-запросы. если ширина меньше 980 пикселей, макет
становится “резиновым”. Если ширина меньше 650 пикселей, контейнеры с контентом и боковая
панель становятся полноэкранными и располагаются в одной колонке.
HTML
На странице есть контейнер “pagewrap”, который содержит “header”, “content”, “sidebar” и “footer”.
13
HTML5.js
Internet Explorer v8 и ранние версии, не поддерживает новые элементы HTML5, такие как <header>, <article>, <footer>, <figure> и др. Добавив файл html5.js, вы сделаете IE способным понять
новые элементы.
CSS
Сброс настроек элементов HTML5
Нижеприведенный CSS код сбрасывает стандартные элементы HTML5 (статья, боковая панель, хедер, футер, элемент) и делает их элементами блока.
Основные CSS без медиа-запросов
CSS3 медиа-запросы
Internet Explorer 8 и ранние версии не поддерживают медиа-запросы CSS3, это можно исправить
с помощью css3-mediaqueries.js
14
<!--[if lt IE 9]>
<script src=”http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js”></
script>
<![endif]-->
Создайте новый CSS файл для медиа-запросов.
<link href=”media-queries.css” rel=”stylesheet” type=”text/css”>
Для экранов меньше чем 980 пикселей
Используются правила: pagewrap = reset width to 95%, content = reset width to60 %, sidebar = reset width to 30 %
Совет: используйте аутентичный (%), чтобы сделать блоки “резиновыми”.
Размер экрана меньше 650 пикселей (одноколоночный макет)