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

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

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

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

  1. aspect-ratio (min-aspect-ratio, max-aspect-ratio) - определяет соотношение ширины к высоте отображаемой области. Обозначается 2/3 например, то есть 2 числа, разделённые знаком "/";
  2. color (min-color, max-color) - определяет количество бит на один канал цвета. Значение min-color:2 обозначает, что каждый из трёх каналов цветовой системы RGB может отображать 22 оттенков и все вместе 4*4*4=64 различных цвета. Если значение не указано вообще, тогда проверяется цветное оно или нет;
  3. color-index (min-color-index, max-color-index) - определяет количество цветов, которое поддерживает устройство;
  4. device-aspect-ratio (min-device-aspect-ratio, max-device-aspect-ratio) - определяет соотношение сторон экрана устройства (2 числа через слэш, например 4/3);
  5. device-height (min-device-height, max-device-height) - определяет всю доступную высоту экрана устройства или печатной страницы;
  6. device-width (min-device-width, max-device-width) - определяет всю доступную ширину экрана устройства или печатной страницы;
  7. grid - определяет, что это устройство с фиксированным размером символов (терминал или телефон);
  8. height (min-height, max-height) - задаёт высоту отображаемой области;
  9. monochrome (min-monochrome, max-monochrome) - определяет, что устройство монохромное, в случае присвоения какого-либо значения, обозначается количество бит на на один пиксель. Например, значение 8 равнозначно 28 оттенкам цвета монохромного дисплея;
  10. orientation - определяет, что устройство находится в альбомном режиме, значение landscape или портретном значение portrait;
  11. resolution (min-resolution, max-resolution) - определяет разрешение устройства в dpi (точек на дюйм) или dpcm (точек на сантиметр);
  12. scan - определяет тип развертки телевизора — череcстрочная (interlace) или прогрессивная (progressive). При чересстрочной развёртке телевизор вначале показывает нечётные строки кадра, затем чётные, в прогрессивной развёртке кадр передаётся и показывается целиком;
  13. 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. Пример созданной нами страницы можно увидеть здесь. Более подробно изучить каскадные таблицы стилей можно при помощи различной литературы и всемирной паутины.

2012 год.


<<Предыдущая | В раздел