Это несколько простых сценариев, которые я использовал в прошлом (используя 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');
}