Как рассчитать коэффициент масштабирования CSS в процентах по сравнению с шириной экрана? - PullRequest
Новая
       75

Как рассчитать коэффициент масштабирования CSS в процентах по сравнению с шириной экрана?

0 голосов
/ 31 октября 2019

Что мне нужно, так это результат следующего вычисления в процентах: 

@media screen and (min-width: 1921px) {
  .content-block {
    zoom: calc (100vw divided by 15) as percentage; // <- HERE
    line-height: 150%;
  }
}

Я не хочу создавать так много медиа-запросов для действительно больших экранов.

Пример: ширина экрана 4000px, деленная на 15 = 266% zoom

РЕДАКТИРОВАТЬ: Нет JavaScript, пожалуйста, только решения CSS, ..

Ответы [ 2 ]

0 голосов
/ 14 ноября 2019

Что-то вроде этого может сработать (возможно, вам придется немного поработать с числами, чтобы получить желаемый результат): 

@media screen and (min-width: 1290px) {
  .content-block {
    zoom: calc((100% / 15) * 100)
  }
}
<div class="content-block">
  alalala
</div>

Примечания

  • Я использовал нижнюю точку останова экрана, чтобы проверить ее на своем дисплее (яне имеет отображения 4k)
  • У него есть одна оговорка вычисления с шириной родительского элемента, но если вы используете body для вычисления, это может просто сработать.
  • развернутьфрагмент, чтобы вы могли увидеть разницу.

Обновление

Однако, лучшим решением было бы установить корень em заданного размера (приблизительно 10 пикселей) и увеличьте это значение выше определенного размера экрана с помощью медиазапросов. Также важно использовать rem в качестве единицы измерения везде в ваших таблицах стилей (вместо em, px).

Связанный вопрос: Как установить базовый размер для rem

0 голосов
/ 14 ноября 2019

Вам не нужно использовать проценты для вычисления значения calc для работы. Вы можете использовать число для представления значения масштабирования. Значение 1 соответствует значению 100%. Я не уверен, что calc () возвращает, когда базовое значение равно 100vh, но вы можете попробовать (я сам не проверял): 

@media screen and (min-width: 1921px) {
  .content-block {
    zoom: calc (100vw / 1500);
    line-height: 150%;
  }
}

Что это будет делать 4000px / 1500= 2.666666666666667 . Это числовой эквивалент того, что вы ищете.

Как я уже сказал, я не уверен, что 100vh возвращает для расчета. Я предполагаю значения px. Я попытаюсь проверить это и обновлю свой ответ соответственно.

edit: Это не работает. Вот моя пробная ручка. Входные данные для вычисления должны быть числом (%, пикселем или числом)

https://codepen.io/jclark86613/pen/RwweMzw

================ ОБНОВЛЕНИЕ===================

Я не думаю, что есть способ сделать это без JavaScript. Самый минимальный js-ответ, который я могу выработать: 

<body onresize="document.documentElement.style.setProperty('--display-height', window.screenY )">
    <div class="zoom">TEXT</div>
</body>

:root {
  --display-height: 15;
}

.zoom {
  zoom: calc( var(--display-height ) / 15 );
}

Это позволяет вам использовать dom для запуска простого javascript (без js-файла). Пример пера:

https://codepen.io/jclark86613/pen/zYYmjxJ

...