Главная или честный способ заработка в сети Зачем мне это? Всё начинается с идеи

Адаптируем страницу под размер окна браузера

В настоящее врямя существует множество цифровых устройств с различными размерами экранов, от смартфонов до телевизоров с диагональю 42 дюйма и выше. Как полагается, на всех этих устройствах различные разрешения (примерно от 320х240 до 1920х1200) и под каждое из этих разрешений часто бывает необходимо адаптировать веб-страницу. Делается это при помощи media queries - части спецификации CSS3, позволяющей задать область действия селектора. Media queries представляет собой блок с указанием параметров устройства вывода, такие как тип, ширина и высота окна браузера, разрешение, ориентация в пространстве. Начинается всё с правила @media, следом за которым записываются типы устройств, логические операторы и медиа-функции. В списке ниже отметим все 3 логических оператора.

and - логическое "И", применяется для объединения нескольких условий;
not - логическое "НЕ", применяется для отрицания какого-либо условия;
, - логическое "ИЛИ", если хотя бы одно из условий соблюдается, тогда стиль будет применён.

Теперь рассмотрим медиа-функции. С их помощью задаются технические характеристики устройств (например размер окна браузера). Их 12 штук в настоящее время.

aspect-ratio (min-aspect-ratio, max-aspect-ratio) - определяет соотношение ширины к высоте отображаемой области. Обозначается 2/3 например, то есть 2 числа, разделённые знаком "/";
color (min-color, max-color) - определяет количество бит на один канал цвета. Значение min-color:2 обозначает, что каждый из трёх каналов цветовой системы RGB может отображать 2² оттенков и все вместе 4*4*4=64 различных цвета. Если значение не указано вообще, тогда проверяется цветное оно или нет;
color-index (min-color-index, max-color-index) - определяет количество цветов, которое поддерживает устройство;
device-aspect-ratio (min-device-aspect-ratio, max-device-aspect-ratio) - определяет соотношение сторон экрана устройства (2 числа через слэш, например 4/3);
device-height (min-device-height, max-device-height) - определяет всю доступную высоту экрана устройства или печатной страницы;
device-width (min-device-width, max-device-width) - определяет всю доступную ширину экрана устройства или печатной страницы;
grid - определяет, что это устройство с фиксированным размером символов (терминал или телефон);
height (min-height, max-height) - задаёт высоту отображаемой области;
monochrome (min-monochrome, max-monochrome) - определяет, что устройство монохромное, в случае присвоения какого-либо значения, обозначается количество бит на на один пиксель. Например, значение 8 равнозначно 2⁸ оттенкам цвета монохромного дисплея;
orientation - определяет, что устройство находится в альбомном режиме, значение landscape или портретном значение portrait;
resolution (min-resolution, max-resolution) - определяет разрешение устройства в dpi (точек на дюйм) или dpcm (точек на сантиметр);
scan - определяет тип развертки телевизора — череcстрочная (interlace) или прогрессивная (progressive). При чересстрочной развёртке телевизор вначале показывает нечётные строки кадра, затем чётные, в прогрессивной развёртке кадр передаётся и показывается целиком;
width (min-width, max-width) - задаёт ширину отображаемой области;

А теперь пример. Создадим веб-страницу, а стиль для неё зададим при помощи media queries.

  Пример использования media queries

Главная | Новости | О нас | Контакты

Это блок с контентом (основным содержимым страницы).

Теперь задаём таблицу стилей:

#main {
font-size:14px;
}
@media screen and (max-width:800px){
#header{
background:#ff6633;
width:100%;
height:10%;
}
#topmenu{
text-align:center;
background-color:#ffcc66;
width:100%;
height:12%;
}
#topmenu a{
color:blue;
text-decoration:none;
}
#topmenu a:hover{
color:blue;
text-decoration:underline;
}
#content{
background-color:#ffccff;
float:left;
width:80%;
height:68%;
}
#sidebar{
float:left;
background-color:#ff9966;
width:20%;
height:68%;
}
#sidebar a{
display:block;
padding-bottom:3px;
color:blue;
text-decoration:none;
}
#sidebar a:hover{
color:blue;
text-decoration:underline;
}
#footer{
clear:both;
background-color:#ffff33;
width:100%;
height:10%;
}
}
@media screen and (min-width:800px){
#main {
width:800px;
margin:0 auto;
}
#header{
background:#ff6633;
width:800px;
height:100px;
}
#topmenu{
text-align:center;
background-color:#ffcc66;
width:800px;
height:30px;
}
#topmenu a{
color:blue;
text-decoration:none;
}
#topmenu a:hover{
color:blue;
text-decoration:underline;
}
#content{
background-color:#ffccff;
float:left;
width:650px;
height:400px;
}
#sidebar{
float:left;
background-color:#ff9966;
width:150px;
height:400px;
}
#sidebar a{
display:block;
padding-bottom:3px;
color:blue;
text-decoration:none;
}
#sidebar a:hover{
color:blue;
text-decoration:underline;
}
#footer{
clear:both;
background-color:#ffff33;
width:800px;
height:50px;
}
}

Рассмотрим теперь сам код. С html-документом всё понятно, подключаем к нему стиль mediastyle.css. В таблице стилей сначала задаём размер шрифта. Далее говорим, что если ширина экрана (окна браузера) меньше, чем 800 пикселей, тогда для него будут выполняться следующие правила и задаём размеры всех блоков в процентах от ширины окна. Если же ширина экрана больше, чем 800 пикселей, задаём размеры всех блоков в пикселях и устанавливаем местоположение содержимого по центру страницы, при помощи значения свойства margin:0 auto;. Здесь используем для позиционирования плавающие блоки. На этом закончим изучение CSS. Пример созданной нами страницы можно увидеть здесь. Более подробно изучить каскадные таблицы стилей можно при помощи различной литературы и всемирной паутины.

| В раздел