web-разработка

Адаптивная вёрстка

Адаптивная вёрстка сайта позволяет web-страницам автоматически подстраиваться под экраны планшетов и смартфонов. Она предполагает отсутствие горизонтальной полосы прокрутки и масштабируемых областей при просмотре на любом устройстве, читабельный текст и большие области для кликабельных элементов.

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

Правила адаптивной верстки

1. Задать метатег VIEWPORT

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

2. CSS Media Queries

@media only screen 
and (min-device-width : 320px)
and (max-device-width : 568px) {

    /* Стили для мобильного устройства с разрешением указанные в свойствах @media */
    /* Это пример для экрана iphone5, но можно задать для любых других разрешений */
}
В браузерах можно смотреть как будет выглядеть ваш сайт. На сайте нажмите в любом месте правую кнопку мышки и нажмите «Просмотреть код»:
В открывшемся окне нажмите на значок (toggle device toolbar):
Из списка выберите нужное разрешение экрана и посмотрите как выглядит сайт:

3. Задать свойства CSS в процентах

Например, width: 100%;

Гибкие изображения

Работа с картинками — одна из самых главных проблем при работе с адаптивным дизайном. Существует много способов для изменения размера изображений, и большинство из них довольно просто реализовать. Одно из решений — использование max-width в CSS:
img {max-width: 100%;}
2023-11-18 01:08 Самоучитель по CSS