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

237

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

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

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

Теги:
media-queries

9 ответов

285
Лучший ответ

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

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

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

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

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

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

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

Поделиться
  • 0
    если ширина моего экрана превышает 1200 пикселей, как указать @media screen
  • 2
    вы можете просто использовать (min-width: 1200px) вместо max-width, или вы можете просто использовать его как обычный CSS без медиазапроса и использовать «max-width», чтобы перезаписать его, когда оно перейдет на устройство меньшего размера.
Показать ещё 2 комментария
56

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

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

Поделиться
10

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

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

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

Поделиться
  • 3
    Я бы не стал предполагать, что он это знает.
5

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

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

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

Поделиться
5

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

Поделиться
1

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

Поделиться
  • 27
    Мне сложно разобрать этот ответ ...
1

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

Поделиться
0

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

например:

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

  }

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

Поделиться
0

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

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

@media screen and (max-width:59em){
    p.site-description {
        display:    block;
    }
}
Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню