Медиа-запросы в CSS
В предыдущей статье я рассказал о том, что такое адаптивная вёрстка, и для чего она нужна. И там я сказал, что основной механизм адаптивной вёрстки - это медиа-запросы. Вот о медиа-запросах в CSS мы и поговорим в этот раз.
Давайте сразу разберём пример медиа-запроса:
@media screen and (max-width: 768px) {
body {
font-size: 9pt;
}
}
Данный код означает следующее: "Если ширина окна браузера 768px, то применить стили, указанные в фигурных скобках". Чтобы лучше понять, как это работает, напишите вот такой код:
<!DOCTYPE html>
<html>
<head>
<title>Медиа-запросы</title>
<style>
body {
font-size: 15pt;
}
@media screen and (max-width: 768px) {
body {
font-size: 9pt;
}
}
</style>
</head>
<body>
<p>Текст</p>
</body>
</html>
Откройте этот код в браузере и обратите внимание на размер текста. Теперь начните уменьшать ширину окна браузера, и когда она достигнет 768px, то текст заметно уменьшится. Вот это и есть адаптивная вёрстка и работа медиа-запросов в CSS.
Безусловно, таких медиа-запросов может быть очень много, а внутри них может быть далеко не один селектор body, а сколько угодно самых разных селекторов.
Так же есть и другие параметры, такие как min-width, который будет срабатывать при указанной ширине и больше. Аналогичные параметры max-height и min-height, отвечающие за высоту. Так же можно комбинировать разные параметры через and:
@media screen and (max-width: 768px) and (max-height: 300px) {
body {
font-size: 9pt;
}
}
В данном случае стили будут подключаться только при ширине меньше, либо равной 768px и при высоте меньше, либо равной 300px.
Что касается практики, то могу смело сказать, что в 95% случаях используется лишь один max-width. Иногда ещё и min-width. И ещё раз повторяю, что есть и другие медиа-запросы в CSS, но забивать ими Вашу голову не буду. Но если очень хочется, то их можно посмотреть в справочнике.
-
Создано 12.03.2014 12:09:54
-
Михаил Русаков
Комментарии (4):
Когда пишу 2 и больше медиа запроса то работает только 1. Например пишу так:\ @media screen and (max-width: 1024px) { #name{ width:300px; overflow-x: auto; } } @media screen and (max-width: 1680px) { #name{ width:1300px; overflow-x: auto; } } Но в любом случае всегда размер блока 1300px (как при размере экрана 1680px. И когда открываю окно размером 1024px то всё равно размер блока 1300px.
Ответить
а вы разберитесь сначала со screen,а потом вопросы задавайте. Вы своё условие то хоть поняли?) Напишите правильно запрос,и всё будет работать. Вопросы задавайте в службу поддержки,там ответят быстрее. да и 2 media - извращение,если честно)
Ответить
А медиа-запросы только в CSS 3 есть?
Ответить
Если речь идёт о кроссплатформенной вёрстке, то основным вопросом будет , наверное, такой: каково оптимальное число медиазапросов и с какими ширинами экранов, чтобы сайт корректно отображался на любых устройствах с экраном от 320 пикселей? С помощью плагина для Crome я собрал следующие ширины в пикселях: 320, 375, 480, 568, 600, 640, 667, 768, 800, 900, 960, 1024. Понятно, что под каждую ширину верстать глупо, но под какие - следует, а под какие - нет? Второй вопрос: а можно ли задать в медизапросе интервал ширин, например от 320 до 375 px? Если да, то можно минимизировать число медиазапросов, сочетая адаптивную и резииновую вёрстку.
Ответить
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.