CSS. Урок 14 Медіазапити

@media

Сучасний сайт має відображатися на будь-якому пристрої коректно. Одна з технологій, яка дозволяє це зробити - це медіазапити

Формат запиту

@media тип екрану { css правила }

Медіазапит дозволяє прив'язати css правила до певних характеристик дісплея.

Приклад №1 для комп'ютера, в якому при ширини вікна браузера меньше 900px, колір вікна Moccasin, а при ширині більше 900px, колір вікна Navy

file css
@media (max-width : 900px)
{
      body {
      background:Moccasin;
      color:black;
      }
}

@media (min-width : 901px)
{
      body {
      background:Navy;
      color:white;
     }
}

file html
<html>
<head>
<link rel="stylesheet" href="file.css">
</head>
<body>
<h4>Приклад медіазапиту </h4>
</body>
</html>

Якщо Ви переглядаєте приклад на смартфоні, то у Вас не буде можливості змінювати ширину вікна. В такому разі Вам пропонується інший приклад, в якому колір вікна залежиь від орієнтації екрана.

Приклад №2 для смартфонов та планшетів , в якому якщо орієнтація книжкова(portrait), тоді тло коліру Moccasin, а якщо орієнтація альбомна(landscape), колір - Navy

file css
@media (orientation: portrait)
{
      body {
      background-color:Moccasin;
      color:black;
      }
}
@media (orientation: landscape)
{
      body {
      background-color:Navy;
      color:white;
      }
}


file html
<html>
<head>
<link rel="stylesheet" href="file.css">
</head>
<body>
<h4>Приклад медіазапиту </h4>
</body>
</html>

Список стандартних контрольних точок (breakpoints)

Контрольна точка (breakpoint) - це стандартниий розмір дісплею пристрою.

При розробці сайту орієнтуються на контрольні точки, що вважаються "перехідними", та налаштовують під них макети сайту. Для макетування сайту використовують flexbox та Grid технології.

Список контрольних точок, що відображають характеристики сучасних пристроїв:

Приклад макету сторінки з використанням медіазапитів та flexbox.

file css
.row
{
display:flex;
background-color:lightblue;
}
.block1, .block2
{
margin: 3px;
padding: 20px;
font-size: 30px;
background-color:blue;
color:#fffcfb;
text-align:center;
flex:1;
}

@media (max-width : 720px)
{
      .row {
      flex-direction:row;
      }
}

@media (min-width : 720px)
{
      .row {
      flex-direction:column;
     }
}

file html
<html>
<head>
<link rel="stylesheet" href="file.css">
</head>
<body>
<h4> Макет адаптованої сторінки. к.т. = 720px </h4>
<div class = row>
    <div class = block2> 1 </div>
    <div class = block1> 2 </div>
    <div class = block2> 3 </div>
</div>

</body>
</html>

Приклад макету сторінки з використанням медіазапитів та Grid.

file css
.row
{
display:grid;
grid-gap:5px;
background-color:lightblue;
}
.block
{
margin: 3px;
padding: 20px;
font-size: 30px;
background-color:blue;
color:#fffcfb;
text-align:center;
}

@media (max-width : 720px)
{
      .row {
      grid-template-columns: auto;
      }
}

@media (min-width : 720px)
{
      .row {
      grid-template-columns: auto auto auto;
     }
}

file html
<html>
<head>
<link rel="stylesheet" href="file.css">
</head>
<body>
<h4> Макет адаптованої сторінки. к.т. = 720px </h4>
<div class = row>
    <div class = block2> 1 </div>
    <div class = block1> 2 </div>
    <div class = block2> 3 </div>
</div>

</body>
</html>

Виконайте вправу в редакторі html

Створіть макет адаптивної стрінки з використанням медіазапитів та Grid за поданим зразком. Макет має змінюватися в залежності від ширини та брекпоінтів.

Ширина вікна <= 600px

Ширина вікна між 800 і 1200px

Ширина вікна >1200px