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



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

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

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

250   9  

9 ответов:

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

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

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

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

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

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

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

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

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

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

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

посмотреть здесь для сведения..

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

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

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

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

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

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

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

на Wordpress twentysixteen я хотел, чтобы мой слоган отображался на мобильных телефонах, а также на настольных компьютерах, поэтому я поместил это в свой стиль детской темы.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;

  }

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

    Ничего не найдено.

Добавить ответ:
Отменить.