Медиа-запросы CSS

Верстка сайта для мобильных устройств или ноутбуков с нестандартным разрешением, называется адаптивной. То есть сайт адаптируется (приспосабливается) для корректного отображения на текущем экране

Многие путают адаптивную верстку и резиновую верстку. На самом деле это совсем не так. Резиновая верстка просто сжимается и растягивается при изменении экрана, а адаптивная верстка может перестраиваться полностью, вплоть до изменения структуры. Воплощается это при помощи такого инструмента CSS, как медиа-запросы

Итат, как же работают медиа-запросы. Допустим у нас есть код запроса:


	@media screen and (max-width:1024px) {
		body {
			background-color:#cc0000;
		}
	}
	

Данный код говорит браузеру о том, что для экранов с шириной менее 1024px фоновый цвет body примет значение #cc0000

Конечно же медиа запросы можно ориентировать необязательно на ширину экрана

Стиль для цветных устройств


	@media all and (color) { ... }
	

Для указания отрицания условия используется логическое not

Стиль для всех устройств кроме смартфонов


	@media all and (not handheld) { ... }
	

Чтобы доконца разобраться с медиа-запросами, пропишите следующий код и немного поэкспериментируйте с ним


<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Максимальная ширина страницы</title>
  <style>
   body { background: #ссс; }
   @media screen and (max-width: 600px) {
     body { background: #000; }
   }
  </style>
</head>
 <body>
  <p>Пока ширина страницы больше 600px цвет экрана #ccc</p>
 </body>
</html>

Поделитесь статьей со своими друзьями