如何根据页面高度调整文本大小？

Question

我希望我的网站的单一形式遵循一个简单的规则：在您观看的每个分辨率下，页面必须看起来相同。

所以我需要h1为高度，例如，页面的10％，h2为7％等。

有没有办法用CSS实现这个目标？

Answer 1

嗯，作为纯CSS解决方案，您可以使用vh Viewport-percentage个长度来指定元素在视口高度上指定font-size / line-height：

<强> EXAMPLE HERE

h1 { font-size: 10vh; line-height: 10vh; }
h2 { font-size: 7vh;  line-height: 7vh; }

  

<强> 5.1.2 Viewport-percentage lengths: the vw, vh, vmin, vmax units

     

视口百分比长度是相对于的大小   初始包含块。当初始的高度或宽度   包含块被更改，它们会相应缩放。然而，   当根元素上的溢出值为auto时，任何滚动   假设条不存在。注意初始包含   块的大小受到滚动条的存在的影响   视口。

     

<强> vh unit
  等于初始包含块高度的1％。

值得注意的是vh单位is supported in the modern web browsers（包括IE9 +）。