Я нашел этот фрагмент кода в файле CSS, который я унаследовал, но я не могу понять, что это:
@media screen and (max-width: 1024px){
img.bg {
left: 50%;
margin-left: -512px; }
}
В частности, что происходит в первой строке?
Что означает экран @media и (max-width: 1024px) в CSS?
Ответ 1
Это медиа-запрос. Это предотвращает запуск CSS внутри него, если браузер не передает те тесты, которые он содержит.
Тесты в этом запросе на медиа:
-
@media screen- браузер идентифицирует себя как находящийся в категории "экран". Это примерно означает, что браузер считает себя настольным классом - в отличие от, например, более старый браузер для мобильных телефонов (обратите внимание, что iPhone и другие браузеры смартфонов идентифицируют себя как категории экрана) или экранный анализатор - и что он отображает страницу на экране, а не печатает ее. -
max-width: 1024px- ширина окна браузера (включая полосу прокрутки) составляет 1024 пикселя или меньше. (пиксели CSS, а не пиксели устройства.)
Этот второй тест предполагает, что это предназначено для ограничения CSS для iPad, iPhone и подобных устройств (поскольку некоторые старые браузеры не поддерживают max-width в медиа-запросах, а множество настольных браузеров работают более 1024 пикселей).
Однако он также применим к окнам обозревателя Windows размером менее 1024 пикселей в браузерах, поддерживающих медиа-запрос max-width.
Вот ее спецификация, ее довольно читаемость:
Ответ 2
Он ограничивает стили, определенные там на экране (например, не печатать или какой-либо другой носитель), а также ограничивает область видимости шириной менее 1024 пикселей или менее.
Ответ 3
В нем говорится: Когда страница отображается на экране с разрешением не более 1024 пикселей в ширину, применяйте следующее правило.
Как вы уже знаете, на самом деле вы можете настроить какой-либо CSS на тип носителя, который может быть одним из карманных компьютеров, экрана, принтера и т.д.
Посмотрите здесь для деталей..
Ответ 4
Это Медиа-запросы. Он позволяет применять часть правил CSS только к определенным устройствам при определенной конфигурации.
Ответ 5
В моем случае я хотел центрировать свой логотип на веб-сайте, когда браузер имеет 800px или меньше, тогда я сделал это с помощью тега @media:
@media screen and (max-width: 800px) {
#logo {
float: none;
margin: 0;
text-align: center;
display: block;
width: auto;
}
}
Это сработало для меня, надеюсь, что кто-то найдет это решение полезным.:) Для получения дополнительной информации см. this.
Ответ 6
Это означает, что если размер экрана равен 1024, то применяются только к правилам CSS.
Ответ 7
Если условие вашего медиапроцесса истинно, ваш css с этим условием будет работать. Это означает, что CSS в пределах размера пикселя условия медиа-запроса будет действовать, Else, если условие не будет выполнено, если значение ширины устройства больше 1024px, чем ваше CSS не будет работать. Из-за того, что условие вашего медиа-запроса ложно. max-width - ваш максимальный лимит css до этой ширины.
Ответ 8
Также стоит отметить, что вы можете использовать "em", а также "px" - блоги и текстовые сайты делают это, потому что браузер делает решения по компоновке более похожими на текстовое содержимое.
В Wordpress twentysixteen я хотел, чтобы мой tagline отображался как на мобильных телефонах, так и на рабочих столах, поэтому я помещал это в свою дочернюю тему style.css
@media screen and (max-width:59em){
p.site-description {
display: block;
}
}
Ответ 9
он нацелен на определенную функцию для выполнения некоторых других кодов...
например:
@media all and (max-width: 600px) {
.navigation {
-webkit-flex-flow: column wrap;
flex-flow: column wrap;
padding: 0;
}
приведенный выше фрагмент говорит, что если у устройства, запускающего эту программу, есть экран шириной 600 пикселей или менее 600 пикселей, в этом случае наша программа должна выполнить эту часть.