Всё чаще и чаще web-сайты и приложения начинают подстраивать под размеры окна браузера или разрешение экрана пользователя. Это может достигаться множеством путей от просто работы с CSS до JavaScript.
В предложенном ниже видео, мы научимся просто и понятно решать поставленную задачу с помощью jQuery и метода resize().
Используя метод resize(), мы можем легко отслеживать изменения в ширине окна браузера у пользователей. Напишем функцию, которая будет позволять это делать.
[sourcecode language=»php»]
function checkWindowSize() {
if ($(window).width() > 1800) {
$(‘body’).addClass(‘large’);
}
else {
$(‘body’).removeClass(‘large’);
}
}
$(window).resize(checkWindowSize);
[/sourcecode]
1800 — ширина экрана. Подразумевается, что сайт остаётся в оригинальном виде то тех пор, пока размер окна не превышает 1800 точек. При размере окна более 1800 точек, тегу body присваивается класс large.
Теперь займёмся CSS.
[sourcecode language=»css»]
#container {
width: 800px;
height: 1000px;
background: #e3e3e3;
margin: auto;
}
/* Изменяем размер контейнера для ситуации с большим размером окна */
.large #container {
width: 1000px;
}
#nav {
width:100%;
height:100px;
border-bottom:1px solid white;
background:#999999;
}
.large #nav {
float:left;
width:200px;
border-bottom:none;
border-right:1px solid white;
height:1000px;
}
[/sourcecode]
Вот, собственно, и всё.
Взято с http://net.tutsplus.com/videos/screencasts/quick-tip-different-layouts-for-different-widths/ и переведено.