Last active
May 9, 2018 14:14
-
-
Save cokfx/1afd4eb6c27522b79807cb8828a2de6c to your computer and use it in GitHub Desktop.
Media Query
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| https://itchief.ru/lessons/html-and-css/css-media-queries | |
| // например, проверим, соответствует ли указанный медиа запрос (screen and (max-width: 543px)) устройству | |
| // результат проверки можно получить с помощью свойства matches (true или false) | |
| if (window.matchMedia('screen and (max-width: 543px)').matches) { | |
| // ... действия, если устройство отвечает медиа запросу | |
| } else { | |
| // ... действия, если устройство не соответствует значениям медиа запроса | |
| } | |
| Поддержка медиа запросов в браузере IE8 осуществляется посредством подключения к странице скрипта respond.js: | |
| <!-- Respond.js для IE8 (media queries) --> | |
| <!-- ПРЕДУПРЕЖДЕНИЕ: Respond.js не будет работать при просмотре страницы через file:// --> | |
| <!--[if lt IE 9]> | |
| <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> | |
| <![endif]--> | |
| Но при создании адаптивных веб-страниц также необходимо обратить внимание на метатег viewport | |
| <meta name="viewport" content="width=device-width, initial-scale=1"> | |
| and - требует обязательного выполнения всех указанных условий. | |
| Например: | |
| @media screen and (min-width: 1200px) and (orientation: landscape) { /* Стили CSS ... */ } | |
| Стили CSS в вышеприведённом примере выполняться только в том случае, если страница будет выводиться на устройство с экраном, иметь область просмотра более 1200 пикселей в ширину, а также находиться в альбомном режиме. | |
| orientation - функция, которая проверяет то, в каком режиме (portrait или landscape) отображается страница. | |
| Пример, в котором в зависимости от ориентации экрана, отображается одна или другая картинка: | |
| /* landscape (альбомный) - это режим, в котором наоборот ширина viewport больше её высоты */ | |
| @media (orientation: landscape) { | |
| #background-image { background: url(image1.png) no-repeat; } | |
| } | |
| /* portrait (портретный) - это режим, в котором высота viewport больше ширины */ | |
| @media (orientation: portrait) { | |
| #background-image { background: url(image2.png) no-repeat; } | |
| } | |
| <!-- Стили xs-styles.css будут подсоединены к странице только на устройствах c шириной меньше 543 пикселей (включительно) --> | |
| <link rel="stylesheet" media="screen and (max-width: 543px)" href="styles-xs.css"> | |
| /* импортирование стилей из файла styles-xs.css в текущий файл стилей только для устройств, которые предоставляют веб-странице viewport, имеющий ширину 543 пикселя или меньше. */ | |
| @import url(styles-xs.css) (max-width: 543px); | |
| /* Large desktops and laptops */ | |
| media (min-width: 1200px) { | |
| } | |
| /* Portrait tablets and medium desktops */ | |
| media (min-width: 992px) and (max-width: 1199px) { | |
| } | |
| /* Portrait tablets and small desktops */ | |
| media (min-width: 768px) and (max-width: 991px) { | |
| } | |
| /* Landscape phones and portrait tablets */ | |
| media (max-width: 767px) { | |
| } | |
| /* Landscape phones and smaller */ | |
| media (max-width: 480px) { | |
| } | |
| По надобности дописую промежуточные разрешения, если вдруг по дизайну что то падает на 650px, тогда дописую: | |
| media (max-width: 650) { | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment