Можете привести пример свойства @media, отличного от screen?

В CSS @media — это правило, которое позволяет применять стили в зависимости от различных условий, таких как размер экрана, ориентация устройства и другие параметры. Хотя screen является наиболее часто используемым значением для медиа-запросов, существуют и другие типы медиапредставлений.

Пример: использование @media для печати

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

Вот простой пример:

@media print {
    body {
        font-size: 12pt;
        color: black;
        background: white;
    }

    .no-print {
        display: none; /* Скрыть элемент при печати */
    }

    h1 {
        margin: 0;
        font-size: 16pt;
    }

    .print-footer {
        position: fixed;
        bottom: 0;
        width: 100%;
        text-align: center;
    }
}

Как работает этот медиа-запрос?

В этом примере:

• Все элементы в @media print будут применяться только тогда, когда пользователь выберет печать страницы.
• Устанавливается размер шрифта и цвет текста, которые будут лучше читаться на бумаге.
• Скрывается элемент с классом .no-print, чтобы он не отображался в напечатанном документе.
• Устанавливаются стили для заголовков и добавляется фиксированный нижний колонтитул, который будет отображаться на каждой странице, если она будет напечатана.

Другие альтернативные значения для @media

Существуют и другие значения для @media, такие как:

• screen: для экранов и устройств.
• speech: для синтезаторов речи и подобных устройств.
• all: для всех устройств (это значение по умолчанию).

Вы можете комбинировать различные условия и использовать логические операторы, чтобы создавать более сложные медиа-запросы. Например, вы можете применить стили как для экранов, так и для устройств с сенсорным вводом:

@media screen and (hover: none) {
    .button {
        background-color: blue;
    }
}

Этот медиа-запрос применит синюю заднюю часть для элементов с классом .button, только если устройство не поддерживает наведение.

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