Вёрстка для разных разрешений без использования javascript

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

Вот перечень этих носителей:

• all (все типы)
• aural (речевые синтезаторы)
• braille (устройства для слепых)
• handheld (наладонные компьютеры и аналогичные им)
• print (печатающие устройства)
• projection (проектор)
• screen (экран монитора)
• tv (телевизор)

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

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

<link media="all and (min-width:0px) and (max-width:600px)" rel="stylesheet" type="text/css" href="super-narrow.css"   />
<style media="all and (min-width:1300px)" type="text/css" ></style>

Cмотреть пример.

Ложка дёгтя. «Любимый» браузер всех верстальщиков Internet Explorer не поддерживает такую удобную фичу. Радует одно, что на мобильных устройствах этот браузер значительно менее популярен, чем на компьютерах.