Почему эта функция calc не работает в масштабе преобразования?

Question

calc() по-видимому, работает в преобразовании, но это не так:

transform: scale(calc(0.75 + (0.3 - 0.75) * ((100vw - 320px) / (780 - 320))));

Кроме того, это работает, но это в основном та же формула, только с процентом против десятичного числа. Только добавил это, так что вы можете увидеть формулу работает здесь:

right: calc(30% + (75 - 30) * ((100vw - 320px) / (780 - 320)));

У меня есть контейнер, который имеет ширину в процентах и ​​максимальную ширину 300 пикселей, например. Я хочу, чтобы ребенок этого всегда масштабировал, используя transform:scale()в процентах от фактической текущей ширины родителя.

Почему моя трансформация calc функция не работает? Использование Chrome

100vw - 320px есть ли для расчета между минимальным и максимальным размером ширины окна. Возможно ли сделать это здесь?

Answer 1

У вас есть две проблемы. Первый касается формулы без масштаба:

calc(0.75 + (0.3 - 0.75) * ((100vw - 320px) / (780 - 320)))

Это неверно, потому что вы добавляете number (0.75) с length ((0.3 - 0.75) * ((100vw - 320px) / (780 - 320)))

В + или - проверьте, что обе стороны имеют одинаковый тип, или что одна сторона является <number> а другой <integer>, Если обе стороны одного типа, разрешите этот тип. Если одна сторона <number> а другой <integer>Разрешите. ^ссылка

Вторая проблема заключается в том, что шкала принимает только число, поэтому вам нужно исправить формулу, чтобы преобразовать вторую часть в число, удалив любые единицы измерения (vw,px,так далее).

По сути, то, что вы хотите сделать, не может быть сделано таким образом, потому что у вас нет способа конвертировать ваши (100vw - 320px) на номер, если только вы не подумаете об использовании JS, поскольку это выходит за рамки CSS, потому что CSS не является языком программирования. Даже с JS вам необходимо определить, какова логика преобразования числа пикселей в число не пикселей.

---

Используя ту же формулу в right и с percentage будет работать нормально, потому что:

Если проценты принимаются в контексте, в котором размещено выражение, и они определены как относящиеся к другому типу, кроме <number>, <percentage-token> рассматривается как этот тип. Например, в свойстве width проценты имеют <length> тип. Процент имеет только <percentage> введите, если в этом контексте <percentage> значения не используются, значение совместимо с любым другим типом. Если проценты обычно не допускаются вместо calc(), то выражение calc(), содержащее проценты, в этом контексте недопустимо. ^ссылка

Так что в этом случае процент разрешено использовать с right потому что мы можем решить это таким образом форум будет действительным, потому что в конце это будет что-то вроде A% + Bpx,