Те, кто делают сайты не только для себя, но и для других людей, вероятно столкнулись с банальной проблемой: на мониторе с другим разрешением сайт, отображаемый весьма прилично на вашем компьютере, плывет. Есть много способов для решения этой проблемы. Можно, конечно, написать на главной странице, при каком разрешении сайт будет отображатся более правильно, но где шанс на то, что большая часть посетитлей захочет лезь в настройки, чтобы там что-то менять?
Иногда бывает так, что при смене разрешения, общая структура остается нормальной, но текст становится плохочитаемым. Чтобы этого избежать, предлагаю простой скрипт:
<SCRIPT language=JavaScript>
<!--
if (screen.width == 640) {document.write ("<LINK href=?1.css? type=text/css rel=stylesheet>")};
if (screen.width == 800) {document.write ("<LINK href=?2.css? type=text/css rel=stylesheet>")};
if (screen.width == 1024) {document.write ("<LINK href=?3.css? type=text/css rel=stylesheet>")};
//-->
</SCRIPT>
Работает он так: как только загружается страница, браузер определяет разрешение монитора пользователя и в зависимости от этого выбирает нужную таблицу каскадных стилей.
В данном примере файл 1.css оптимизиоран под разрешение 640Х480 пикслей, 2.css под 800Х600 и 3.css под разрешение 1024Х768.
Вам лишь необходимо создать и подогнать эти три файла под соотвествующие разрешения.
Внимание! Когда будете подгонять и баловаться с разными разрешениями, не забываейте нажимать F5 для обновления страницы.
Пример:
<HTML>
<HEAD>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=windows-1251">
<SCRIPT language=JavaScript> // в данном случае под два разрешения
<!--
if (screen.width == 800) {document.write ("<LINK href=?1.css? type=text/css rel=stylesheet>")};
if (screen.width == 1024) {document.write ("<LINK href=?2.css? type=text/css rel=stylesheet>")};
//--></SCRIPT>
</HEAD>
<BODY>
<div id=text1>Работа со стилями</div>
<div id=text2>Работа со стилями</div>
</BODY>
</HTML>
Содержания файлов с таблицами стилей:
1css:
BODY {BACKGROUND: #000000; }
#text1 { font-family: Verdana; font-size: 18pt; color:yellow; font-weight : bold;}
#text2 {font-family: ms san serif, font-size: 9pt; color: #FC1301; font-weight : bold;}
2css:
BODY {BACKGROUND: #000000; }
#text1 { font-family: Verdana; font-size: 15pt; color: red; font-weight : bold;}
#text2 {font-family: ms san serif, font-size: 7pt; color: blue; font-weight : bold;}
Если вы не любите скрипты в самом коде страницы, можно сделать ссылку на файл:
<SCRIPT language=JavaScript src="1.js"></script>
где 1.js файлик с написаным скриптом.
Если вы хорошо разбираетесь в CSS, то подгонять сможете не только текст, но и все что угодно!!!
