Что такое адаптивная верстка?
Всем привет! Думаю, что многие из вас слышали о такой вещи как "Адаптивная верстка" или "Responsive makeup"(отзывчивая верстка). Сегодня я немного введу вас в курс дела, а в следующих статьях мы будем углубляться в эту тему.
Итак, что подразумевает под собой слово "отзывчивая"? Отзывчивая верстка - это верстка, которая автоматически подстраивается(адаптируется) под то разрешение устройства, на котором в данный момент просматривает страницу пользователь. К примеру, если вы смотрите страницу на большом экране или даже телевизоре, то у вас будет одно отображение сайта, а если вы просматриваете ту же страницу на, к примеру, мобильном устройстве, то у вас будет уже совсем другой вид данной страницы.
Делается это для того, как вы уже поняли, чтобы пользователю было удобно просматривать вашу страницу как на большом экране, так и на маленьком. Таким образом, у вас будет намного больше посетителей, ведь по статистике, которую я приводил чуть раньше в предыдущей статье, люди все чаще используют мобильную технику для просмотра страниц нежели обычные компьютеры.
Помимо всего вышесказанного, заказчики все чаще просят делать именно адаптивную верстку, поэтому знать ее и уметь верстать данным способом обязан любой современный веб-разработчик.
Узнать все это лучше в видео формате и для этого есть курc HTML5 и CSS3 с Нуля до Гуру, но, если вы предпочитаете читать, а не смотреть, то подписывайтесь на обновления, чтобы не пропустить новый выпуск по данной, очень интересной теме.
Итак, начнем.
Для начала нам нужно узнать, что же входит в понятие "адаптивная верстка"? А в данное понятие входит следующее:
- Гибкие шрифты
- Гибкий макет на основе сетки
- Гибкие изображения
- Медиазапросы
Теперь поговорим поподробнее обо все этом.
Гибкие шрифты - это шрифты, которые заданы не жестко в px(пикселях), а в em, величине, которая может меняться.
Посмотрим на простой пример
body {
font-size: 16px;
}
h1 {
font-size: 1.5em;
}
Что мы здесь указали? Я не просто так написал для тега body размер 16px, ведь это именно тот размер шрифта, который принят по умолчанию в браузерах. Теперь нам нужно, опираясь на данное значение, указать размер шрифта в 24px для заголовка h1. Как это сделать? А очень просто! Для этого есть формула
цель / контекст = результат
Запомните эту формулу, она нам еще пригодится.
Нам нужно получить размер шрифта 24px, верно? - это будет наша цель.
У нас шрифт установлен по умолчанию - 16px - это контекст.
Считаем: 24 / 16 = 1.5
Т.е. размер для h1 будет 1.5em.
Итак, с этим разобрались.
Едем дальше и поговорим о гибкой сетке.
Как понятно из названия, гибкая сетка - сетка, которая может изменяться. Для чего это нужно? К примеру, на большом мониторе мы можем показать пользователю 3 колонки, но ведь на мобильном устройстве ему будет неудобно смотреть 3 колонки! Если человек зашел с телефона, то надо оставить одну колонку и всего этого добиться нам помогут гибкие сетки. О них мы будем подробно говорить в отдельной статье. Сейчас я могу сказать лишь то, что там вместо px мы будем использовать %.
Гибкие изображения - очень важная и на самом деле нетрудная тема.
Гибкие изображения - это изображения, которые не статично стоят в каком-то блоке, а меняют свой размер в зависимости от разрешения экрана пользователя и ширины колонки. Это очень просто реализовать, однако там есть много подводных камней, связанных с браузером Internet Explorer, но мы поговорим и о них тоже.
И последнее - медиазапросы.
Медиазапросы - это условия, которые либо выполняются, либо не выполняются.
К примеру, мы можем задать ширину колонки 500px, но, если ширина области просмотра пользователя меньше 300px, то ширину колонки нужно установить в 100px.
Такие и более сложные условия делаются с помощью медиазапросов и это тоже очень интересная тема, которая будет очень подробно раскрыта в соотвествующей статье.
Итак, сегодня мы разобрали, что такое адаптивная верстка, что входит в данное понятие и даже научились делать гибкие шрифты.
Спасибо за внимание и не пропустите следующую статью!
-
- Михаил Русаков
Комментарии (1):
Хорошая статья позволяет разобраться что- к чему. Давно интересна тема-"адаптивный дизайн сайта", так как это позволяет большей раскрутки ресурса. Соответственно, и способствует увеличению прибыли, к чему стремимся мы все. Особо раньше не вникала в эту тему, пока друг не посоветовал адаптировать сайт для мобильных устройств( ну что греха таить, он в этой сфере как рыба в воде, шарит во много раз лучше меня). Проанализировав ситуацию, решила попробовать, проделать такую работу сама не смогла, не люблю браться за дело в котором ничего не понимаю. Проконсультировалась у знакомых, где можно заказать эту услугу, посоветовали http://www.mobile-version.ru/. Я так и сделала. Полностью следовала инструкции для осуществления выполнения заказа. ну, что сказать результат меня очень порадовал. Мне не пришлось создавать отдельную мобильную версию сайта, что гораздо затратнее. А результат Эффективный, адаптивный дизайн максимально помогает сайту в продвижении, к чему я собственно говоря и стремилась. причем сайт полностью соответствуют всем стандартам и рекомендациям в поисковых системах. Не пойму, почему я раньше этого не сделала, ведь давно ломаю голову, как увеличить прибыль! Сейчас же, количество продаж возросло в разы!
Ответить
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.