Что означает @media screen и (max-width: 1024px) в CSS?

Это медиа-запрос. Это предотвращает запуск CSS внутри него, если браузер не пройдет тесты, которые он содержит.

Тесты в этом медиа-запросе:

1. @media screen - Браузер идентифицирует себя как находящийся в категории «экран». Это примерно означает, что браузер считает себя классом настольных компьютеров - в отличие, например, от более старый браузер мобильного телефона (обратите внимание, что iPhone и другие браузеры смартфонов действительно идентифицируют себя как находящиеся в категории экранов) или программу чтения с экрана - и что он отображает страницу на экране, а не распечатать ее.

2. max-width: 1024px - ширина окна браузера (включая полосу прокрутки) не более 1024 пикселей. (пиксели CSS, а не пиксели устройства.)

Этот второй тест предполагает, что это предназначено для ограничения CSS для iPad, iPhone и подобных устройств (поскольку некоторые старые браузеры не поддерживают max-width в медиа-запросах, а многие браузеры для настольных ПК работают с шириной более 1024 пикселей).

Однако это также будет применяться к окнам настольных браузеров шириной менее 1024 пикселей в браузерах, которые поддерживают max-width медиа-запросы.

Вот спецификация Media Queries, она довольно удобочитаема:

• http://www.w3.org/TR/css3-mediaqueries/

Он ограничивает стили, определенные там, на экране (например, не для печати или некоторых других носителей) и дополнительно ограничивает область просмотра до 1024 пикселей или меньше в ширину.

http://www.css3.info/preview/media-queries/

Он говорит: когда страница отображается на экране с разрешением не более 1024 пикселей в ширину, примените следующее правило.

Как вы, возможно, уже знаете, на самом деле вы можете настроить таргетинг CSS на тип носителя, который может быть портативным, экраном, принтером и т. Д.

Подробнее см. здесь ..

В моем случае я хотел разместить свой логотип по центру веб-сайта, когда в браузере есть 800px или меньше, тогда я сделал это с помощью тега @media:

@media screen and (max-width: 800px) {
  #logo {
    float: none;
    margin: 0;
    text-align: center;
    display: block;
    width: auto;
  }
}

Это сработало для меня, надеюсь, кто-нибудь найдет это решение полезным. :) Для получения дополнительной информации см. это.

Это Media Queries. Это позволяет вам применять часть правил CSS только к определенным устройствам в определенной конфигурации.

Это означает, что если размер экрана 1024, то применяются только правила ниже CSS.

Если ваше условие медиа-запроса истинно, тогда ваш CSS с этим условием будет работать. Это означает, что CSS в размере пикселя условия вашего медиа-запроса будет влиять, иначе, если условие не будет выполнено, это означает, что если ширина устройства больше 1024 пикселей, чем ваш CSS, не будет работать, потому что ваше условие медиа-запроса ложно.

max-width - ваш максимальный предел CSS до этой ширины.

Также стоит отметить, что вы можете использовать 'em', а также 'px' - блоги и текстовые сайты делают это, потому что тогда браузер принимает решения о макете в большей степени, чем текстовый контент.

В Wordpress Twentysixteen я хотел, чтобы мой слоган отображался как на мобильных, так и на настольных компьютерах, поэтому я поместил его в свою дочернюю тему style.css

@media screen and (max-width:59em){
    p.site-description {
        display:    block;
    }
}

Он нацелен на некоторую указанную функцию для выполнения некоторых других кодов ...

Например:

@media all and (max-width: 600px) {
  .navigation {
    -webkit-flex-flow: column wrap;
    flex-flow: column wrap;
    padding: 0;

  }

В приведенном выше фрагменте говорится, что если на устройстве, на котором запущена эта программа, есть экран с шириной 600 пикселей или менее 600 пикселей, в этом случае наша программа должна выполнить эту часть.