CSS RWD - Введение

Добро пожаловать, стремящиеся веб-разработчики! Сегодня мы погружаемся в fascинирующий мир адаптивного веб-дизайна (RWD) с использованием CSS. Как ваш доброжелательный соседский компьютерный учитель, я рад помочь вам в этом путешествии. Поехали!

CSS RWD - Introduction

Что такое адаптивный веб-дизайн?

Представьте, что вы строите дом, который должен идеально подходить для участков земли разного размера. Это то, что делает RWD для веб-сайтов! Это подход к веб-дизайну, который делает веб-страницы好看 на всех устройствах и экранах.

Раньше мы создавали separate веб-сайты для стационарных компьютеров и мобильных устройств. Это было как строительство двух домов вместо одного адаптивного. Но с RWD мы можем создать один веб-сайт, который подстраивается под любой экран. Замечательно, правда?

Why RWD важен?

В современном мире люди посещают веб-сайты с различных устройств - смартфонов, планшетов, ноутбуков и даже умных холодильников! (Да, это是真的!) Если ваш веб-сайт не выглядит хорошо на всех этих устройствах, вы можете lose посетителей быстрее, чем вы можете сказать "неадаптивный дизайн."

Структура RWD

Структура RWD состоит из трех основных компонентов:

Гибкие макеты
Гибкие изображения и медиа
CSS media запросы

Давайте рассмотрим их по одному.

1. Гибкие макеты

Гибкие макеты как резинки - они растягиваются и сжимаются, чтобы подойти к различным размерам экранов. Мы достигаем этого, используя относительные единицы, такие как проценты, вместо фиксированных единиц, таких как пиксели.

Вот простой пример:

.container {
width: 80%;
margin: 0 auto;
}

В этом коде контейнер всегда будет 80% ширины родительского элемента, независимо от размера экрана. Это как having комната, которая всегда составляет 80% дома, независимо от того, это поместье или крошечный домик!

2. Гибкие изображения и медиа

Мы хотим, чтобы наши изображения и видео были такими же гибкими, как и наши макеты. Вот как мы можем сделать изображения адаптивными:

img {
max-width: 100%;
height: auto;
}

Этот CSS говорит браузеру: "Эй, убедитесь, что это изображение никогда не шире, чем его контейнер, и отрегулируйте его высоту, чтобы maintain пропорции." Это как having фотография, которая магическим образом изменяется в размере, чтобы подойти к любому багету!

3. CSS Media Запросы

Media запросы - это secret sauce RWD. Они позволяют нам применять различные стили в зависимости от характеристик устройства, наиболее commonly ширины окна просмотра.

Вот базовый пример media запроса:

@media screen and (max-width: 600px) {
.container {
width: 100%;
}
}

Этот код говорит: "Если ширина экрана 600 пикселей или меньше, сделайте контейнер occupy 100% ширины." Это как having комната, которая расширяется, чтобы заполнить весь дом, когда дом становится меньше!

Поставим все вместе

Теперь давайте посмотрим, как эти компоненты работают вместе в простом адаптивном макете:

<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Пример адаптивного веб-дизайна</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
.container {
width: 80%;
margin: 0 auto;
}
.header {
background-color: #f0f0f0;
padding: 20px;
}
.content {
display: flex;
flex-wrap: wrap;
}
.main {
flex: 2;
padding: 20px;
}
.sidebar {
flex: 1;
background-color: #e0e0e0;
padding: 20px;
}
img {
max-width: 100%;
height: auto;
}
@media screen and (max-width: 600px) {
.container {
width: 100%;
}
.content {
flex-direction: column;
}
.sidebar {
order: -1;
}
}
</style>
</head>
<body>
<div class="container">
<div class="header">
<h1>Добро пожаловать на мой адаптивный сайт</h1>
</div>
<div class="content">
<div class="main">
<h2>Основное содержимое</h2>
<p>Это основная зона содержимого. Она будет шире на больших экранах.</p>
<img src="https://via.placeholder.com/600x300" alt="Промежуточное изображение">
</div>
<div class="sidebar">
<h2>Боковая панель</h2>
<p>Это боковая панель. На малых экранах она будет出现在 над основным содержимым.</p>
</div>
</div>
</div>
</body>
</html>

В этом примере мы создали простой адаптивный макет с заголовком, основной зоной содержимого и боковой панелью. Макет подстраивается в зависимости от размера экрана:

На больших экранах основное содержимое и боковая панель находятся рядом.
На малых экранах (600 пикселей или меньше) боковая панель перемещается над основным содержимым, и контейнер занимает всю ширину экрана.

Попробуйте изменить размер окна браузера, чтобы увидеть, как он responds!

Заключение

И вот вы,folks! Вы только что сделали свои первые шаги в мир адаптивного веб-дизайна. Помните, создание адаптивных веб-сайтов - это как быть инструктором по веб-йоге - все о гибкости!

Продолжая ваше путешествие, вы откроете для себя более advanced техники и инструменты. Но пока, практикуйтесь с этими базовыми, experiment с различными макетами и, самое главное, получайте удовольствие!

Счастливого кодирования, и пусть ваши веб-сайты всегда будут адаптивными!

Credits: Image by storyset

Предыдущий учебник:

CSS - Пользовательские свойства

Следующий учебник:

CSS RWD - Viewport