При верстке нового сайта я руководствуюсь принципом – каждому девайсу свой вариант отображения странички. Имея один html-код мы можем совершенно по разному представить страницу на различныйх устройствах. В различных учебниках традиционно перечисляют типы устройств:
- all – Все типы. Это значение используется по умолчанию.
- aural – Речевые синтезаторы, а также программы для воспроизведения текста вслух. Сюда, например, можно отнести речевые браузеры.
- braille – Устройства, основанные на системе Брайля, которые предназначены для слепых людей.
- handheld – Наладонные компьютеры и аналогичные им аппараты.
- print – Печатающие устройства вроде принтера.
- projection – Проектор.
- screen – Экран монитора.
- tv – Телевизор.
Обычно верстка очередного макета ограничивается записью:
1 | <link rel="stylesheet" type="text/css" media="all" href="style.css" /> |
где media=«all» – это указание для всех девайсов использовать стить style.css. Немного реже можно увидеть где media=«print» для принтеров. Но мало кто из верстальщиков знают (или используют) всю мощь @media. Попробую на примерах показать некоторые «фишки». Читать далее
