SEO  -   СТАТЬИ
СтатьиОсновы сайта → DHTML: Изменение таблицы стилей в зависимости от разрешения экрана

DHTML: Изменение таблицы стилей в зависимости от разрешения экрана


О замене таблицы стилей в зависимости от разрешения экрана я уже писал в изменение таблицы стилей в зависимости от разрешения экрана. однако, в тот раз тему "закрыть" не удалось - в Нетскейпе4.05Prof предложенное решение не срабатывало, хотя в более "новых" Нетскейпах все отлично работало.
Появилась необходимость разобраться в причине данной "странности". При применении "вынесенных" таблиц стилей я уже давно замечал некую странную реакцию моего старого Нетскейпа - при полном вынесе описания стилей было рисково пользоваться кнопкой "назад" броузера и частенько выводилась страничка с полным отсутствием описанных стилей. Эта странность и натолкнула меня на мысль попробовать выводить описание изменяемого класса прямо в станицу.

<script language="JavaScript">
<!--
var height=0;var width=0;
if (self.screen) {
// for NN4 and IE4
width = screen.width
height = screen.height
}
if (width<641 && height<481)
{
document.writeln('<STYLE TYPE="text/css">\n'+
'#test {BACKGROUND-COLOR: red; CLIP: rect(0px 300px 200px 0px);
HEIGHT: 200px; LEFT: 0px; POSITION: absolute; TOP: -200px;
WIDTH: 300px; layer-background-color: red}\n'+
'</STYLE>')
}
else
{
if (width>1023 && height>767)
{
document.writeln('<STYLE TYPE="text/css">\n'+
'#test {BACKGROUND-COLOR: red; CLIP: rect(0px 510px 200px 0px);
HEIGHT: 200px; LEFT: 0px; POSITION: absolute; TOP: -200px;
WIDTH: 510px; layer-background-color: red}\n'+
'</STYLE>')
}
else
{
document.writeln('<STYLE TYPE="text/css">\n'+
'#test {BACKGROUND-COLOR: red; CLIP: rect(0px 400px 200px 0px);
HEIGHT: 200px; LEFT: 0px; POSITION: absolute; TOP: -200px;
WIDTH: 400px; layer-background-color: red}\n'+
'</STYLE>')
}
}
//-->
</script>

Вот что у меня получилось. Работает везде, но минус - все надо размещать в самой страничке. В данном примере у меня изменялся размер слоя в зависимости от разрешения экрана. Чтоб не описывать все стили в изменяемых таблицах, можно в данном скриптике описать только те классы и параметры, которые необходимо изменять при разном разрешении. Хотя, если для вас важно изменить некий параметр, то лишние 1-2 Кб. значения иметь не будут...


Автор: mtk.on.ufanet.ru
Анализ и доработка: Luxer

Если Вы заметили какие-либо неточности или ошибки в размещенной информации, просим сообщить о них администрации. SIGMA Logistics