правило @mediaCSS3-генератор ☛

Определение и использование

Правило @media используется в запросах мультимедиа для применения различных стилей для различных типов носителей/устройств.

Медиа-запросы могут использоваться для проверки многих вещей, таких как:

• ширина и высота окна просмотра
• ширина и высота устройства
• ориентация (планшет/телефон находится в альбомном или портретном режиме?)
• разрешение

Использование медиа-запросов популярный метод обеспечения адаптированной таблицы стилей (адаптивного веб-дизайна) для настольных компьютеров, ноутбуков, планшетов и мобильных телефонов.

Вы также можете использовать запросы мультимедиа, чтобы указать, что определенные стили предназначены только для печатных документов или для чтения с экрана (тип носителя: print, screen, или speech).

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

Синтаксис ?

@media <тип носителя> and|not|only (<медиа_особенности>){
  Описание стиля
}

Значения

Тип устройства может принимать следующие значения:

Логические операторы

Мультимедийные функции (media function)

@media screen and (color) { /* Для цветных экранов */
  body { background: #fc0; }
}
@media screen and (min-color:3) { /* Минимум 512 цветов */
  body { background: #ccc; }

/* стиль для экранов отображающих не меньше 256 цветов. */
@media all and (min-color-index: 256) {
 ...
}

/* Стиль для бабушкофона */

@media screen and (grid) and (max-width: 15em) {
     body { font-size: 2em; }
   }

/* стиль для монохромного и цветного принтера. */

@media print and (monochrome) {
 body { font-family: Times, 'Times New Roman', serif; }
 h1, h2, p { color: black; }
}
@media print and (color) {
 body { font-family: Arial, Verdana, sans-serif; }
 h1, h2, p { color: #556b2f; }
} 

@media screen and (orientation: landscape) {
  #logo { background: url(logo1.png) no-repeat;
        }

@media screen and (orientation: portrait) {
  #logo { background: url(logo2.png) no-repeat; 
        }
}

/* стиль будет работать для принтера с минимальным разрешением 300 точек на дюйм. */

@media print and (min-resolution: 300dpi) {
 ...
}

Мультимедийные функции (Media Queries Level 4)

Из всех выше описанных медиа особенностей лишь два используются наиболее часто min-width и max-width.

Варианты подключения медиазапросов

<link media = "mediatype and | not | only (media function)" rel = "stylesheet" href = "stylesheet.css">

<style media =  "mediatype and | not | only (media function)">
	...код CSS 
</style>

 @media not | only mediatype and (media function) {
 ...код CSS
 }

@import url("main.css") (min-width:481px) and (max-width:768px);

@import url("print.css") print;

@import url("protv.css") projection, tv;

@import url("file.css") screen and (orientation:landscape);

<meta name = "viewport" content = "width=device-width, initial-scale = 1">

Примеры

1. Скрыть элемент, если ширина браузера составляет 600 пикселей в ширину или меньше:
   @media screen and (max-width: 600px) {
     div.example {
       display: none;
     }
   }

2. Использовать запросы мультимедиа, чтобы установить цвет фона в лавандовый, если видовой экран имеет ширину 800 пикселей или шире, в светло-зеленый, если видовой экран имеет ширину от 400 до 799 пикселей. Если видовой экран меньше 400 пикселей, цвет фона будет светло-синим:

   body {
     background-color: lightblue;
   }
   
   @media screen and (min-width: 400px) {
     body {
       background-color: lightgreen;
     }
   }
   
   @media screen and (min-width: 800px) {
     body {
       background-color: lavender;
     }
   }

Создать адаптивное меню навигации (отображается горизонтально на больших экранах и вертикально на маленьких экранах):

@media screen and (max-width: 600px) {
  .topnav a {
    float: none;
    width: 100%;
  }
}

3. Использовать запрос мультимедиа для создания адаптивного макета столбцов:

   /* На экранах шириной 992px или меньше перейти от четырех столбцов к двум столбцам */
   @media screen and (max-width: 992px) {
     .column {
       width: 50%;
     }
   }
   
   /* На экранах шириной 600 пикселей или меньше сделать столбцы стеком на вершине друг друга, а не рядом друг с другом */
   @media screen and (max-width: 600px) {
     .column {
       width: 100%;
     }
   }

4. Медиа-запросы также можно использовать для изменения макета страницы в зависимости от ориентации браузера. Вы можете иметь набор свойств CSS, которые будут применяться только тогда, когда окно браузера шире, чем его высота, так называемая "ландшафтная" ориентация. Использовать светло-синий цвет фона, если ориентация находится в альбомном режиме:

   @media only screen and (orientation: landscape) {
     body {
       background-color: lightblue;
     }
   }

5. С помощью запросов мультимедиа можно задать зеленый цвет текста при отображении документа на экране и черный при печати:

   @media screen {
     body {
       color: green;
     }
   }
   
   @media print {
     body {
       color: black;
     }
   }

6. Список, разделенный запятыми: добавить дополнительный медиа-запрос к уже существующему, используя запятую (это будет вести себя как оператор OR): /* Если ширина находится между 600px и 900px или выше 1100px - измените внешний вид <div> */

   @media screen and (max-width: 900px) and (min-width: 600px), (min-width: 1100px) {
     div.example {
       font-size: 50px;
       padding: 50px;
       border: 8px solid black;
       background: yellow;
     }
   }

7. Использовать медиа-запросы для создания адаптивного веб-сайта:

   <!DOCTYPE html>
   <html lang="ru-RU">
    <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>HTML Веб сайта Флексбокс</title>
     <style>
     * {
         box-sizing: border-box;
     }
   
     /* Стиль body */
     body {
         font-family: Arial;
         margin: 0;
     }
   
     /* Заголовок / логотипа */
     .header {
         padding: 60px;
         text-align: center;
         background: #1abc9c;
         color: white;
     }
   
     /* Стиль верхней панели навигации */
     .navbar {
         display: flex;
         background-color: #333;
     }
   
     /* Стиль ссылок панели навигации */
     .navbar a {
         color: white;
         padding: 14px 20px;
         text-decoration: none;
         text-align: center;
     }
   
     /* Изменение цвета при наведении */
     .navbar a:hover {
         background-color: #ddd;
         color: black;
     }
   
     /* Контейнер столбца */
     .row {  
         display: flex;
         flex-wrap: wrap;
     }
   
     /* Создайте две неравные колонки, которые сидят рядом друг с другом */
     /* Боковая панель / левый столбец */
     .side {
         flex: 30%;
         background-color: #f1f1f1;
         padding: 20px;
     }
   
     /* Главная колонка */
     .main {
         flex: 70%;
         background-color: white;
         padding: 20px;
     }
   
     /* Поддельные изображения, только для этого примера */
     .fakeimg {
         background-color: #aaa;
         width: 100%;
         padding: 20px;
     }
   
     /* Подвал */
     .footer {
         padding: 20px;
         text-align: center;
         background: #ddd;
     }
   
     /* Отзывчивый макет когда экран меньше, чем 700 пикселей в ширину, 
       сделать два столбца стека друг на друга, а не рядом друг с другом */
     @media screen and (max-width: 700px) {
         .row, .navbar {   
             flex-direction: column;
         }
     }
     </style>
    </head>
    <body>
   
     <!-- Header -->
     <div class="header">
       <h1>Мой Сайт</h1>
       <p>С <b>flexible</b> макетом.</p>
     </div>
   
     <!-- Navigation Bar -->
     <div class="navbar">
       <a href="#">Ссылка</a>
       <a href="#">Ссылка</a>
       <a href="#">Ссылка</a>
       <a href="#">Ссылка</a>
     </div>
   
     <!-- The flexible grid (content) -->
     <div class="row">
       <div class="side">
           <h2>Обо мне</h2>
           <h5>Мое фото:</h5>
           <div class="fakeimg" style="height:200px;">Изображение</div>
           <p>Какой-то текст обо мне..</p>
           <h3>Дополнительный текст</h3>
           <p>Lorem ipsum dolor sit ame.</p>
           <div class="fakeimg" style="height:60px;">Изображение</div><br>
           <div class="fakeimg" style="height:60px;">Изображение</div><br>
           <div class="fakeimg" style="height:60px;">Изображение</div>
       </div>
       <div class="main">
           <h2>НАЗВАНИЕ РУБРИКИ</h2>
           <h5>Название описание, ноябрь 10, 2018</h5>
           <div class="fakeimg" style="height:200px;">Изображение</div>
           <p>Некоторый текст..</p>
           <p>Sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, 
             sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 
             quis nostrud exercitation ullamco.</p>
           <br>
           <h2>НАЗВАНИЕ РУБРИКИ</h2>
           <h5>Название описание, ноябрь 7, 2018</h5>
           <div class="fakeimg" style="height:200px;">Изображение</div>
           <p>Некоторый текст..</p>
           <p>Sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, 
            sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 
            quis nostrud exercitation ullamco.</p>
       </div>
     </div>
   
     <!-- Footer -->
     <div class="footer">
       <h2>Подвал</h2>
     </div>
   
    </body>
   </html>

Браузеры: Настольные Мобильные     ?

@-правила