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

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

0 голосов
/ 10 декабря 2018

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 предназначен для вычисления минимального максимального размера ширины окна.Можно ли здесь это сделать?

1 Ответ

0 голосов
/ 10 декабря 2018

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

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>, разрешите в. ref

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

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

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

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

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

...