Пошаговый расчет на основе ширины окна в CSS
Мне нужно рассчитать, что каждые 100 пикселей ширины окна + 2% css увеличиваются в левом %:
Примеры:
- ширина > 700 пикселей:
left: 30% - ширина > 800 пикселей:
left: 32%
Как я могу это сделать?
@TemaniAfif Это кажется невозможным с vw. Можете ли вы уточнить?
@ Шон, в вопросе не хватает контекста, чтобы узнать, возможно это или нет. Я просто дал подсказку, так как vw уже зависит от ширины экрана
@TemaniAfif Лучше попросить разъяснений, чем отправить кого-то по ложному пути
@ Шон, ты пришел к выводу, что это неверный путь. Я не дал никакого пути. Я дал CSS информацию, которую он может не знать. В этом нет ничего неправильный.
@TemaniAfif То, о чем они просят, невозможно с vw. Вы явно сказали им использовать vw в этом случае; вы не просто дали им понять, что он существует — это было бы прекрасно.
@ Шон, насколько я знаю, я волен говорить, что хочу;) и я не задал этот вопрос отвечать (в противном случае вы можете понизить его, потому что думаете, что это неправильный). Я никогда не говорю, что это возможно или невозможно, это только вывод ваш. Поле для ответа находится ниже, вы можете уточнить ответ и указать правильный метод.
@TemaniAfif Просто пытаюсь дать конструктивный отзыв, который принесет пользу другим пользователям. Вы, конечно, вольны поступать, как хотите.
Ответы 1
В настоящее время невозможно написать единый набор правил CSS, который увеличивает свойство ступенчатый каждые 100 пикселей ширины окна во всех основных браузерах. Вам нужно будет написать отдельный медиа-запрос для каждого интервала.
В SCSS это можно сделать с помощью цикла. Это создаст медиа-запрос для $number-of-intervals количества шагов, начиная с $base-width ширины и $base-percentage процента:
$base-width: 600px;
$base-percentage: 30%;
$number-of-intervals: 6;
@for $i from 1 through $number-of-intervals {
@media screen and (min-width: #{$base-width + (($i - 1) * 100)}) {
.my-class {
left: #{$base-percentage + (($i - 1) * 2)};
}
}
}
используйте
vwединицу, которая зависит от ширины экрана