Что означает @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 внутри него, если браузер не пройдет тесты, которые он содержит.

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

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

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

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

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

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

— Пол Д. Уэйт
источник

если ширина моего экрана превышает 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
источник

5

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

— Crozin
источник

2

Я изменил вашу ссылку, чтобы она была хэш-ссылкой здесь -> w3.org/TR/css3-mediaqueries/#media0 вместо сюда -> w3.org/TR/css3-mediaqueries

— jcolebrand

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 пикселей, в этом случае наша программа должна выполнить эту часть.

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