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

245

Я нашел этот фрагмент кода в файле CSS, который унаследовал, но не могу понять из этого:

@media screen and (max-width: 1024px){
    img.bg {
        left: 50%;
        margin-left: -512px; }
}

В частности, что происходит на первой линии?

css media-queries Ярина
источник

Ответы:

306

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

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

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

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

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

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

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

Пол Д. Уэйт
источник
если ширина моего экрана превышает 1200 пикселей, как указать @media screen
sanoj lawrence
2
вы можете просто использовать (min-width: 1200px) вместо max-width, или вы можете просто использовать его как обычный CSS без медиазапроса и использовать «max-width», чтобы перезаписать его, когда оно перейдет на устройство меньшего размера
MintWelsh
Есть ли способ повлиять на стиль только на рабочем столе (не на мобильный), пока вы измените размер окна просмотра? Так что, если бы я вручную изменил размеры моего браузера до «максимальной ширины 720px», он бы использовал оператор мультимедиа, который обнаруживает вас на настольном компьютере, не являющемся мобильным, а вы сейчас, например, ниже 720px?
Wharfdale
@ JordanC26: похоже, что вы задаете вопрос, и для этого вам нужна кнопка «Задать вопрос» в правом верхнем углу экрана. Прежде чем использовать это, вы можете определить, что вы подразумеваете под «настольным» и «мобильным». Является ли Microsoft Surface мобильным или настольным? Зачем? Как насчет будущих устройств, которые еще не были изобретены?
Пол Д. Уэйт
55

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

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

Крис Бентли
источник
10

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

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

Посмотрите здесь для деталей ..

Lorenzo
источник
3
Я бы не стал предполагать, что он это знает.
Jcolebrand
6

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

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

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

yehanny
источник
1

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

Кумар Нитеш
источник
1

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

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

Anup
источник
0

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

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

@media screen and (max-width:59em){
    p.site-description {
        display:    block;
    }
}
MattB
источник
0

Это предназначается для некоторой указанной особенности, чтобы выполнить некоторые другие коды ...

Например:

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

  }

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

Шахин Гасеми
источник