在没有 @media 查询或 javascript 的情况下在较小的屏幕上使用较大的字体？

Question

@media 查询是否有替代方法来实现与屏幕大小成反比的字体大小？（例如：2vw 的相反效果，在小屏幕上字体变小）；

我的第一个尝试是将一个值除以视口宽度增量，但 font-size: calc(10vw / 2); 有效，而 font-size: calc(100 / 2vw); 不幸无效。

Answer 1

根据定义，vw 是视口宽度的 1/100。而已。 2vw = 屏幕的 2/100。没有办法让它成反比，因为数学不是那样的。我假设您将此作为思想实验进行，而不是尝试解决代码中的问题，所以我打算就此打住。

你可以通过javascript计算出字体的大小成反比。 Here's a codepen

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();

Answer 2

我认为您能做的最好的事情就是使用与视口无关的字体大小。例如，1em 在移动设备上相对较大，在桌面客户端上相对较小。如果您使用流畅的布局，em 是完美的。如果您使用静态布局，最好的选择可能是 px。但是使用 px 有点不确定，因为移动设备可能具有与桌面客户端一样多的像素。

calc(10vw / 2) 有效而 calc(100 / 2vw) 无效的原因是前者的计算结果为 5vw 而后者的计算结果为 50/vw，这不是表达式的距离。更准确地说，引擎只能除以标量

总而言之，要想做您想做的事，您需要流畅的布局并使用 em 作为字体大小的单位。但是，如果没有 JavaScript，您将无法获得视口大小的直接比例，当然，您通常不应依赖它来进行布局。

Answer 3

这是一个脚本解决方案（即使你想要，并且只找到了一个 CSS），虽然这个对性能的影响很小并且每次调整大小只需要运行一次，并且只有一个元素，正文。

它比 CSS 有一个好处，您可以拥有 min/max 大小，并且可以作为一种渐进式增强功能为已启用脚本的用户提供无风险的方式。

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>

Answer 4

您不能将 px 值除以视口宽度增量，但您可以实现这种反尺寸行为减少 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 - Relative to 1% of the width of the viewport*;
vh - Relative to 1% of the height of the viewport*;
vmin - Relative to 1% of viewport's* smaller dimension;
vmax - Relative to 1% of viewport's* larger dimension;

*viewport = the browser window size.

Source: w3schools

Answer 5

您可以使用相对字体样式。喜欢 -

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

h1 {
font-size: 2.5em;
}

p {
font-size: 1em;
}

在没有 @media 查询或 javascript 的情况下在较小的屏幕上使用较大的字体？

Bigger fonts on smaller screens without @media queries or javascript?

css

fonts

calc