Оптимизирование сайта под разные разрешения экрана

Assasin

Много ли вам приходилось раньше оптимизировать сайт под разные разрешения экрана?
Лично я знаю несколько способов:
1) Резиновая верстка
2) Таблица 100%
3) Фиксированная верстка с центрированием
4) Редирект или загрузка стилей в зависимости от ширины экрана с помощью JavaScript

Но есть более удачный вариант, это media screen в CSS 2, выглядит это так

Код: Выделить всё

<link rel="stylesheet" media="screen and (max-width: 1025px)" href="style.css" />

Значит это что стиль style.css загрузиться при условии если разрешение экрана больше 1024px в ширину.
Таким образом как вы понимаете можно сделать следующее

Код: Выделить всё

<link rel="stylesheet" media="screen and (max-width: 1921px)" href="style6.css" />
<link rel="stylesheet" media="screen and (max-width: 1601px)" href="style5.css" />
<link rel="stylesheet" media="screen and (max-width: 1401px)" href="style4.css" />
<link rel="stylesheet" media="screen and (max-width: 1289px)" href="style3.css" />
<link rel="stylesheet" media="screen and (max-width: 1153px)" href="style2.css" />
<link rel="stylesheet" media="screen and (max-width: 1025px)" href="style.css" />

это очень удобно так как работает на порядок быстрее JS и не требует его поддержки так как участились случаи что пользователи его отключают.
Что бы стиль загрузился нужно сделать условие где разрешение экрана на 1пиксель больше тогда загрузиться именно нужный вам стиль..
min-width - действует в обратном порядке.