Как сделать адаптивный сайт под все разрешения экрана

Адаптивная верстка сайта

Приветствую вас, случайные посетители и постоянные читатели блога 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 страницы для проверки и переключайте разрешения экранов в панели управления.

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

 

Ну как вам статья? Все понятно? Если нет, пишите в комментарии, будем разбираться вместе.

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

С уважением,
Артем Губтор.

Оцените статью
( 43 оценки, среднее 2.23 из 5 )
Поделиться с друзьями
Добавить комментарий для Артем Губтор Отменить ответ

13 − 4 =

  1. аааа

    Это вторая статья которую прочитал и понял, что интернет это сборище «рекламщиков» и «долботиктокозвонов»(второе не про вас).

    Ответить
  2. Татка

    Не информативная инфо. Рассчитана на тех, кто и так в теме… Когда же всякие «гУру» начнут понимать, что за советами лезут новички и те, кто впервые сталкивается с проблемой? Почему не дать тупо пример полной! страницы html и к ней полная страница SCC?!!! Почему нужно текстом писать в режиме устного общения? Попахивает интеллектуальной недостаточностью таких «гУру» — непонимание КАК нужно давать учебную информацию!

    Ответить
  3. Николай

    Поясните пожалуйста для непонимающих..
    Как правильно прописать стили между { } для тега @media screen and (min-width: 1440px) and (max-width: 1599px){ }
    Покажите на примере, хотя бы для двух разрешений экрана, какой именно код нужно вставить в CSS файл?

    Ответить
  4. Игорь

    Что скажете по разрешениям в 2019?
    Я так понимаю все сильно изменилось, в 2019 экран с разрешением от 720 точек по ширине уже стал ширпотребом.

    Ответить
  5. Валерий

    Хорошая статья, спасибо большое. Помогли!

    Ответить
  6. АЛЕКСАНДР

    Добрый день Артем!
    Просчитал твою статью «Как сделать адаптивный сайт под все разрешения экрана».
    Я не разработчик, я заказчик. Мне делают сайт. Дизанер нарисовал макет в PSD основной контейнер 1170px. Верстальщик создал сайт на чистом HTML ,как я просил. Но от выглядтт очень крупно, многие элементы дизайна срезало. И на разных мониторах вышлядит по разному. Верстальщик говорит, что делает адаптивный сайт, а для того чтобы сайт выглядел одинаково при разном разрешении, надо делать отдельные макеты для разных разрешений экранов, и для мобильной версии нужен свой макет. А ничего не пойму, что же такое адаптивный сайт тогда ? Разъясни пожалуйста как эксперт, третья сторона. Буду признателен за любой ответ. Спасибо

    Ответить
    1. Артем Губтор автор

      Здравствуйте, Александр. Адаптивный сайт не может выглядеть одинаково на разных разрешениях экрана. Размеры экрана ведь разные, для удобства просмотра и элементы должны отображаться по разному. Например, в интернет магазине на основной версии выводятся 4 колонки с товарами, но в мобильной версии будет корректнее использовать 2 или 1 колонку.

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

      Ответить
      1. АЛЕКСАНДР

        Спасибо за ответ Артем.
        То есть, надо делать макеты под разные разрешения экрана, и отдельно мобильную версию, и прописывать экраны в код как показано у тебя в статье, так?

        Ответить
        1. Артем Губтор автор

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

  7. Анна

    Адаптивная верстка сайта под все разрешения экрана как раз искала . Хорошая подача материала.

    Ответить
    1. Артем Губтор автор

      Анна, рад стараться

      Ответить
  8. ddt151

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

    Ответить
  9. Иван

    Как раз занимаюсь сейчас созданием сайта и хорошо, что наткнулся на эту статью, будет полезна мне. Спасибо!

    Ответить
  10. Анжела

    Хорошая статья , все четко и по делу . Буду рада . если выложите еще несколько уроков по работе с bootsrap .

    Ответить
    1. Артем Губтор автор

      Обязательно выложу уроки по адаптивной версте на bootstrap немного позже

      Ответить
  11. Елена Юрьевна

    Для себя взяла много нового из этой статьи. Спасибо за информацию.

    Ответить
  12. Михаил Морозов

    Про bootsrap очень интересно, буду благодарен если выложите еще информацтю про этот адаптивный дизайн. Огромное спасибо.

    Ответить
  13. EMIN

    Такие полезный информации знать очень хорошо .Спасибо вам что пишите такие информации!

    Ответить
  14. Виктор Зум

    Когда я только начинал делать сайты это была одной из таких сложных тем с которой я столкнулся. Статья очень полезная! Благодарю!

    Ответить
    1. Артем Губтор автор

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

      Ответить
  15. Антон

    Для меня информация полученная из этой статьи бесполезна по причине того что я «не в теме». Могу сказать лишь одно что написано все настолько подробно что грех не разобраться!

    Ответить
    1. Артем Губтор автор

      Ахаххх. Антон, спасибо за откровенность. Мне остается только пригласить вас «в тему»

      Ответить
  16. Илона

    Никогда не слышала об адаптивности сайта.Много полезного узнала.Обязательно сейчас попробую!

    Ответить
  17. Илья

    Сижу на море, верстаю новый сайт, увидел тебя по запросу «самые маленькие экраны для адаптивной верстки». Что ж, приятно увидеть коллег и друзей в ТОПе!

    Ответить
    1. Артем Губтор автор

      Илья, спасибо, действительно приятно

      Ответить
  18. Петр

    Можно ли из обычного сайта вставив эти коды сделать адаптивный?

    Ответить
    1. Артем Губтор автор

      Можно, если правильно настроить CSS файл. Но это не какие то волшебные коды, вставив которые всё автоматически адаптируется.

      Ответить