Блог Тимура Казанского

Адаптивная верстка сайта для мобильных устройств на примере


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

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

Не адаптивный дизайн

Не очень информативно, читаемо и красиво, правда? Давайте исправим это, и для этого нам нужно сделать всего два шага:

  • 1. Указать область просмотра с помощью метатега «viewport»;
  • 2. Использовать медиатип «screen» в медиазапросе CSS.

А теперь давайте рассмотрим каждый из пунктов поподробнее.

Метатег «viewport»

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

метатег viewport

Данный метатег необходимо указать в тегах <head> вашего сайта, который вы адаптируете под мобильные устройства.

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

Использование медиатипа «screen» в медиазапросе CSS

Медиазапрос CSS3 это не что иное, как логическое выражение, которое выдает «TRUE» или «FALSE» в зависимости от условия. Давайте рассмотрим следующий медиазапрос:

@media screen and (max-width: 480px) {CSS правила для разрешения экрана менее 480px}

медиатип screen

Как только ширина экрана мобильного устройства составила менее 480 пикселей, то вышеуказанное выражение медиазапроса выдает «TRUE» или «ИСТИННО» и далее вступают в силу все CSS правила, которое указанные в нем. В качестве примера можно привести пример аналогии с условным оператором «if»:

if (max-width==480px) {выполняется данный код}

Очень важно указывать данный медиазапрос в самом конце CSS документа, так как чтение CSS кода браузером, идет сверху вниз, и когда вы устанавливаете стили для разрешения экрана менее 480 пикселей, переопределяются только основные стили, тогда как большинство из стилей, остаются неизменными (такие как: цвет фона, размер шрифта, выравнивания и т.д.). Давайте рассмотрим пример нашего блога с резиновой (адаптивной) разметкой, но без адаптирования под мобильные устройства. Скачать пример.

.kolonka {
float: right;
margin-left: 1em;
width: 16.66%;
padding-bottom: 200px;
padding-top:20px;
font-size: 1.2em;
}
.navigaciya a{
padding-left: 7em;
padding-right: 4em;
color: grey;
font-size: 1.3em;
}
h2 {
text-align: center;
font-variant: small-caps;
padding-top: 20px;
padding-bottom: 10px;
font: 1.7em normal Verdana,Tahoma,sans-serif;
letter-spacing: -0.5px;
color: black;
}
.posti {
float: left;
width: 75%;
padding-left: 1.5em;
padding-bottom: 80px;
line-height: 160%;
font-family: Verdana,sans-serif;
font-size: 0.95em;
letter-spacing: -0.5px;
}
.podval {
background-color: grey;
color: #f9f3e9;
text-align: center;
padding: .5em 0;
clear: right;
}

И вариант с адаптивной разметкой, но уже под мобильные усройства. Скачать пример.

Адаптивная верстка под мобильные устройства

blog.html
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
</head>
style.css
.kolonka {
float: right;
margin-left: 1em;
width: 16.66%;
padding-bottom: 200px;
padding-top:20px;
font-size: 1.2em;
}
.navigaciya a{
padding-left: 7em;
padding-right: 4em;
color: grey;
font-size: 1.3em;
}
h2 {
text-align: center;
font-variant: small-caps;
padding-top: 20px;
padding-bottom: 10px;
font: 1.7em normal Verdana,Tahoma,sans-serif;
letter-spacing: -0.5px;
color: black;
}
.posti {
float: left;
width: 75%;
padding-left: 1.5em;
padding-bottom: 80px;
line-height: 160%;
font-family: Verdana,sans-serif;
font-size: 0.95em;
letter-spacing: -0.5px;
}
.podval {
background-color: grey;
color: #f9f3e9;
text-align: center;
padding: .5em 0;
clear: right;
}
@media screen and (max-width: 480px) {
.kolonka {
float: none;
width: 50%;
padding-bottom: 10px;
padding-top:10px;
text-align: left;
}
.navigaciya a{
padding-left: 0.5em;
padding-right: 0.5em;
font-size: 1.2em;
line-height: 1.4;
}
h2 {
padding-top: 5px;
}
.posti {
float: none;
width: 90%;
padding-left: 0.5em;
padding-right: 0.5em;
text-align: justify;
padding-bottom: 20px;
}
.navigaciya {
text-align: center;
}
.podval {
clear: none;
}
}

Как видите, ничего сложно в этом нет, просто указываем метатег «viewport» в шапке сайта и с помощью медиатипа «screen» устанавливаем стили под определенное разрешение экрана.

Также имейте в виду, вы можете экспериментальным путем добиться отличного отображения вашего сайта путем ручного сужения окна браузера, если окажется, что при среднем разрешении экрана (например 700px) какой-то элемент сайта располагается не верно или криво, то вы можете указать дополнительный медиазапрос «screen »с указанием определенных правил под данное разрешение. Например, это может выглядеть следующим образом:

@media screen and (max-width:480px) {
CSS правила для разрешения экрана до 480 пикселя
}
@media screen and (min-width:480px) {
CSS правила для разрешения экрана свыше 480 пикселя
}
@media screen and (max-width:700px) {
CSS правила для разрешения экрана до 700 пикселя
}
@media screen and (min-width:700px) {
CSS правила для разрешения экрана свыше 700 пикселя
}

Разметка до и после

На этом, я думаю буду заканчивать данную статью, надеюсь она оказалась вам полезной. Если есть вопросы, не стесняйтесь, задавайте в комментариях. С вами был Тимур Казанский и до следующих статей. Всем пока.

Категория: Разработка сайтов для мобильных устройств

Читайте также - самые интересные истории обо мне

Оставьте ваш комментарий

Комментарии: 0