Приветствую вас, случайные посетители и постоянные читатели блога Royal-Site.ru!
За время существования этого сайта, я менял шаблон несколько раз и даже создавал собственный с нуля.
Одна из главных задач при выборе нового шаблона — это адаптивная верстка сайта под все разрешения экрана.
Краткий план статьи:
Как достичь адаптивности? Для этого есть разные способы. Кто то использует javascript, кто то что то еще. Но я считаю, что самый простой и правильный способ — это адаптивная верстка сайта с помощью CSS.
Как сделать адаптивную верстку сайта
Во-первых, если вы взялись верстать адаптивный дизайн сайта, между тегами <head></head> вставьте следующий код:
<meta name="viewport" content="width=device-width, initial-scale=1">
Какой я был дурак, что не сделал этого сразу, когда пытался сделать адаптивную верстку сайта!!!
Проблема мобильных браузеров в их масштабировании верстки сайта, даже адаптивной.
Представьте себе, я рисую дизайн, потом прописываю все нужные стили и запросы, проверяю адаптивность сайта при разных разрешениях. Все вроде бы хорошо! Но, когда я открываю свой блог на смартфоне, я вижу, что сайт просто напросто сжался. Он не адаптировался к мобильному устройству, а просто уменьшились размеры шрифта, картинок и т.д.
Как так? Я стал перепроверять все стили, правильно ли я прописал классы, в итоге дошел до того, что через javascript проверил ширину окна браузера в px. Я был в шоке. При проверке на ноутбуке я получил результат 1024px, и примерно такой же результат я получил открыв сайт на смартфоне!
Но ведь этого не может быть!
Оказывается, если не прописать код, который я указал выше, мобильный браузер не понимает, что сайт адаптивный и пытается просто уменьшить страницу сайта, чтобы она влезла в маленький экран мобильника.
Из-за своей глупости и некомпетентности я потерял очень много времени. Зато теперь запомнил навсегда))).
Адаптивная верстка CSS media запросы
Чтобы сделать адаптивную верстку сайта с помощью CSS, необходимо использовать media запросы.
Это как? Да, очень просто. В CSS файле нужно прописать запросы типа:
@media screen and (min-width: 1440px) and (max-width: 1599px){ }
Это код означает, что стили заключенные между «{ } » будут работать для экранов с минимальной шириной 1440px и максимальной 1599px.
То есть те стили элементов сайта, которые должны быть адаптированны в зависимости от разрешения экрана, должны быть прописаны отдельно для каждой возможной ширины экрана.
Самые важные разрешения экрана, при адаптивной верстке
- 320 px — Мобильные устройства (портретная ориентация);
- 480 px — Мобильные устройства (альбомная ориентация);
- 600 px — Небольшие планшеты;
- 768 px — Планшеты (портретная ориентация);
- 1024 px — Планшеты (альбомная ориентация)/Нетбуки;
- 1280 px и более — PC.
Именно на эти разрешения и нужно делать упор и уделять им особое внимание при адаптивной верстке. Это самые распространенные виды разрешений экранов.
bootstrap адаптивный дизайн
Очень удобно использовать для создания адаптивной верстки bootstrap. Удобство в том, что все стили для адаптации блоков, кнопок, таблиц и т.д. уже прописаны в bootstpap. Нужно только разобраться какой класс к какому элементу присвоить.
Для начала, качайте свежую версию bootstrap и подключите его к своему сайту. Учтите, что подключение стилей и скриптов к wordpress имеет свои особенности.
Верстка на bootstrap отличается тем, что ширина блока или экрана делится на 12 равных частей. И присваивая определенный класс блоку, можно задать ширину блока равной нужному количеству частей.
Например, такая конструкция позволит выделить один широкий блок для контента шириной в 8 частей и один узкий для сайдбара шириной в 4 части экрана:
<div class="col-md-8 "></div> <div class="col-md-4"></div>
Ширина блоков будет рассчитываться автоматически в зависимости от ширины экрана. А при просмотре на мобильном устройстве эти блоки будут смещаться друг под друга.
Также можно регулировать отступ блок от края, опять же, на нужное количество частей. Например такая конструкция:
<div class="col-md-10 col-md-offset-1 "> </div>
Будет создан блок шириной в 10 частей с отступом слева в 1 часть экрана.
Если разобраться, то работа с бутстрап делает работу с адаптивным дизайном очень быстрой. При чем эти стили точно работают корректно и не будет ничего кривого на сайте.
В будущем я планирую выложить несколько уроков по работе с bootsrap. Поэтому советую подписаться на обновления блога, чтобы не упустить этот момент.
Проверка адаптивности сайта
Но возникает вопрос: как проверять адаптивность сайта? Вот прописали вы media запросы в CSS, подключили bootstrap и используете нужные классы. А как вы проверите, что на всех разрешениях экрана сайт правильно адаптируется.
Я для этих целей рекомендую использовать следующий онлайн сервис -http://quirktools.com/screenfly/. Просто введите URL страницы для проверки и переключайте разрешения экранов в панели управления.
Очень точный и главное бесплатный сервис, который заслуживает уважение и благодарности от веб-мастеров и верстальщиков, которые занимаются адаптивной версткой сайтов.
Ну как вам статья? Все понятно? Если нет, пишите в комментарии, будем разбираться вместе.
Да, чтобы сделать адаптивный дизайн сайта, нужно хорошо потрудится. Но эти труды вознаградятся благосклонным отношением к вашему сайту поисковиков, и самое главное посетителей вашего сайта.
С уважением,
Артем Губтор.
Это вторая статья которую прочитал и понял, что интернет это сборище «рекламщиков» и «долботиктокозвонов»(второе не про вас).
Не информативная инфо. Рассчитана на тех, кто и так в теме… Когда же всякие «гУру» начнут понимать, что за советами лезут новички и те, кто впервые сталкивается с проблемой? Почему не дать тупо пример полной! страницы html и к ней полная страница SCC?!!! Почему нужно текстом писать в режиме устного общения? Попахивает интеллектуальной недостаточностью таких «гУру» — непонимание КАК нужно давать учебную информацию!
Поясните пожалуйста для непонимающих..
Как правильно прописать стили между { } для тега @media screen and (min-width: 1440px) and (max-width: 1599px){ }
Покажите на примере, хотя бы для двух разрешений экрана, какой именно код нужно вставить в CSS файл?
Что скажете по разрешениям в 2019?
Я так понимаю все сильно изменилось, в 2019 экран с разрешением от 720 точек по ширине уже стал ширпотребом.
Хорошая статья, спасибо большое. Помогли!
Добрый день Артем!
Просчитал твою статью «Как сделать адаптивный сайт под все разрешения экрана».
Я не разработчик, я заказчик. Мне делают сайт. Дизанер нарисовал макет в PSD основной контейнер 1170px. Верстальщик создал сайт на чистом HTML ,как я просил. Но от выглядтт очень крупно, многие элементы дизайна срезало. И на разных мониторах вышлядит по разному. Верстальщик говорит, что делает адаптивный сайт, а для того чтобы сайт выглядел одинаково при разном разрешении, надо делать отдельные макеты для разных разрешений экранов, и для мобильной версии нужен свой макет. А ничего не пойму, что же такое адаптивный сайт тогда ? Разъясни пожалуйста как эксперт, третья сторона. Буду признателен за любой ответ. Спасибо
Здравствуйте, Александр. Адаптивный сайт не может выглядеть одинаково на разных разрешениях экрана. Размеры экрана ведь разные, для удобства просмотра и элементы должны отображаться по разному. Например, в интернет магазине на основной версии выводятся 4 колонки с товарами, но в мобильной версии будет корректнее использовать 2 или 1 колонку.
Можно сделать фиксированную ширину сайта, тогда он везде будет отображаться одинаково. Но это уже будет не адаптивный сайт и в мобильниках его нужно будет приближать пальцами
Спасибо за ответ Артем.
То есть, надо делать макеты под разные разрешения экрана, и отдельно мобильную версию, и прописывать экраны в код как показано у тебя в статье, так?
Не всегда обязательно всегда прям прорисовывать все макеты, если верстальщик здравого смысла придерживается. Но в идеале, конечно надо нарисовать макет для мобильной версии и по нему сверстать
Адаптивная верстка сайта под все разрешения экрана как раз искала . Хорошая подача материала.
Анна, рад стараться
спасибо вам за обзор, некоторые вещи я действительно не знал, а некоторым,таким как разрешение, не придавал значения, для меня это было очень полезно
Как раз занимаюсь сейчас созданием сайта и хорошо, что наткнулся на эту статью, будет полезна мне. Спасибо!
Хорошая статья , все четко и по делу . Буду рада . если выложите еще несколько уроков по работе с bootsrap .
Обязательно выложу уроки по адаптивной версте на bootstrap немного позже
Для себя взяла много нового из этой статьи. Спасибо за информацию.
Про bootsrap очень интересно, буду благодарен если выложите еще информацтю про этот адаптивный дизайн. Огромное спасибо.
Такие полезный информации знать очень хорошо .Спасибо вам что пишите такие информации!
Когда я только начинал делать сайты это была одной из таких сложных тем с которой я столкнулся. Статья очень полезная! Благодарю!
Виктор, согласен, тема не из легких. Но когда разберешься и работаешь с большим количеством проектов, делаешь уже на полуавтомате
Для меня информация полученная из этой статьи бесполезна по причине того что я «не в теме». Могу сказать лишь одно что написано все настолько подробно что грех не разобраться!
Ахаххх. Антон, спасибо за откровенность. Мне остается только пригласить вас «в тему»
Никогда не слышала об адаптивности сайта.Много полезного узнала.Обязательно сейчас попробую!
Сижу на море, верстаю новый сайт, увидел тебя по запросу «самые маленькие экраны для адаптивной верстки». Что ж, приятно увидеть коллег и друзей в ТОПе!
Илья, спасибо, действительно приятно
Можно ли из обычного сайта вставив эти коды сделать адаптивный?
Можно, если правильно настроить CSS файл. Но это не какие то волшебные коды, вставив которые всё автоматически адаптируется.