В предыдущей статье я рассказал о том, что такое адаптивная вёрстка , и для чего она нужна. И там я сказал, что основной механизм адаптивной вёрстки - это медиа-запросы . Вот о медиа-запросах в 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, но забивать ими Вашу голову не буду. Но если очень хочется, то их можно посмотреть в справочнике.
