Резиновый дизайн на HTML5 и CSS3 media queries

29.11.2012

 

 

 

Как создать резиновый дизайн страницы с помощью CSS3 и HTML5

С появление этой чудотехнологии, нет проблем создать реальный резиновый дизайн. Многие трудности решились с версткой для тянущегося дизайна сайтов. В наши дни, люди смотрят сайты с разнообразных устройств. Раньше были только стационарные компьютеры и ноутбуки, еще несколько лет назад дизайн сайтов ограничился на нижней планке разрешения 1000 пикселей или 800 минимум для старых мониторов и компьютеров. Теперь 10% пользователей интернета это смартфоны, кпк и планшеты, и надо учитывать, что их становится все больше, и также надо учитывать, что сайты нужно делать для всех. Обычно для этих целей делают дополнительный сайт с шаблоном под мобильные устройства. Сейчас технологии сайтостроения шагнули вперед, и при помощи программирования можно создать динамический шаблон для всех платформ в одном сайте.
Этот пример показывает, как можно с помощью  HTML5 и CSS3 media queries создать кросс-браузерный адаптивный дизайн.

 

 

 

Этот блок окрасится в розовый, если окно сузится меньше 600px
Этот блок окрасится в оранжевый , если окно сузится меньше 900px
Этот блок окрасится в голубой, если окно будет между 600px и 900px
Этот блок включится на устройстве с максимальным разрешением : 480px (Iphone)

Ваше разрешение экрана: меньше 600px между 600 - 900px больше 900px

 

Резиновый шаблон на CSS3 Media Queries



Оставить комментарий...

Добавить комментарий


Защитный код
Обновить