Большие шрифты на меньших экранах без запросов @media или javascript?

Ответ 1

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

Пример:
font-size: calc(40px - 2vw);

Codepen DEMO

В качестве альтернативы вы можете использовать другие 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

Ответ 2

По определению, 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();

Ответ 3

Вот решение 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>

Ответ 4

Я думаю, что лучшее, что вы можете сделать, это использовать размер шрифта, который не относится к окну просмотра. Например, 1em будет относительно большим на мобильном устройстве и будет относительно небольшим на рабочем столе клиента. Если вы используете макет жидкости, em идеально. Если вы используете статический макет, лучшим вариантом будет px. Но использование px немного немного, потому что мобильное устройство потенциально может иметь столько же пикселей, сколько клиентский десктоп.

Причина, по которой calc(10vw / 2) работает, но calc(100 / 2vw) не существует, потому что первая оценивает 5vw, а последняя оценивает 50/vw, которая не является выражением расстояния. Точнее, двигатель может делить только на скалярный

В суммировании, чтобы делать то, что вы хотите сделать, вам нужно иметь макет жидкости и использовать em в качестве вашего устройства для размеров шрифта. Но вы не сможете получить прямое отношение размера видового экрана без JavaScript, что, конечно же, вы, как правило, не должны полагаться на цели макета.

Ответ 5

Вы можете использовать относительный стиль шрифта. как -

html, body {
font-size: 16px;
}

h1 {
font-size: 2.5em;
}

p {
font-size: 1em;
}