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

Адаптивная верстка сайта для всех разрешений экрана

Адаптивная верстка — это неотъемлемая часть современной web-разработки. В этом случае дизайн страницы делается так, чтобы подстраиваться под любой экран. 10 лет назад, когда mobile-friendly еще не был придуман, верстальщикам приходилось делать сразу несколько web-страниц, чтобы сайт правильно отображался на десктопе, телефонах и планшетах. К счастью, все это давно в прошлом.

Остановись на одном проверенном сервисе — dont.farm

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

Макеты бывают разными по типу отображения.

  • Фиксированный или статический. Дизайн страницы создается под один размер. Все четко, конкретно и просто, но есть недостаток — сайт нормально откроется не на всех экранах, а только на мониторах с заранее известным скрином. К примеру, на смартфоне веб-страница не влезет в браузерное окно.
  • Резиновый. Более сложный вариант для реализации, чем фиксированная верстка. Основные блоки макета сжимаются, пока не встанут под разрешение конкретного девайса. Если экран чересчур маленький, то блоки располагаются друг под другом — в виде ленты.
  • Адаптивный. Самый передовой макет — страница подстраивается под каждого пользователя, независимо от используемого им устройства. Реализуется несколькими способами — смещением, перестройкой блоков, изменением дизайна элементов страницы и т. д.

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

  1. Табличная верстка устарела, хотя элемент table поддерживается HTML5. Поэтому некоторые программисты продолжают использовать табличные данные.
  2. Блочная верстка представляет собой каркас, на который через CSS накладывается тот или иной шаблон. Особое значение здесь имеют теги: <div>, <header>, <footer>, <nav> и др.

Как сделать адаптивную верстку сайта

Чтобы сделать адаптивную верстку, надо знать все применяемые типы. Это позволит сочетать их, если в этом появится необходимость. К примеру, совместить резиновый и адаптивный дизайн или таблицы с блоками.

Делается современная адаптивная верстка комбинированием двух технологий.

  1. HTML5. Нужна для разметки элементов на сайте.
  2. CSS3. Каскадные стили, предназначенные для декоративного оформления веб-страниц. При помощи CSS также задаются единицы измерения главных блоков сайта — хедера, боди, футера.

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

Специалисты называют такую адаптивную верстку самой правильной с технической точки зрения. К тому же, через CSS сделать это проще. Вот, например, как создать шапку или любой другой элемент. В этом случае находим хорошее изображение и задаем ему свойство растягиваться по всему экрану. По правилам HTML5 — просто упаковываем картинку в div.

упаковываем картинку в div

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

задаем width img

Однако на этом верстка не заканчивается, ведь нужно задать предельную ширину для max/min разрешения. В противном случае при изменении типа экрана, изображение потеряет качество.

разрешение

Добавляем в код автоматическое свойство margin для внешнего отступа на всех 4-х сторонах элемента. Задаем width в 1000px, максимальную ширину элемента max-width в 90% и минимальную ширину в 50px.

задаем параметры

Тем самым грани контейнера вместе с изображением будут меняться только в пределах 500-1000px.

<div width=

Усложняем задачу — сделаем мини-галерею. Принципы верстки остаются те же. Делаем такой же контейнер, упакованный в <div >

В CSS прописываем то же, что и в первом случае.

прописываем CSS

Таким образом, каждое изображение будет работать по правилам контейнера, и изменять свой размер в зависимости от экрана пользователя. Для улучшения качества между картинками ставится отступ в 1%.

работа по правилам

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

Верстаем адаптивный сайт

Используя такой подход, удастся сверстать сайт целиком. По сути, web-страница состоит из 3-х основных элементов — хедера, центрального блока с сайдбарами и подвала. Условно можно задать контрольные точки breakpoints для:

  • скрывания шапки;
  • помещения сайдбара под контейнер;
  • оптимизации элементов верхней части страницы.

Должна получиться такая вот страничка.

итоговая страница

Теперь нужно доработать раздел <head> — добавить обязательные файлы (библиотеку джава, ссылки на применяемые шрифты). Чтобы не прописывать префиксы Chrome, Safari и т. д, добавляем плагин PrefixFree.

доработка раздела <head>

Также нужно разместить в <header> необходимые элементы — лого, верхнее меню, поиск.

добавить элементы в <header>

Блок с оглавлением статьи обертываем в <article>.

блок с оглавлением

Для боковой колонки прописываем <aside> — размещаем рубрики и другие необходимые элементы. В футер можно поместить значок копирайта, социальные кнопки и контактные данные.

боковая колонка

Отдельная работа должна проводиться по медиа-запросам. Они помогут улучшить отображение сайта на экранах с минимальным разрешением. Другими словами, это правила адаптации для каждой возможной ширины экрана. А их бывает, как известно, несколько — вот эти самые важные. Рекомендуется все их прописать через @media screen и внести правила элементов для каждого разрешения.

правила по разрешениям

Также особое внимание в адаптивной верстке уделяется размеру шрифта и строк. Многочисленные исследования последних лет доказали, что большинство современных читателей не фокусируются на конкретном предложении или слове, а просматривают информацию на web-странице саккадами или вкруговую. Поэтому используем короткие строки, которые лучше воспринимаются посетителями. В интернете хорошо заходят строки, размером 40-50 символов.

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

Что менять в HTML и CSS коде?

Первым делом нужно вставить между тегами <head></head> следующий код.

вставить код между тегами

А также прописать в CSS файле строку с правилом (медиа-запросом) для мобильных экранов (1440-1599px).

прописать CSS

Вообще, в адаптивной верстке все завязано на единицах измерения. К примеру, ширина вашего сайта составляет 1000 пикселей. Если его откроют со смартфона, то появится горизонтальная прокрутка, так как по ширине страница не влезет. Указывая в коде width 100%, мы подстраиваем сайт под маленький экран. А чтобы текст не растянулся на широкоформатном мониторе (более 1000px) и оставался адаптивным, прописываем в CSS-код еще и максимальное значение.

было/стало

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

Bootstrap

Если вы не очень дружите с кодом, и сверстать сайт в одиночку не сможете, то есть уникальное решение — использовать трехъязычный фреймворк Bootstrap. Здесь изначально прописаны все стили для адаптации различных элементов сайта — кнопок, таблиц и блоков. Ваша задача лишь правильно присвоить классы к элементам. Официальную и последнюю версию можно скачать отсюда.

Что включает Бутстрап:

  • адаптивную сеточную систему;
  • переменные и миксины Sass;
  • готовые компоненты;
  • собственную библиотеку иконок SVG;
  • мощные плагины JS;
  • премиальные темы и многое другое.

Bootstrap подходит для нескольких CMS — WP, Joomla и Opencart.

Проверка адаптивности сайта

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

  • вводим название сайта в поисковую строку сервиса;
  • нажимаем Enter;
  • проверяем, как отображается ресурс на мобильных устройствах, планшетах, компьютерах всех известных фирм.

Сервис очень точный, а самое главное — целиком бесплатный.

Заключение

Адаптивная верстка позволяет сэкономить и не делать несколько дизайнов под каждый скрин — достаточно прописать правила для отдельных частей блоков. Сайты с таким дизайном получают одобрение и со стороны поисковиков. Например, Гугл официально заявил, что отдает предпочтение ресурсам, адаптированным под mobile-first.

Краткое резюме по статье

Это наиболее популярные устройства, с которых заходят пользователи. Смартфон (320-480px), планшет (600-1024 px), ноутбуки и компьютеры (1280 px и более).

Выше был приведен обзор сервиса Screenfly. Есть и другие инструменты — Google Mobile Friendly, Iloveadaptive, Adaptivator.

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

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

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

Хотя мобильная версия и создается специально для мини-экранов и максимально оптимизирована под эти параметры, она уступает адаптивной верстке по нескольким пунктам. Во-первых, усложняется администрирование — чтобы поменять цены или добавить какую-то кнопку, надо вносить изменения и там и здесь. Во-вторых, не решается вопрос отображения на экранах с более широким разрешением.

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

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

Приветствую вас, случайные посетители и постоянные читатели блога Royal-Site.ru!

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

Краткий план статьи:

Как достичь адаптивности? Для этого есть разные способы. Кто то использует javascript, кто то что то еще. Но я считаю, что самый простой и правильный способ — это адаптивная верстка сайта с помощью CSS.

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

Как сделать адаптивную верстку сайта

Во-первых, если вы взялись верстать адаптивный дизайн сайта, между тегами <head></head> вставьте следующий код:

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

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

Как так? Я стал перепроверять все стили, правильно ли я прописал классы, в итоге дошел до того, что через javascript проверил ширину окна браузера в px. Я был в шоке. При проверке на ноутбуке я получил результат 1024px, и примерно такой же результат я получил открыв сайт на смартфоне!

Но ведь этого не может быть!

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

Из-за своей глупости и некомпетентности я потерял очень много времени. Зато теперь запомнил навсегда))).

Адаптивная верстка CSS media запросы

Чтобы сделать адаптивную верстку сайта с помощью CSS, необходимо использовать media запросы.

Это как? Да, очень просто. В CSS файле нужно прописать запросы типа:

Это код означает, что стили заключенные между « » будут работать для экранов с минимальной шириной 1440px и максимальной 1599px.

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

Самые важные разрешения экрана, при адаптивной верстке

  • 320 px — Мобильные устройства (портретная ориентация);
  • 480 px — Мобильные устройства (альбомная ориентация);
  • 600 px — Небольшие планшеты;
  • 768 px — Планшеты (портретная ориентация);
  • 1024 px — Планшеты (альбомная ориентация)/Нетбуки;
  • 1280 px и более — PC.

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

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

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

Для начала, качайте свежую версию bootstrap и подключите его к своему сайту. Учтите, что подключение стилей и скриптов к wordpress имеет свои особенности.

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

Например, такая конструкция позволит выделить один широкий блок для контента шириной в 8 частей и один узкий для сайдбара шириной в 4 части экрана:

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

Также можно регулировать отступ блок от края, опять же, на нужное количество частей. Например такая конструкция:

Будет создан блок шириной в 10 частей с отступом слева в 1 часть экрана.

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

В будущем я планирую выложить несколько уроков по работе с bootsrap. Поэтому советую подписаться на обновления блога, чтобы не упустить этот момент.

Проверка адаптивности сайта

Но возникает вопрос: как проверять адаптивность сайта? Вот прописали вы media запросы в CSS, подключили bootstrap и используете нужные классы. А как вы проверите, что на всех разрешениях экрана сайт правильно адаптируется.

Я для этих целей рекомендую использовать следующий онлайн сервис —http://quirktools.com/screenfly/. Просто введите URL страницы для проверки и переключайте разрешения экранов в панели управления.

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

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

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

Оптимизация сайта для мобильных и больших дисплеев

Основные разрешения экранов, посещающие сайт, статистика за месяц

Скриншот сайта на разных экранах

Скрин сайта на разрешении дисплеев 320px 800px 1280px 1920px

Для отображения сайта пиксель в пиксель

Верстка сайта под разные экраны

То-есть я сделал резиновую верстку сайту, и подкорректировал указав некоторые css правила для отдельных разрешений экрана. В итоге сайт стал выглядеть вот так.

Скриншоты сайта е ветерок ру

Скриншоты в размерах 320px 640px 800px 1024px 1280px 1920px

«>

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

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