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

Адаптивная вёрстка сайта позволяет 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%;}

 
Поделиться в facebook
Facebook
Поделиться в twitter
Twitter
Поделиться в vk
VK
Поделиться в google
Google+
Поделиться в email
Email

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

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

Группа в VK

Помощь проекту

Обнаружили опечатку?

Сообщите нам об этом, выделите текст с ошибкой и нажмите Ctrl+Enter, будем очень признательны!

Свежие статьи

Похожие статьи

CSS flexbox

CSS flexbox

CSS flexbox (Flexible Box Layout Module) — модуль макета гибкого контейнера — представляет собой способ компоновки элементов, в основе лежит идея оси. Flexbox состоит из

 
Препроцессор Sass

Препроцессор Sass

Sass — это метаязык на основе CSS, предназначенный для увеличения уровня абстракции CSS-кода и упрощения файлов каскадных таблиц стилей. Язык Sass имеет два синтаксиса: sass

 
Программируемый язык стилей LESS

Программируемый язык стилей LESS

LESS (Leaner Style Sheets, компактная таблица стилей) — это динамический язык стилей, который разработал Alexis Sellier. Он создан под влиянием языка стилей Sass, и, в

 
CSS-фреймворки

CSS-фреймворки

CSS-фреймворки созданы для упрощения работы верстальщика, исключения ошибок при создании проекта и избавления от скучного монотонного написания одного и того же кода. Верстальщики получают продуманные

 

Сообщить об опечатке

Текст, который будет отправлен нашим редакторам: