CSS RWD - Media Queries
Добро пожаловать, стремящиеся веб-разработчики! Сегодня мы окунемся в захватывающий мир адаптивного веб-дизайна (RWD) и сосредоточимся на одном из его самых мощных инструментов: Media Queries. Представьте, что вы создаете красивую картину, но она должна выглядеть великолепно и на крошечной открытке, и на巨大的广告牌. Именно это мы делаем с сайтами, и media queries являются нашей магической кистью!
Что такое Media Queries?
Media queries resemble хамелеоны в мире CSS. Они позволяют вашему сайту адаптироваться и изменять свой вид в зависимости от устройства, на котором он viewed. Независимо от того, это смартфон, планшет или настольный компьютер, media queries помогают обеспечить, чтобы ваш сайт выглядел fantastisch везде.
Давайте начнем с базового примера:
@media screen and (max-width: 600px) {
body {
background-color: lightblue;
}
}В этом коде мы говорим: "Эй, браузер, если ширина экрана составляет 600 пикселей или меньше, покрась фон в светло-синий!" Это как дать вашему сайту cool, освежающий вид на маленьких экранах.
CSS RWD Media Query - Свойство width
Свойство ширины - наш лучший друг при создании адаптивных дизайнов. Оно позволяет нам устанавливать разные стили в зависимости от ширины экрана устройства.
Давайте рассмотрим более comprehensive пример:
/* Базовые стили для больших экранов */
.container {
width: 80%;
margin: 0 auto;
}
/* Стили для экранов 768px и меньше */
@media screen and (max-width: 768px) {
.container {
width: 95%;
}
}
/* Стили для экранов 480px и меньше */
@media screen and (max-width: 480px) {
.container {
width: 100%;
}
}Вот что происходит:
- По умолчанию наш контейнер имеет ширину 80% с отступами по сторонам.
- Когда экран сжимается до 768px или меньше, мы увеличиваем ширину до 95%.
- На очень маленьких экранах (480px или меньше) мы делаем контейнер на всю ширину.
Это как ваш сайт делает йогу, flexing и растягиваясь, чтобы идеально подходить к любому экрану!
CSS RWD Media Query - Множественные Breakpoints
Теперь давайте поговорим о breakpoints. Это точки, в которых layout вашего сайта изменится, чтобы обеспечить лучший пользовательский опыт. Представьте их как "пункты разрыва", где ваш дизайн должен адаптироваться.
Вот пример с использованием множественных breakpoints:
/* Базовые стили */
body {
font-size: 16px;
}
/* Большие экраны */
@media screen and (min-width: 1200px) {
body {
font-size: 18px;
}
}
/* Средние экраны */
@media screen and (min-width: 992px) and (max-width: 1199px) {
body {
font-size: 17px;
}
}
/* Маленькие экраны */
@media screen and (max-width: 991px) {
body {
font-size: 15px;
}
}В этом примере мы корректируем размер шрифта в зависимости от разных размеров экранов:
- На больших экранах (1200px и выше) мы увеличиваем размер шрифта до 18px.
- Для средних экранов (между 992px и 1199px) мы используем размер шрифта 17px.
- На маленьких экранах (991px и ниже) мы слегка уменьшаем размер шрифта до 15px.
Это как у вас есть гардероб, который всегда идеально подходит, независимо от того, сколько вы съели!
CSS RWD Media Query - Использование ориентации
Знаете ли вы, что ваш сайт может определить, удерживается ли устройство вертикально или горизонтально? Это правильно, и мы можем использовать эту информацию для создания еще болееtailored дизайнов.
Вот как мы можем использовать функцию ориентации:
/* Стили для portrait orientation */
@media screen and (orientation: portrait) {
.sidebar {
width: 100%;
float: none;
}
.main-content {
margin-left: 0;
}
}
/* Стили для landscape orientation */
@media screen and (orientation: landscape) {
.sidebar {
width: 25%;
float: left;
}
.main-content {
margin-left: 26%;
}
}В этом примере:
- Когда устройство находится в portrait mode (выше, чем ширина), мы делаем панель full-width и удаляем его float.
- В landscape mode мы создаем side-by-side макет, где панель занимает 25% ширины.
Это как ваш сайт делает акробатические упражнения, fliping между portrait и landscape с стилем!
Объединение всего вместе
Теперь, когда мы рассмотрели основы, давайте посмотрим на более сложный пример, который combine все, что мы узнали:
/* Базовые стили */
body {
font-family: Arial, sans-serif;
line-height: 1.6;
color: #333;
}
.container {
width: 80%;
margin: 0 auto;
}
/* Большие экраны */
@media screen and (min-width: 1200px) {
body {
font-size: 18px;
}
.container {
max-width: 1140px;
}
}
/* Средние экраны */
@media screen and (min-width: 992px) and (max-width: 1199px) {
body {
font-size: 17px;
}
.container {
max-width: 960px;
}
}
/* Маленькие экраны */
@media screen and (max-width: 991px) {
body {
font-size: 16px;
}
.container {
width: 95%;
}
}
/* Extra маленькие экраны */
@media screen and (max-width: 576px) {
body {
font-size: 15px;
}
.container {
width: 100%;
padding: 0 15px;
}
}
/* Ориентация ландшафт */
@media screen and (orientation: landscape) and (max-height: 500px) {
.header {
position: static;
}
.main-content {
margin-top: 20px;
}
}Этот comprehensive пример демонстрирует, как мы можем создать полностью адаптивный дизайн, который адаптируется к различным размерам экранов и ориентациям. Мы корректируем размеры шрифтов, widths контейнеров и даже macet в зависимости от характеристик устройства.
Заключение
Поздравляю! Вы только что сделали свои первые шаги в мир адаптивного веб-дизайна с media queries. Помните, что создание адаптивных сайтов похоже на быть цифровым shapeshifter - ваше содержимое должно выглядеть великолепно независимо от того, какую форму оно принимает.
Пока вы практикуетесь и экспериментируете с media queries, вы разовьете интуицию для создания дизайнов, которые работают безупречно на всех устройствах. Продолжайте исследовать, продолжайте программировать и, самое главное, получайте удовольствие! Ваши сайты будут благодарны вам, выглядя фантастически везде, где бы они ни пошли.
| Method | Описание |
|---|---|
@media screen |
Целит все типы экранов |
max-width |
Устанавливает условие максимальной ширины |
min-width |
Устанавливает условие минимальной ширины |
orientation: portrait |
Целит устройства в portrait mode |
orientation: landscape |
Целит устройства в landscape mode |
Счастливо кодируйте, и пусть ваши сайты всегда будут адаптивными!
Credits: Image by storyset