Как обработать другое разрешение экрана / размер экрана при разработке сайта?

Вот некоторые простые сценарии, которые я использовал в прошлом (используя jQuery):

$(document).ready(function(){
 $('body').append('<div id="screencss"></div>');
 adjustCSS();
 $(window).resize(function(){ adjustCSS() });
})
function adjustCSS(){
 var pageWidth = $(window).width();
 var sizeSelected = "css/blue-800.css";
 if (pageWidth > 900) { sizeSelected = "css/blue-1024.css"; }
 if (pageWidth > 1010) { sizeSelected = "css/blue-1280.css"; }
 if (pageWidth > 1420) { sizeSelected = "css/blue-1600.css"; }
 $("#screencss").html('<link href="' + sizeSelected + '" media="screen" rel="Stylesheet" type="text/css" />');
}

Значения ширины страницы, используемые в коде, произвольны и были настроены для работы с конкретным сайтом, поэтому не стесняйтесь корректировать их по своему усмотрению.

Кроме того, внутри каждого из этих CSS-файлов находится минимальное количество CSS, которое задает ширину основных контейнеров/оберток и даже фонового изображения.

Обновление #2: Если вы пытаетесь поддерживать валидный HTML. Тогда вы можете добавить все таблицы стилей CSS в шапку страницы (включите атрибут title в каждую из них):

<link title="blue1" href="blue-320.css" media="screen" rel="Stylesheet" type="text/css" />
<link title="blue2" href="blue-640.css" media="screen" rel="Stylesheet" type="text/css" />
<link title="blue3" href="blue-800.css" media="screen" rel="Stylesheet" type="text/css" />
<link title="blue4" href="blue-1024.css" media="screen" rel="Stylesheet" type="text/css" />
<link title="blue5" href="blue-1280.css" media="screen" rel="Stylesheet" type="text/css" />
<link title="blue6" href="blue-1600.css" media="screen" rel="Stylesheet" type="text/css" />

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

$(document).ready(function(){
 $('body').append('<div id="screencss"></div>');
 adjustCSS();
 $(window).resize(function(){ adjustCSS() });
})
function adjustCSS(){
 var pageWidth = $(window).width();
 var sizeSelected = "blue1";
 if (pageWidth > 510) { sizeSelected = "blue2"; }
 if (pageWidth > 580) { sizeSelected = "blue3"; }
 if (pageWidth > 900) { sizeSelected = "blue4"; }
 if (pageWidth > 1010) { sizeSelected = "blue5"; }
 if (pageWidth > 1420) { sizeSelected = "blue6"; }
 var lnk = $('head').find('link[title=' + sizeSelected + ']').removeAttr('disabled');
 $('head').find('link[title]').not(lnk).attr('disabled', 'disabled');
}

Исходя из ваших описанных потребностей, я настоятельно рекомендую проверить css-файл "Grids" из библиотеки Yahoo User Interface (YUI), вы можете найти файл и документацию здесь: http://developer.yahoo.com/yui/grids/.

Базовая настройка пакета Grids включает верхний, основной и нижний колонтитулы. При желании вы можете удалить верхний и / или нижний колонтитулы. Тело можно разделить с помощью вложенной сеточной модели, в которую включены различные шаблоны.

Лично я начинаю все страницы HTML / CSS, которые создаю, с объединенного файла «reset-fonts-grids» из YUI. Он предоставляет вам кроссбраузерный файл сброса css, файл сеток и некоторые стандартизированные классы для шрифтов.

Сам jQuery не сможет помочь вам в этом. Вам нужно освоить базовые HTML и CSS. Используйте Javascript и jQuery, если они вам нужны, не используйте их только для того, чтобы использовать. Когда речь идет о размерах в Интернете, следует работать с пикселями или процентами. Пиксели предназначены для печати. Размеры шрифта следует задавать в ЕМ или пикселях.

Фиксированный макет является наиболее распространенным для обычных веб-страниц, и, используя сетку, такую как 960gs, вы можете легко заставить пропорции выглядеть достойно, поддерживая при этом подавляющее большинство разрешений экрана. Также намного, намного проще адаптировать графику к макету с фиксированной шириной, и в то же время сделать страницу удобной для использования.

При использовании процентного соотношения следует помнить, что строки текста длиной более 600-800 пикселей трудно или медленно читать. Так, если площадь контента составляет 80%, это может быть хорошей идеей для области просмотра шириной 1000px, но если у вас область просмотра 1900px, сайт станет практически непригодным для использования.

И обычно не задают явным образом высоту, так как высота автоматически увеличивается по мере увеличения содержимого контейнера. Конечно, вы можете задать высоту для определенных вещей, но все зависит от того, что именно.

Таким образом, использование динамической или фиксированной ширины зависит от вашего содержимого.