Адаптивный дизайн сайта 5/5 (1)

адаптивный дизайн сайта

Как сделать сайт адаптивным?

Адаптивный дизайн ("резиновая" верстка) - одно из основных требований к современному сайту. С развитием цифровых технологий и появлением на рынке мобильных  устройств смартфонов и планшетов адаптивный дизайн стал одним из ключевых требований при разработке любого веб - ресурса.

Так что же такое адаптивность? Давайте рассмотрим на конкретном примере.

Допустим, у нас есть сайт со стандартной разметкой, представляющий собой  хедер, боковые сайдбары, блок контента и футер (рис.1).

адаптивный дизайн сайта

 

Рис.1 Каркас сайта с блочной разметкой

ДЕМО

Откроем наш демо - сайт в браузере, щёлкнем по нему правой кнопкой мыши, выберем вкладку "посмотреть код элемента"  после чего  перейдём в адаптивный режим (ctrl+shft+M).

Там мы увидим, что на всех мобильных устройствах наш сайт будет отображаться точно так же, как на компьютере или ноутбуке, что очень неудобно, т.к. придётся постоянно его масштабировать  и прокручивать  влево и вправо для прочтения контента.

И именно здесь придёт на помощь адаптивная вёрстка, с помощью которой можно автоматически подстраивать сайт под экраны мобильных устройств.

Как же сделать сайт "резиновым"? Для этого понадобится выполнить несколько простых шагов:

 

  • Объявить браузеру через метатег  viewport о том, что наш сайт стал адаптивным. Для этого в раздел head добавляем такую строчку:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

  • Указать все размеры не в пикселях, а в процентах.
  • Прописать в css - файле медиа-запросы.

Исходный css - код нашего сайта был таким:

<style>
.container{width:1200px;margin:0 auto;height:900px;font-size:20px;text-align:center;}
.header,.footer,.left_col,.right_col,.content{box-sizing:border-box; padding:3%;border:3px solid white;}
.header{width:auto;background:rgb(221, 137, 17);height:100px;}
.left_col{width:200px;background:green;height:100%;float:left}
.content{background:grey;height:900px;width:800px;margin:auto;}
.right_col{width:200px;background:green;height:900px;float:right}
.footer{width:auto;background:rgb(182, 182, 208);height:100px;}
</style>

В адаптивном варианте код стал таким:

<style>
.container{width:90%;margin:0 auto;height:900px;font-size:20px;text-align:center;}
.header,.footer,.left_col,.right_col,.content{box-sizing:border-box; padding:3%;border:3px solid white;}
.header{width:auto;background:rgb(221, 137, 17);height:100px;}
.left_col{width:20%;background:green;height:100%;float:left}
.content{background:grey;height:900px;width:60%;margin:auto;}
.right_col{width:20%;background:green;height:900px;float:right}
.footer{width:auto;background:rgb(182, 182, 208);height:100px;}
</style>

ДЕМО

Теперь, если открыть сайт в адаптивном режиме браузера, он будет автоматически трансформироваться под размер экрана мобильного устройства.

Но это еще не всё.

На мобильных устройствах с небольшой диагональю боковые колонки сайта и центральный блок сожмутся так, что читать текст станет затруднительно. Единственный выход в такой ситуации: посредством css отключить сайдбары на устройствах с низким разрешением. И тут нам помогут медиа - запросы.

 

Что такое медиа-запросы?

Медиа - запросы - отдельные команды для мобильных устройств, позволяющие подстраивать контент под различные разрешения экрана.

С помощью медиа - запросов можно адаптировать сайт под любой экран, задавая через них необходимые параметры и размеры контента: изображений, шрифтов, текста и пр.

В нашем случае, для того чтобы отключить сайдбары на устройствах с разрешением ниже 600px и вытянуть блок с контентом на 100% по ширине экрана, запросы будут выглядеть так:

@media(max-width:600px){.left_col,.right_col{display:none}}
@media(max-width:600px){.content{width:100%}}

ДЕМО

Теперь, если открыть наш демо-сайт в адаптивном режиме браузера, то можно увидеть, как левая и правая колонки будут "исчезать" при  разрешении экрана ниже 600px, а блок контента автоматически растягиваться на 100% по ширине экрана, делая удобным чтение текста на мобильных устройствах.

На этом всё. Надеюсь, что статья была вам полезной!

 

 

 


Оставить ответ

Ваш e-mail не будет опубликован. Обязательные поля помечены *