Разрешения всякие

Евгений Годов
godov@conternet.ru
http://nickelback.by.ru/
Октябрь 03, 2003
[02:19]

Те кто делают сайты не только для себя, но и для других людей, вероятно столкнулись с банальной проблемой: на мониторе с другим разрешением сайт, отображаемый весьма прилично на вашем компьютере, плывет. Есть много способов для решения этой проблемы. Можно, конечно, написать на главной странице, при каком разрешении сайт будет отображатся более правильно, но где шанс на то, что большая часть посетитлей захочет лезь в настройки, чтобы там что-то менять?;)

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

<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, то подгонять сможете не только текст, но и все что угодно!!!

Полное описания языка CSS:
http://vsplanet.iphosting.ru/

Задумывайтесь о других! Пусть Ваша работа будет красивой не только на Вашем мониторе (:-)


Авторы: Культин Н.Б. ISBN: 5-94157-353-7 Страниц: 288 Издатель: БХВ-Петербург Год выпуска: 2003 Цена: 147.00 руб Обращений: 0
Книга представляет собой сборник программ и задач для самостоятельного решения в среде разработки Delphi. Примеры различной степени сложности - от простейших до приложений работы с графикой, звуком и базами данных - демонстрируют возможности среды разработки Delphi, назначение основных компонентов. Книга также содержит краткий справочник наиболее часто используемых компонентов и функций. На прила...