CSS - Изменение заполнения в зависимости от ширины экрана относительно указанных максимальных и минимальных значений

Question

Я хочу установить значение заполнения на основе ширины экрана относительно указанных интервалов.

Например; Допустим, есть div. Если ширина экрана 1000px, то я хочу установить padding-right:30px в div. Если ширина экрана 700px, то значение заполнения будет padding-right:15px. Если ширина экрана находится в диапазоне от 1000px до 700px, значение заполнения должно измениться пропорционально.

Как это сделать, используя pure css?

Answer 1

Вот и решение:

@media (max-width:1000px) and (min-width:700px) {
    padding-right: calc(15px + (100vw - 700px) * (15 - 30) / (700 -  1000));
}; 

Просто поиграйте с числами, и вы получите желаемый результат с помощью этого шаблона. Демо

Answer 2

Вы можете использовать медиа-запросы в сочетании с длиной в процентах от области просмотра.

@media screen and (width: 1000px), screen and (width: 700px) {
    div {
        padding-right: 30px; 
    }
}

@media screen and (min-width: 700px) and (max-width: 1000px) {
    div {
        padding-right: 10vw; /* Corresponds to 10% of the viewport width */
    }
}

Подробнее о медиа-запросах здесь: https://www.w3schools.com/css/css3_mediaqueries_ex.asp

vw
Равно 1% от ширины исходного содержащего блока области просмотра.

См. https://developer.mozilla.org/fr/docs/Web/CSS/length