Уменьшите расстояние, вычитаемое по мере того, как окно сжимает только CSS - PullRequest
Новая
       26

Уменьшите расстояние, вычитаемое по мере того, как окно сжимает только CSS

0 голосов
/ 21 октября 2018

Например, у меня есть этот центрированный элемент с margin-top: -10%;

, и я хочу изменить размер, чем больше окно сжимается, тем меньше становится% (например, -6%).

Я знаю о vw и vh , но они практически не меняются при изменении размера окна, если расстояние, с которым мы работаем, является небольшим.

Есть ли способс некоторыми margin-top: calc();, может быть, с * делает какой-то странный математический трюк, чтобы достичь того, что я имею в виду?

1 Ответ

0 голосов
/ 21 октября 2018

Для широкого окна я добавил медиазапрос. В качестве примера я использовал 1300px. Если размер окна изменяется до значения, превышающего 1300px, поле будет постоянным.

Когда окно начинает уменьшаться ниже 1300px, поле начинаетсярадикально изменить. Я добился этого с помощью этого расчета:

margin-top: calc(-30px + 1300px - 100vw);

Как вы можете видеть, на 1300px маржа будет точно такой же, как если бы она была больше ион будет использовать медиазапрос, потому что

  • я вычел исходное поле,
  • , затем добавил ширину точки останова (= 1300px),
  • и затем вычелширина окна, которая в этот момент точно такая же (= 1300px) С этого момента, чем больше будет сжиматься окно, тем более радиально отступ будет в положительном направлении , поскольку ширина сжатия в уравнении сводится на нет. (Это означает, что мы все меньше отрицаем, когда окно сжимается.)

    Поиграйте с ним, чтобы получить собственные идеальные числа:

    https://codepen.io/bradib0y/pen/xyzJYE

...