Оптимизируйте ширину столбца с помощью медиа-запросов CSS.

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



CSS: создание столбцов с помощью float
В этой статье мы покажем, как создать столбец с помощью float.ckmobile.medium.com



Мы начинаем с вышеуказанного проекта и дублируем столбцы дважды.

Синтаксис

@media screen and (max-width: 480px) {

}

Мы напишем правила CSS в фигурных скобках. Мы применим эти правила CSS ко всем экранам с максимальной шириной 480 пикселей.

Он будет применять эти правила, если размер экрана меньше 480 пикселей, и игнорировать эти правила, если их больше 480.

Создание правил CSS

Эти правила CSS предназначены только для экранов с максимальной шириной
700 пикселей.

Если область просмотра больше 700 пикселей, эти правила будут игнорироваться.

@media screen and (max-width:700px) {
section{
background-color: aqua;
}
}

Цвет фона меняется на цвет морской волны, когда размер экрана меньше 700 пикселей.

Дополнительные правила CSS

Обычно мы делаем больше позиционных вещей, чтобы сеть лучше подходила.

@media screen and (max-width:700px) {
section{
width:46%;
}
}
@media screen and (max-width:480px) {
section{
width:96%;
}
}

Когда размер экрана меньше 700 пикселей, мы установим ширину на 46%, с отступами и полями (4%), которые в сумме составляют 50%, будут отображаться только два столбца.

Когда размер экрана меньше 480 пикселей, мы установим ширину 96% с отступом и полем 4%, что означает, что каждый столбец будет занимать 100% ширины экрана, поэтому будет отображаться только один столбец.

Подписывайтесь на нас: YouTube, Medium, Udemy, Linkedin, Twitter.