Есть ли альтернатива для запросов @media для достижения размера шрифта, обратно пропорционального размеру экрана? (например: противоположный эффект 2vw, где шрифт становится меньше на маленьких экранах);
Моя первая попытка заключалась в том, чтобы разделить значение на инкремент ширины окна просмотра, но font-size: calc(10vw / 2); работает, а font-size: calc(100 / 2vw);, к сожалению, не работает.
Вы не можете разделить значение px с помощью приращения ширины видового экрана, но вы можете добиться этого значения обратного размера уменьшения a px с помощью приращения ширины видового экрана.
Пример: font-size: calc(40px - 2vw);
В качестве альтернативы вы можете использовать другие 3 единицы, связанные с размером окна просмотра: vh vmin и vmax.
Примеры: font-size: calc(40px - 2vh); font-size: calc(200px - 20vmin); font-size: calc(200px - 20vmax);
vw - относительно 1% ширины окна просмотра *;
vh - относительно 1% высоты окна просмотра *;
vmin. Относительно 1% меньшего размера окна просмотра.
vmax. Относительно 1% размера окна просмотра,* viewport= размер окна браузера.
Источник: w3schools
По определению, vw составляет 1/100 ширины окна просмотра. Это. 2vw = 2/100ths экрана. Нет никакого способа заставить его быть обратно пропорциональным, потому что математика не работает таким образом. Я предполагаю, что вы делаете это как мысленный эксперимент, а не пытаетесь решить проблему в своем коде, поэтому я собираюсь оставить его на этом.
Вы можете рассчитать размер шрифта, который будет обратно пропорциональным с помощью javascript. Вот код
HTML:
<div >
This is text
</div>
JS:
$(window).resize(function() {
area = 50000;
width = $(window).width();
fontSize= (Math.ceil(area/width));
$('div').css('font-size', fontSize);
}).resize();
Вот решение script (даже если бы вы хотели и нашли только CSS), хотя этот эффект очень сильно влияет на производительность, и его нужно запускать только один раз для каждого размера и только для одного элемента.
Он имеет одно преимущество над CSS, вы можете иметь минимальный/максимальный размер и работать в качестве прогрессивного улучшения для пользователей, у которых script включен таким образом, чтобы избежать риска.
var fontMax = 40, fontMin = 14;
function sizeBodyFont() {
var fontSize = ((screen.width / window.innerWidth) * 10);
document.body.style.fontSize = Math.min(Math.max(fontSize,fontMin),fontMax) + 'px';
}
sizeBodyFont();
(function(el) {
window.addEventListener('resize', sizeBodyFont);
}(document.querySelector('#test')))body {
font-size: 20px;
}
span {
font-size: 100%;
}
div {
font-size: 150%;
}<span>Hey there</span>
<div>Hey there</div>Я думаю, что лучшее, что вы можете сделать, это использовать размер шрифта, который не относится к окну просмотра. Например, 1em будет относительно большим на мобильном устройстве и будет относительно небольшим на рабочем столе клиента. Если вы используете макет жидкости, em идеально. Если вы используете статический макет, лучшим вариантом будет px. Но использование px немного немного, потому что мобильное устройство потенциально может иметь столько же пикселей, сколько клиентский десктоп.
Причина, по которой calc(10vw / 2) работает, но calc(100 / 2vw) не существует, потому что первая оценивает 5vw, а последняя оценивает 50/vw, которая не является выражением расстояния. Точнее, двигатель может делить только на скалярный
В суммировании, чтобы делать то, что вы хотите сделать, вам нужно иметь макет жидкости и использовать em в качестве вашего устройства для размеров шрифта. Но вы не сможете получить прямое отношение размера видового экрана без JavaScript, что, конечно же, вы, как правило, не должны полагаться на цели макета.
Вы можете использовать относительный стиль шрифта. как -
html, body {
font-size: 16px;
}
h1 {
font-size: 2.5em;
}
p {
font-size: 1em;
}