Question

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

我的第一次尝试是按视口宽度增量划分值，但font-size: calc(10vw / 2);无效，而font-size: calc(100 / 2vw);遗憾无效。

codepen of my first try

Answer 1

您不能将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

Answer 2

根据定义，vw是视口宽度的1/100。而已。 2vw =屏幕的2/100。没有办法让它成反比例，因为数学不能那样工作。我假设你是在做一个思想实验，而不是试图解决你的代码中的问题所以我会留下它。

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

HTML：

btoa(9223372036854775302)
"OTIyMzM3MjAzNjg1NDc3NjAwMA=="

btoa(9223372036854775303)
"OTIyMzM3MjAzNjg1NDc3NjAwMA=="

JS：

<div >
    This is text
</div>

Answer 3

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

calc(10vw / 2)有效但calc(100 / 2vw)不起作用的原因是因为前者评估为5vw而后者评估为50/vw，而不是em表达距离。更准确地说，引擎只能除以标量

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

Answer 4

这是一个脚本解决方案（即使你想要，也发现只有一个CSS），虽然这个解决方案很少影响性能，每个resize只需要运行一次，而且只需要一个元素运行。

它比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>

Answer 5

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

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

h1 {
font-size: 2.5em;
}

p {
font-size: 1em;
}

没有@media查询或javascript的小屏幕上更大的字体？

5 个答案: