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

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

Сначала разберём его особенности. Адаптивность классно дополняет резиновый дизайн. Ведь посмотрите, что происходит, если шаблон чисто резиновый.

Допустим на странице, по горизонтали у Вас расположено два, или даже больше блоков, или изображений.

При уменьшении экрана блоки уменьшаются в соответствии с ним, так как их размер задан в процентах, и при достижении ширины в 320 — 240 px (мобила), они становятся такими маленькими, что понять их содержимое, становиться практически невозможно.

Вот тут и приходит на выручку адаптивный дизайн.

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

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

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

Таким способом можно на маленьком экране, расположить в один столбик вообще весь контент.

То есть сначала будет идти текст, после него боковые колонки, или сначала какой либо блок меню, потом текст, потом sidebar, и так далее.

Окончательный вариант выбирать Вам, в зависимости от задач, которые Вы ставите перед сайтом.

Суть, думаю ясна, перейдём к технике исполнения.

Присвоение свойств адаптивности выполняется при помощи медиазапроса. Выглядит он так (синтаксис):

@media screen and (min-width: X px){
	selector{
		property: value;
	}
}

Где screen — экран;

(min-width: X px) — свойства экрана, то есть ширина;

selector — селектор того элемента, который будет перемещаться;

property — свойство этого элемента;

value — новое значение этого свойства;

Пользователям WordPress, и не только, эта конструкция должна быть знакома, так как присутствует в 90% шаблонов, в файле style.css.

Вопрос только — каким элементам, какие свойства там заданы.

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

1280 х 800 — ноутбук;

600 х 1024 — планшет в книжном формате

1024 х 600 — планшет в альбомном формате

320 х 480 — смартфон в книжном формате

480 х 320 — смартфон в альбомном формате

240 х 320 — мобильный телефон в книжном формате

320 х 240 — мобильный телефон в альбомном формате

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

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

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

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

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

Ведь какой-то сайт можно сжать побольше, без потери читабельности, а какой-то нет.

Для рассмотрения на примере, возьмём резиновый каркас, созданный в предыдущей статье.

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

<!DOCTYPE html>
<html lang="ru">
    <head>
        <meta charset="utf-8" />
        <title>Адаптивный дизайн</title>
<style>
#wrapper{
    width: 100%;
    outline: 1px solid #787274;
    padding: 5px;
    margin: 0 auto;
    position: relative;
}

.header{
    height: 80px;
    background: #25b33f;
    margin-bottom: 5px;
}

.sidebar1{
    height: 120px;
    background-color: #2ff553;
    margin-bottom: 10px;
    width: 20%;
    position: absolute;
    top: 90px;
    left: 5px;
}

.sidebar2{
    height: 120px;
    background-color: #2FF553;
    margin-bottom: 10px;
    width: 20%;
    position: absolute;
    top: 90px;
    right: 5px;
}

.content{
    height: 120px;
    background: #9ef7af;
    margin: 0 auto;
    width: 59%;
}

.blok1, .blok2, .blok3, .blok4{
    float: left;
    margin: 3px 3px 3px 5px;
    width: 22%;
    height: 25%;
    padding: 5px;
    text-align: center;
    border: 2px solid;
}

.footer{
    height: 80px;
    background: #41874e;
    margin: 5px 0 0 0;
}
</style>
</head>
<body>
<div id="wrapper">
	<div class="header"></div>
	<div class="content">
		<div class="blok1">Блок 1</div>
		<div class="blok2">Блок 2</div>
		<div class="blok3">Блок 3</div>
		<div class="blok4">Блок 4</div>
        </div>
	<div class="sidebar1"></div>
	<div class="sidebar2"></div>
	<div class="footer"></div>
</div>
</body>
</html>

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

Резиновый каркас сайта

Рассмотреть содержимое в таком случае будет очень трудно. Да Вы и сами можете в этом убедиться.

Вставьте данный код в Notepad++, откройте картинку в браузере, и попробуйте уменьшать ширину экрана.

Не очень-то, правда? Давайте адаптировать.

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

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

Итак, начнём с размера экрана в 480 px. Первым делом отменим позиционирование боковых колонок, чтоб они заняли своё, определённое в html коде, место под контентом.

И зададим им ширину так, чтоб они потом, с учётом отступов, разместились рядом друг с другом.

Для этого в тег style, в самом конце добавляем медиазапрос:

@media screen and (min-width: 480px){
	.sidebar1, .sidebar2{
		position: static;
		width: 49.5%;
	}
}

Уменьшаем экран до 480 px.

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

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

.content{
		width:100%;
		margin-bottom:5px;
	}

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

Осталось выровнять боковые колонки, и блоки в контенте. Добавляем туда же стили и для них.

.sidebar1{
		float:left;
	}
	.sidebar2{
		margin:0 0 0 50.5%;
	}
	.blok1, .blok2, .blok3, .blok4{
		width:45%;
	}

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

Вот такой у меня получился макет.

Для следующего размера, создаётся ещё один медиазапрос, и так далее.

Конструкцию макета можно собрать любую. Главное принцип, я думаю, вам понятен, а уж какой элемент куда переместить, решается для каждого случая индивидуально.

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

Если какое либо из них не переопределяется в медиазапросе, подумайте: не повлияет ли оно на выполнение стилей на маленьком экране.

Если повлияет, то нужно это свойство отменить в запросе.

Если Вы возьмётесь адаптировать готовый сайт, то в тег <head> нужно поместить мета-тег запрещающий масштабирование браузеру пользователя, если его там ещё нет. Вот он:

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

Пока всё. Адаптивный дизайн только набирает обороты, и по этой теме постоянно появляется что-то новенькое.

Я Вам показал только основные принципы, чтоб понимать, как это делается, а уж оттачивать мастерство нам предстоит самостоятельно.

Желаю творческих успехов.

Неужели не осталось вопросов? Спросить

Короткий отдых
Перекур

Резиновый сайт < < < ◊ > > > Меню для адаптивных версий сайта

 

Запись опубликована в рубрике CSS основы. Добавьте в закладки постоянную ссылку.

6 комментариев на «Адаптивный сайт»

  1. stariс говорит:

    У меня такая ситуация продолжалась больше полгода. В Mobile Friendly всё было зелёненьким, а в Search Console висело сообщение Сайт не оптимизирован для мобил.

    Я тоже долго ломал голову, открывал его на всех подвернувшихся под руку мобилах — всё нормально. Ну и забил на это сообщение. Сейчас посмотрел — всё ОК.

    Да, а что вставляете-то?

  2. Кира говорит:

    Здравствуйте. Прямо голову уже сломала, что делать. Сайт замечательно смотрится на мобильных устройствах. В том же Mobile Friendly Websites, но Mobile Friendly Websites все равно ругается, что «Сайт не адаптирован для смартфонов». Когда вставляю: Все замечательно, Вебмастер перестает ругаться, но начинают съезжать и перестают сжиматься блоки.

  3. stariс говорит:

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

    По вашему вопросу — я не особо вник, но посмотрев Ваш сайт думаю что нужно не менять absolute на relative (Вы не указали в каком блоке это сделали), а задать relative тому блоку в котором расположено подменю, а самому блоку подменю задать absolute. И всё будет OK.

    Ещё страница долго грузится. Похоже картинки не оптимизированы. Да и дизайн для такого сайта нужен адаптивный, чтоб с мобил был доступен.

  4. Емельянов Олег говорит:

    Добрый день. Вопрос отчасти не по теме. Делал сайт несколько лет назад по готовому шаблону — фиксированный центр и резиновые бока. В файле style.css указаны только свойства #wrapper:
    #wrapper {
    margin: 0 auto;
    background: #2f1d17;
    max-width:1152px;
    width: 100%;
    width: expression (document.body.clientWidth > 1152? ‘1152px’: ‘100%’);
    text-align: left;
    clear: both
    }
    До сегодняшнего дня в работе сайта все устраивало.
    Теперь поставлена задача сделать под-меню, фиксирующееся при прокрутке страницы. Нашел в сети подходящий вариант Изменил «position: absolute;» на «relative», чтобы плавающий div равнялся по центральной колонке, подставил свои цифры отступа — и все бы ничего, пока плавающий блок не дойдет до верха страницы — там он действительно фиксируется, но, согласно коду, видимо, перестает быть «relative» (становясь «fixed») и слетает с центральной колонки в левую сторону экрана, начиная равняться по ней. Возня с отступами ни к чему не привела — при масштабировании страницы все разъезжается.
    Как бы победить сей недуг?
    Если у Вас есть время и возможность посмотреть и что-то подсказать — был бы признателен, т.к. за прошедшее время многое подзабылось, а кроме сайтостроения у меня есть еще обязанности и перелопачивать все с начала банально не хватает времени. Спасибо.

  5. stariс говорит:

    Хорошо, что всё понятно. Не зря старался значит.

  6. Рима говорит:

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

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

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