Адаптивный веб-дизайн

Материал из Энциклопедия о программировании
Перейти к: навигация, поиск

Адаптивный веб-дизайн — дизайн веб-страниц, который адаптируется под устройство вывода.

Чаще всего под устройством вывода понимается экран (монитор) и адаптирование под его разрешение (обычно имеют ввиду ширину), хотя «адаптивный веб-дизайн» включает в себя куда более общую концепцию адаптирования.

Вся суть адаптивного веб-дизайна заключается в том, что у одного и того же HTML кода есть несколько CSS правил, которые применяются в разных условиях меняя элемент по ситуации. Смена CSS правил происходит за счёт CSS media запросов, которые реализуются двумя вариантами:

  1. В виде применения отдельного CSS файла к HTML документу при выполнении CSS media условия, т.е. подключаются все файлы, но применяются только подходящие.
  2. В виде CSS media запросов описанных в CSS файлах.

Примеры применения CSS файла к HTML документу при выполнении CSS media условия

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>@media</title>
  <link media="print, handheld" rel="stylesheet" href="print.css">
  <link media="screen" rel="stylesheet" href="main.css">
 </head>
 <body>
  <p>...</p>
 </body>
</html>

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

Пример 2

<link rel="stylesheet" href="/css/minimum.css" type="text/css" media="handheld, all" />
<link rel="stylesheet" href="/css/screen.css" type="text/css" media="print, screen and (min-width: 481px)">
<link rel="stylesheet" href="/css/minimum2.css" type="text/css" media="handheld, only screen and (max-device-width: 480px)" />
<link rel="stylesheet" href="/css/print.css" type="text/css" media="print" />

Примеры CSS media запросов описываемых в CSS файлах

@media screen and (max-width: 480px){
	header::after {
		content: 'Это выведется после тега header, когда устройством отображения будем монитор и максимальный шириной будет 480px';
	}
	#grid::before {
		content: 'Это выведется перед элементом с id grid, когда устройством отображения будем монитор и максимальный шириной будет 480px';
	}
}

@media screen and (min-width: 481px) and (max-width: 768px) {
	#grid[data-columns]::before {
		content: '2 .column.size-1of2';
	}
}
@media screen and (min-width: 769px) {
	#grid[data-columns]::before {
		content: '3 .column.size-1of3';
	}
}

Ссылки

Шаблон:HTML Шаблон:CSS Шаблон:Web-дизайн Шаблон:Адаптивный дизайн