CSS 3 медиа запросы - httpdoc.ru

CSS3 Медиа запросы

Медиа - запросы очень полезно , если вы хотите , чтобы настроить свой веб - сайт для различных устройств , такие как mobile phones , tablets , desktops и т.д. без каких - либо изменений в наценках. Для разных размеров экрана указаны разные свойства CSS, и одновременно будет работать только тот CSS, который определен для текущего размера экрана. Например, на мобильном устройстве правила таблицы стилей CSS, написанные в рамках медиа-запроса мобильного устройства, будут реализованы, и, следовательно, веб-сайт будет настроен таким образом.

Медиа-запросы - это логические выражения, результатом которых может быть истина или ложь. Если данный запрос окажется истинным, тогда код (связанная таблица стилей) внутри блока запроса будет выполняться, иначе - нет. Это то же самое, что и if инструкция проверки условия . Попытайтесь понять, как использовать медиа-запросы на веб-странице из приведенных ниже примеров, они очень важны, если вы хотите сделать веб-сайт совместимым со всеми устройствами с разным размером экрана.

Рекомендуемые функции мультимедиа

Ниже приведены некоторые функции, к которым вы можете применять медиа-запросы. Эти функции будут проверены в соответствии с медиа-запросом, и если они вернутся к истине, произойдут изменения. В приведенной ниже таблице столбец Min / Max сообщит вам, можно ли использовать атрибуты Min / Max с этой функцией внутри медиа-запроса или нет, например min-height, max-resolution и т. Д.

Характерная черта Ценить Мин Макс Описание
соотношение сторон устройства целое число да Он дает условие для соотношения сторон устройства.
высота устройства пиксели да Он дает условие для определенной высоты устройства вывода.
ширина устройства пиксели да Он дает условие для конкретной ширины устройства вывода.
сетка целое число нет Он используется для устройства на основе сетки.
рост пиксели да Он задает условие для определенной высоты поверхности рендеринга.
разрешающая способность DPI / DPCM да Он дает условие разрешения экрана дисплея.
ширина пиксели да Он задает условие ширины поверхности рендеринга.

Пример медиа-запросов

Один из основных способов реализации медиа-запросов на веб-странице - записать их в таблице стилей CSS в альтернативном разделе.

В следующем примере цвет фона изменяется на, blueviolet если область просмотра имеет ширину 550 пикселей или шире (если область просмотра меньше 550 пикселей, цвет фона будет таким lightgreen ).

Пример
<!DOCTYPE html>
<html lang="en">
<head>
  <title> CSS 3 Media Queries </title> 
  <meta charset="UTF-8">  
<style>
body {
  background-color: lightgreen;
}

@media screen and (min-width: 550px) {
body {
  background-color: blueviolet;
  }
}
</style>
</head>
<body>

<h1>Resize the browser window to see the effect!</h1>
<p>The media query will only apply if the media type is screen and the viewport is 550px wide or wider.</p>

</body>
</html>

Выход

CSS 3 Media Queries

Измените размер окна браузера, чтобы увидеть эффект!

Медиа-запрос будет применяться только в том случае, если тип мультимедиа - экран, а область просмотра имеет ширину 550 пикселей или шире.

CSS 3 Media Queries

Измените размер окна браузера, чтобы увидеть эффект!

Медиа-запрос будет применяться только в том случае, если тип мультимедиа - экран, а область просмотра имеет ширину 550 пикселей или шире.


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

Пример
<!DOCTYPE html>
<html lang="en">
<head>
  <title> CSS 3 Media Queries </title> 
  <meta charset="UTF-8">  
<style>
.wrapper {overflow: auto;}
#sidebar {
  float: none;
  width: auto;
}

#menuitem {
  margin: 0;
  padding: 0;
  text-align:center;
}

.menu {
  background: lightgray;
  border: 1px solid blueviolet;
  list-style-type: none;
  margin: 4px;
  padding: 2px;
}

@media screen and (min-width: 550px) {
  #sidebar {width: 200px; float: left;}
  #main {margin-left: 216px; margin-top: -25px;}
}
</style>
</head>
<body>

<div class="wrapper">
  <div id="sidebar">
    <ul id="menuitem">
      <li class="menu">Menu 1</li>
      <li class="menu">Menu 2</li>
      <li class="menu">Menu 3</li>
      <li class="menu">Menu 4</li>
      <li class="menu">Menu 5</li>
    </ul>
  </div>
  
  <div id="main">
    <h1>Resize the browser window to see the effect!</h1>
  </div>
</div>

</body>
</html>

Выход

CSS 3 Media Queries

Измените размер окна браузера, чтобы увидеть эффект!

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