В чем разница между «screen» и «only screen» в медиа-запросах?

Опубликовано: 2 Февраля, 2022

Медиа-запрос используется для создания адаптивного веб-дизайна. Это означает, что вид веб-страницы отличается от системы к системе в зависимости от экрана или типов мультимедиа.
screen: используется для установки размера экрана медиа-запроса. Размер экрана можно установить с помощью max-width и min-width. Размер экрана отличается от экрана к экрану.

Синтаксис:

 @media screen и (max-width: width)

Example: This example use media query which works when the maximum width of display area is 400px. It is specifying screen as opposed to the other available media types the most common other one being print.

<!DOCTYPE html>
<html>
      
<head>
    <meta name="viewport" content=
        "width=device-width, initial-scale=1.0">
      
    <!-- CSS property to set style -->    
    <style>
        body {
            background-color: lightgreen;
        }
          
        /* Media query */
        @media screen and (max-width: 400px) {
            body {
                background-color: green;
                color:white;
            }
        }
    </style>
</head>
  
<body>
    <h1>The @media Rule</h1>
      
    <p>
        Resize the browser window. When the width of
        this document is 400 pixels or less, the 
        background-color is "green", otherwise it
        is "lightblue".
    </p>
</body>
  
</html>                    

Выход:
Размер экрана больше 400 пикселей:

Размер экрана менее 400 пикселей:

only screen: единственное ключевое слово используется для предотвращения применения указанных стилей в старых браузерах, не поддерживающих медиа-запросы с медиа-функциями.

Синтаксис:

 @media только экран и (max-width: width)

Example 2

<!DOCTYPE html>
<html>
      
<head>
    <meta name="viewport" content=
        "width=device-width, initial-scale=1.0">
      
    <!-- CSS property to set style -->    
    <style>
        body {
            background-color: lightgreen;
        }
          
        /* Media query */
        @media only screen and (max-width: 400px) {
            body {
                background-color: green;
            }
        }
    </style>
</head>
  
<body>
    <h1>The @media Rule</h1>
      
    <p>
        Resize the browser window. When the width of
        this document is 400 pixels or less, the 
        background-color is "green", otherwise it
        is "lightblue".
    </p>
</body>
  
</html>                    

Выход:
Размер экрана больше 400 пикселей:

Размер экрана менее 400 пикселей:

Picked CSS

В чем разница между «screen» и «only screen» в медиа-запросах?

РЕКОМЕНДУЕМЫЕ СТАТЬИ