Как сделать сайт адаптивным?
Адаптивный дизайн ("резиновая" верстка) - одно из основных требований к современному сайту. С развитием цифровых технологий и появлением на рынке мобильных устройств смартфонов и планшетов адаптивный дизайн стал одним из ключевых требований при разработке любого веб - ресурса.
Так что же такое адаптивность? Давайте рассмотрим на конкретном примере.
Допустим, у нас есть сайт со стандартной разметкой, представляющий собой хедер, боковые сайдбары, блок контента и футер (рис.1).
Рис.1 Каркас сайта с блочной разметкой
Откроем наш демо - сайт в браузере, щёлкнем по нему правой кнопкой мыши, выберем вкладку "посмотреть код элемента" после чего перейдём в адаптивный режим (ctrl+shft+M).
Там мы увидим, что на всех мобильных устройствах наш сайт будет отображаться точно так же, как на компьютере или ноутбуке, что очень неудобно, т.к. придётся постоянно его масштабировать и прокручивать влево и вправо для прочтения контента.
И именно здесь придёт на помощь адаптивная вёрстка, с помощью которой можно автоматически подстраивать сайт под экраны мобильных устройств.
Как же сделать сайт "резиновым"? Для этого понадобится выполнить несколько простых шагов:
Объявить браузеру через метатег viewport о том, что наш сайт стал адаптивным. Для этого в раздел head добавляем такую строчку:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Указать все размеры не в пикселях, а в процентах.
Прописать в css - файле медиа-запросы.
Исходный css - код нашего сайта был таким:
.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>
В адаптивном варианте код стал таким:
.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){.content{width:100%}}
Теперь, если открыть наш демо-сайт в адаптивном режиме браузера, то можно увидеть, как левая и правая колонки будут "исчезать" при разрешении экрана ниже 600px, а блок контента автоматически растягиваться на 100% по ширине экрана, делая удобным чтение текста на мобильных устройствах.
На этом всё. Надеюсь, что статья была вам полезной!