Создавайте адаптивные веб-сайты с помощью всего одного свойства CSS

CSS

Создайте адаптивный веб-сайт с одним свойством CSS, давайте посмотрим, как он это сделает. 🤔

Возьмите этот шаблон в качестве примера, свойства CSS не применяются. 🖥

использоватьclamp()CSS, мы можем создать адаптивный веб-сайт только с одним свойством.

Теперь добавьте волшебный CSS

clamp(minimum, preferred, maximum);

это здесь! ты закончил ✌

инструкция

clamp() работает, «зажимая» или ограничивая гибкое значение между минимальным и максимальным диапазоном.

Способ применения следующий:

  1. минимальное минимальное значение: например.16px
  2. гибкое значение: например.5vw
  3. максимальное максимальное значение: например34px 
h1 {
  font-size: clamp(16px, 5vw, 34px);
}

В этом примере, только если значение больше, чем16pxи меньше чем34pxВремя,h1Значение размера шрифта будет равно ширине области просмотра.5％.

Например, если ширина окна просмотра300px, твой5vwзначение будет равно15px, однако вы ограничиваете это значение размера шрифта до наименьшего16px, так вот что будет.

С другой стороны, если ширина вашего окна просмотра1400px,но5vwбудет таким же высоким, как70px! Но, к счастью, вы ограничиваете этот максимум до34px, поэтому он не превышает этого значения.

Онлайн-демонстрация:Сайт 15739.GitHub.IO/отзывчивый W…

Я могу добавить этот код в этот шаблон...

img {
  width: clamp(15vw, 800%, 100%);
}
h1 {
  font-size: clamp(20px, 5vw, 35px);
}
p {
  font-size: clamp(10px, 4vw, 20px);
}

И буквально принимается любой другой атрибут длины, частоты, угла, времени, процента, числа или целого числа.

оригинал:dev.to/dip15739

Автор: Дип Вачани

Категории