Site icon Vavik96

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

admin

Ниже приведены полезные приемы, которые пригодятся вам при проектировании адаптивного (или, что более верно, отзывчивого) сайта. В статье затронуты следующие важные нюансы полезные для адаптивного сайта: медиазапросы (характеристики устройств), гибкие изображения, поведение полей и отступов, дополнительно говорится о высоте, описывается как использовать медиазапросы в браузерах от IE(6-8), приведено краткое описание использование мета-тега viewport.



Медиазапросы и характеристики устройств

Характеристики устройств для медиазапросов

Характеристика Описание есть или нет префиксы
max и min
width ширина области просмотра
(включая скролл)		 +
height height области просмотра +
device-width ширина всего экрана +
device-height высота экрана +
orientation Значения: portrait или landscape –
aspect-ratio Отношение ширины области просмотра к ее высоте (например: 16:9) +
device-aspect-ratio Отношение ширины экрана к его высоте (например: 16:9) +
resolution Проверяем плотность пикселей в устройстве.
Например, screen and (resolution:72dpi)		 +

Примеры использования медиазапросов

CSS

@media screen and (max-width: 768px), screen and (min-width: 1200px) {
    .....
}

@media screen and (max-width: 768px) {
    .....
}

@media screen and (max-width: 520px) {
    .....
}

@media screen and (max-width: 480px) {
    .....
}

@media screen and (max-width: 360px) {
    .....
}

 @media screen and (min-width: 768px) {
    .....
}

@media screen and (min-width: 1200px) {
    .....
}

 

Гибкие изображения

Все достаточно просто: при max-width: 100% изображения не выйдет за пределы ширины элемента-родителя.

Поля (margin) и отступы (padding)

И поля (margin) и отступы (padding) элемента, если вы задаете их в процентах, рассчитываются относительно ширины элемента контейнера.

Высота

Высота элемента, заданная в процентах, рассчитывается относительно высоты элемента-родителя (кроме этого, если высота элемента-предка, от которого идет расчет, равна auto, то и высота самого элемента станет равной auto независимо от указанных процентов).
Как вы помните, для высоты значение по умолчанию – auto.

Поддержка медиазапросов в браузере IE8 и ниже

Для поддержки медиазапросов в Internet Explorer м необходимо специальное решение. Ниже описывается одно из таких решений под названием respond.js, которое представляет собой т.н. polyfill-скрипт на базе JavaScript. Ссылка на github: Respond




Ссылку на respond.js поставьте после всех css файлов.

Мета-тег viewport

width=device-width

Назначив мета-тегу viewport значение device-width, мы говорим браузеру, что ширина области просмотра равняется ширине этого устройства, а не стандартной ширине в 980px, как он может предполагать по умолчанию.
Или другими словами: по умолчанию, Safari на iPhone отобразит вашу страницу так же как браузер на большом компьютерном экране шириной 980 пикселов. Затем он отмасштабирует содержимое так, чтобы оно умещалось на маленьком экране.

Следующий вариант определения области просмотра определяет ширину страницы и задает начальный масштаб:

HTML

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

 

HTML

<meta name="viewport" content="width=device-width" />

 

Этот атрибут говорит браузеру, что в качестве ширины окна просмотра надо использовать ширину экрана, а не 980px, заданных по умолчанию.

Основные параметры для мета-тега viewport

Атрибут Значение Описание
width (от 200px — 10,000px)
или константа device-width.		 Определяет ширину области просмотра viewport
Если ширине не указана,
  • в мобильном Safari устанавливается значение 980px,
  • в Opera — 850px,
  • в Android WebKit — 800px,
  • а в IE — 974px.
height (от 223px до 10,000px)
или константа deviceheight		 Определяет высоту области просмотра viewport (необязательный атрибут)
initial-scale Число с точкой (от 0.1 до 10).
Значение 1.0 — не масштабировать		 Определяет начальный масштаб страницы. Чем больше число, тем выше масштаб.
user-scalable no или yes Определяет, может ли пользователь изменять масштаб в окне.
В мобильном safari по умолчанию стоит yes
minimum-scale Число с точкой (от 0.1 до 10).
1.0 — не масштабировать		 Определяет минимальный масштаб области просмотра viewport. В мобильном safari по умолчанию стоит 0.25.
maximum-scale Число с точкой (от 0.1 до 10).
1.0 — не масштабировать		 Определяет максимальный масштаб области просмотра viewport. В мобильном safari по умолчанию стоит 1.6.





Источник

Exit mobile version