Ширина сайта по размеру окна

Внедряем CSS в HTML. JavaScript.
cefp
Сообщения: 333
Поблагодарили: 3 раза

Ширина сайта по размеру окна

Сообщение cefp » Вс янв 27, 2013 2:13 pm

Хочу сделать на своем форуме дизайн, подстраивающийся по размеры окна. Обычно это делают с помощью резиновой верстки. Просто контент растягивается по ширине окна. Но при больших изменениях размера окна сложно разработать дизайн чтобы сайт одновременно хорошо смотрелся на широком экране и на маленьком. На одном форуме нашел интересное решение. Фрагмент html кода выглядит так:

Код: Выделить всё

<script type="text/javascript">
//<![CDATA[
var bd = document.body;
bd.className += (bd.offsetWidth > 1263) ? ' wide' : (bd.offsetWidth < 930 ? ' thin' : ' regular');
bd.className += ' fs' + (Cookie.get('font_size') || 3);
//]]>
</script>
<div id="nx-sky">
<div id="nx-headerwrap">
<div id="nx-containerwrap">
<div id="nx-container" class="nx-clearfix">

А вот так выглядит фрагмент кода файла стилей:

Код: Выделить всё

-------------------------------------------------------------------------------------------------
#nx-header, #nx-container, #nx-botsl, #nx-botnav, #nx-footer {
    margin: 0 auto;
    max-width: 1000px;
    min-width: 770px;
    padding: 0 15px;
    text-align: left;
    width: 93%;
}
-------------------------------------------------------------------------------------------------
.wide #nx-header, .wide #nx-container, .wide #nx-botsl, .wide #nx-botnav, .wide #nx-footer {
    max-width: 1500px;
    width: 79%;
}
-------------------------------------------------------------------------------------------------

Я разделил строками из тире два фрагмента, которые работают при разных размерах окна. При этом код странички не меняется - по крайней мере так показывает браузер.
Вот хочу попробовать такой подход. Но возник вопрос: как сделать так чтобы при большом разрешении сайт задействовал строку с ".wide" из файла стилей.
d o h o d - s - n u l y a .ru - идеи бизнеса.
Реклама
Аватара пользователя
Slash
Администратор
Сообщения: 2029
Поблагодарили: 62 раза

Re: Ширина сайта по размеру окна

Сообщение Slash » Вс янв 27, 2013 3:23 pm

Попробуй создать несколько файлов.css, для каждого разрешения, и внедряй Java Script, как то так:

Код: Выделить всё

<script language=JavaScript>
alert("Размер экрана составляет:"+screen.width+"х"+screen.height+"px");
if (screen.width == '640') {document.write ('<link href="640.css" rel="stylesheet" type="text/css" />'); alert("640")}
  else {if (screen.width == '800') {document.write ('<link href="800.css" rel="stylesheet" type="text/css" />'); alert("800")}
    else {if (screen.width == '1024') {document.write ('<link href="1024.css" rel="stylesheet" type="text/css" />'); alert("1024")}
      else {if (screen.width == '1280') {document.write ('<link href="1280.css" rel="stylesheet" type="text/css" />'); alert("1280")}
        else {document.write ('<link href="xxx.css" rel="stylesheet" type="text/css" />'); alert("xxx")}
        }
      }
    }
</script>

Это определяет разрешение монитора и подключает стиль для этого разрешения.
cefp
Сообщения: 333
Поблагодарили: 3 раза

Re: Ширина сайта по размеру окна

Сообщение cefp » Вс янв 27, 2013 4:23 pm

Вместо

Код: Выделить всё

screen.width
наверно можно поставить

Код: Выделить всё

document.body.offsetWidth
тогда стиль будет выбираться не по ширине экрана а по ширине окна. Ведь пользователь может не развернуть окно на весь экран. Сразу возникает вопрос, будет ли этот скрипт автоматически менять файл стиля, когда пользователь решит изменить размеры окна.
d o h o d - s - n u l y a .ru - идеи бизнеса.
Аватара пользователя
Slash
Администратор
Сообщения: 2029
Поблагодарили: 62 раза

Re: Ширина сайта по размеру окна

Сообщение Slash » Вс янв 27, 2013 4:38 pm

cefp писал(а):будет ли этот скрипт автоматически менять файл стиля, когда пользователь решит изменить размеры окна

Не пробовал, но думаю, что да, т.к. загрузка будет выполнятся всех файлов.css заключенных в Java Script, а все ява скрипты выполняют свои действия на стороне пользователя (компьютера), а не сервера.
cefp
Сообщения: 333
Поблагодарили: 3 раза

Re: Ширина сайта по размеру окна

Сообщение cefp » Вс янв 27, 2013 4:41 pm

Нашел еще один код для файла стилей:

Код: Выделить всё

width: expression((documentElement.offsetWidth || document.body.offsetWidth) < 700 ? '700px' : 'auto' && (documentElement.offsetWidth || document.body.offsetWidth) > 1500 ? '1500px' : 'auto');
d o h o d - s - n u l y a .ru - идеи бизнеса.

Вернуться в «HTML + CSS»

Кто сейчас на конференции

Сейчас этот форум просматривают: нет зарегистрированных пользователей и 1 гость