在没有@media 查询或 JavaScript 的小屏幕上使用更大的字体？答案

【问题标题】：Bigger fonts on smaller screens without @media queries or javascript?在没有@media 查询或 JavaScript 的小屏幕上使用更大的字体？
【发布时间】：2016-06-28 23:23:57
【问题描述】：

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

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

codepen of my first try

【问题讨论】：

因为你不能除以“非数字”。将维度值除以数字是可行的，因为 10vw 除以 2 必然是 5vw。但是，将 10 除以 2vw 会做什么？结果将是 5/vw，或“5 倍于 1/vw”，这是没有意义的。
感谢您的评论，迈克；现在更清楚了。我的目标是使用calc() 方法让字体大小与屏幕大小成反比（移动设备上的字体更大，台式机上的字体更小），但这种方式似乎是不可能的。
你希望最终的值是多少... 50vw???
不，我在想... 1000px 屏幕的 50vw 意味着 500px；而 500px 屏幕的 50vw 意味着 250px；所以一个数字除以一个 vw 增量在大屏幕上会更小。
不太清楚你的意思 - 你想让字体变小，屏幕越大吗？（in 或 cm 之类的绝对单位在那里不起作用有什么原因吗？）

标签： css fonts calc

【解决方案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();

【讨论】：

【解决方案2】：

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

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

总之，要做你想做的事，你需要有一个流畅的布局，并使用em作为字体大小的单位。但是如果没有 JavaScript，您将无法直接获得视口大小的比例，当然您通常不应该将其用于布局目的。

【讨论】：

【解决方案3】：

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

与 CSS 相比，它有一个优点，您可以设置最小/最大大小，并且可以作为一种渐进式增强功能，适用于启用脚本的用户，因此无风险。

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>

【讨论】：

赏金原因：a) 纯 javascript 不仅仅是目标（仅 css），但比 jQuery 更轻。 b) 错误信息被击中并更新答案c) sn-p 上的示例运行良好。

【解决方案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 - 相对于视口宽度的 1%*；
vh - 相对于视口高度的 1%*；
vmin - 相对于视口* 较小尺寸的 1%；
vmax - 相对于视口* 较大尺寸的 1%；

*viewport = 浏览器窗口大小。

来源：w3schools

【讨论】：

我刚刚找到了这个解决方案。无论如何，这个问题仍然是一个开放的赏金，所以欢迎新的想法/信息。
我的回答的好处是你可以有一个最小/最大尺寸，并且对性能的影响很小，因为它只针对一个项目。

【解决方案5】：

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

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

h1 {
font-size: 2.5em;
}

p {
font-size: 1em;
}

【讨论】：