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

Question

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

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

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

Answer 1

Это медиа-запрос.Он запрещает запуск 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/

Answer 2

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

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

Answer 3

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

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

Смотрите здесь для подробностей ..

Answer 4

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

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

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

Answer 5

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

Answer 6

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

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

Answer 7

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

Answer 8

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

Например:

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

  }

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

Answer 9

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

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

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