Матвей Земсков

Заметки веб-мастера

Воскресенье, 22 сентября 2013 16:37

Полезные сведения об адаптивной верстке

Оцените материал
(15 голосов)

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

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

  • Internet Explorer — Microsoft Internet Explorer Developer Toolbar (встроен в браузер, начиная с версии 8)
  • FirefoxFiresizer, (начиная с 16-ой версии «Инструменты» → «Веб-разработка» → «Адаптивный дизайн»)
  • Google ChromeWindows Resizer
  • SafariResizeMe

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

Кроме плагинов для браузеров, существуют онлайн-сервисы для проверки адаптивной верстки. Например, Responsinator.

► Как известно, важную роль при создании адаптивной верстки сайтов играют media queries (медиа запросы). Нужно помнить, что блоки с media queries в файле стилей помещают после всех основных CSS-правил.

► Вести разработку адаптивного сайта нужно с учетом принципа "mobile first" (сначала мобильные). Смысл этого принципа заключается в том, что сначала создается верстка для мобильных устройств с небольшими экранами. На таких устройствах макет состоит из одной колонки с основными элементами сайта: шапка, меню, основное содержимое, подвал. При увеличении размера экрана по ширине, элементы выстраиваются горизонтально так, как задумано в макете сайта для остальных устройств (мониторов ПК, ноутбуков и прочих устройств). Все это получается благодаря использованию media queries (медиа запросов).

► Следующий важный момент: чтобы браузеры мобильных устройств (Android и iOS) не сжимали веб-страницу под размер экрана, нужно использовать специальный meta-тег.

HTML

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

► В процессе верстки, нужно стараться, чтобы блок с основным содержимым страницы располагался в коде как можно выше. Например, у нас есть блок с контентом и блок с второстепенным содержимым (например, врезкой), который в макете должен располагаться слева от содержимого. В этом случае будет правильным в коде страницы сначала разместить блок с контентом, а затем врезку. Благодаря CSS-правилу float, блоки останутся на своих местах, как задумано в макете.

► Медиа-запросы – это мощный инструмент, применяемый в адаптивной верстке сайтов. Однако, используя только его, создать настоящий отзывчивый сайт не получится. Адаптивный сайт должен быть создан на основе «резинового» макета, в котором ширина блоков указывается в %, а размер шрифта в em.

В таблице приведены примеры медиа-запросов для разных разрешений экранов мобильных устройств. Данные по разрешениям взяты из статистики за 2013 год.

Разрешение экрана (px)Медиа-запрос
320×240 @media screen and (max-width: 352px){ … }
352×240
352×288
400×240 @media screen and (max-width: 480px){ … }
480×576
640×240 @media screen and (max-width: 720px){ … }
640×360
640×480
720×1280
800×480 @media screen and (max-width: 860px){ … }
800×600
854×480

На устройствах с бо́льшими разрешениями будет показана обычная версия сайта без визуальных преобразований. Однако, нужно учитывать при этом и максимальную ширину макета, чтобы сайт «прилично» смотрелся на широких мониторах - об этом читайте ниже.

Существует онлайн-инструмент, с помощью которого можно узнать какие media-queries сработают на вашем устройстве. Он называется MQtest.io и располагается по адресу: http://mqtest.io/

► Для преобразования пиксельных значений ширины фиксированных макетов в процентные применяется формула: ширина целевого элемента(px) / ширину контекста(px) = ширина %

► Значения ширины, полученные при вычислении по этой формуле, используются в CSS-правилах без округления. Например, у нас есть блок-контейнер (ширина - 960px) и в нем блок с навигацией (ширина - 200px): 200px/960px = 0,2083333333333333 (передвигаем запятую на 2 символа вправо) = 20.8333333 %

► Размер шрифта в адаптивных макетах указывается в em. Предварительно размер шрифта у всех элементов приводится к одному размеру. Этот размер по-умолчанию у всех браузеров равен 16px.

CSS

	*{
		font-size: 100%;
	}

► В процессе верстки адаптивного макета используются «резиновые» изображения. Такие изображения могут масштабироваться пропорционально макету.

CSS

	img{
		max-width: 100%; /* работает в современных браузерах и IE начиная с 7 версии */
        height: auto;
	}

При этом не нужно указывать значения ширины и высоты изображения в атрибутах тега <img />. Однако, чтобы изображения не увеличивались больше своего физического размера, нужно применить к ним следующее правила:

CSS

	img.someImg{
		width: 35.7142857%; /* изображение - 250px / контейнер - 700px */
		max-width: 250px;
	}

При использовании этого правила изображение не увеличиться при масштабировании больше своего физического размера.

► В идеале при разных размерах экрана должны загружаться разные по размеру изображения. Это необходимые меры для оптимизации времени загрузки страницы и объема трафика у посетителей, использующих мобильные устройства. Существует инструмент под названием Adaptive Images, который генерирует уменьшенные изображения на стороне сервера. Он не требует внесения изменений в разметку страницы. Для корректной работы этого инструмента требуется провести небольшие настройки в .htaccess и добавить на страницы с изображениями javaScript-код. При загрузке Adaptive Images в архиве имеется файл-инструкция по настройке.

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

Например, вы планируете разместить в шапке сайта логотип размером 150px на 150px. Для устройств с экранами с высоким разрешением, вам будет нужно создать изображение в 2 раза больше, а именно 300px на 300px. Причем, не нужно при создании нового файла устанавливать разрешение больше, чем 72 ppi. Дело в том, что на экранах мониторов и других устройств, изображения с разными разрешениями (например, 72 ppi и 300 ppi) будут выглядеть одинаково. При подключении этого фонового изображения, его необходимо масштабировать под размер блока с логотипом. Для этого используется CSS-правило backround-size. В нашем случае, его значение будет равно 150px.

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

CSS

@media all and (-webkit-min-device-pixel-ratio : 1.5) {
   #wrap header .logo{
      background-image: url("path/to/image@2x.png");
      background-size: 150px 150px;
   }
   #wrap header .logo:hover {
      background-image: url("path/to/image_hover@2x.png");
      background-size: 150px 150px;
   }
 }

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

► Существует полезный инструмент для загрузки альтернативных изображений с хорошим разрешением. Он называется Retina.js. Чтобы этот инструмент работал, нужно просто подключить файл retina.js в коде страницы. Во время загрузки страницы, скрипт будет проверять каждое изображение на наличие крупной версии изображения (в имени файла изображения с хорошим разрешением, должно присутствовать "@2x") и в случае если такое изображение есть, оно будет заменять обычное изображение. Кроме того, этот инструмент включает в себя LESS-код «примеси» (mixin), которая генерирует CSS-код для замены фоновых изображений.

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

HTML

<style> 
.buttonArea {
   margin: 50px;
   width: 250px;
}

.button {
	background: #7999ff;
	background: -webkit-linear-gradient(#7999ff 0%, #002c62 100%);
	background: linear-gradient(#7999ff 0%, #002c62 100%);
	border-radius: 60px;
	box-shadow: 1px 1px 4px #666;
	cursor: pointer;
	padding: 10px 40px;
	color: #fff;
	font-size: 20px;
	text-align: center;
	text-decoration: none;
	text-shadow: 1px 1px 2px #000;
}
</style> 
<div class="buttonArea"> 
	<a class="button"> Click Me</a> 
</div> 

Также нужно обращать внимание на размер элементов интерфейса сайта (например, ссылок постраничной навигации или кнопок в формах): на экранах мобильных устройств они не должны выглядеть мелкими, чтобы посетителям было удобно на них нажимать. Поэтому в блоках CSS-правил для устройств с шириной экрана меньше 600px, размер указанных элементов необходимо увеличивать.

► Для показа на страницах различных мелких значков, рекомендуется использовать вместо графических изображений иконочные шрифты. Сейчас это довольно популярная методика. Шрифты отлично масштабируются, имеют небольшой размер, поэтому быстро загружаются. Иконочные шрифты поддерживаются практически всеми браузерами. Ознакомиться с одним из них, вы можете здесь: http://www.fontsquirrel.com/fonts/modern-pictograms.

► Чтобы шаблон сайта «не разъезжался» на широких мониторах больше определенной ширины также нужно использовать CSS-правило max-width, применив его к контейнеру.

CSS

	#wrap{
		width:96%;
		margin: 0 auto;
		max-width: 1280px;
	    min-height: 100%;
	}
Прочитано 30492 раз
Добавить комментарий

Комментарии   

 
0 # Максим 30.07.2014 10:44
Хорошая статья.
Очень помого meta-тег "viewport"
Спасибо большое. ;-)
Ответить | Ответить с цитатой | Цитировать
 
 
+4 # Матвей 31.07.2014 11:31
Пожалуйста :)
Ответить | Ответить с цитатой | Цитировать
 
 
0 # Профессор 11.10.2014 00:51
:lol: Толково написано! Молодец! И конечно же спасибо)
Ответить | Ответить с цитатой | Цитировать
 
 
0 # Матвей 14.10.2014 19:36
Пожалуйста, рад, что информация оказалась полезной!
Ответить | Ответить с цитатой | Цитировать
 
 
+1 # dav 05.12.2014 00:40
Спасибо!
Отличная статья
Ответить | Ответить с цитатой | Цитировать
 
 
+1 # Посетитель 19.01.2015 11:38
Очень полезно! Спасибо!
Ответить | Ответить с цитатой | Цитировать
 
 
0 # Натиг 22.01.2016 22:37
Превосходная статья!

Выражаю огромное уважение и благодарность автору!!!!

Этой статьей Вы мне очень помогли!
Ответить | Ответить с цитатой | Цитировать
 
Мои услуги

Предлагаю следующие услуги:

  • Верстка шаблона сайта из дизайн-макета для CMS «1С-Битрикс Управление сайтом» и CMS “Joomla”
  • Создание форм различной сложности (обратная связь, анкеты и тп) для указанных CMS
  • Настройка и кастомизация компонентов и модулей для указанных CMS
  • Доработка модулей и компонентов для указанных CMS, добавление нестандартного функционала
  • Разработка лендингов (landing-pages)

По все вопросам обращайтесь через форму обратной связи

Скачать

Предлагаю вашему вниманию: