Question

有没有办法根据 浏览器窗口 的百分比来设置文字大小的样式？例如：

h1
{
    height: 15%;
    /* in my ideal world this would be 15% of the window 
       (or parent) size rather than inherited font-size */
}

Answer 1

在CSS3中：

h1{
   font-size: 15vw; // relative to the viewport's width
   font-size: 15vh; // relative to the viewport's height
   font-size: 15vm; // relative to the ratio width/height of the viewport
}

但当然这并不适用于所有浏览器。

请在这里查看：http://www.w3.org/TR/css3-values/#viewport-relative-lengths

Answer 2

如果你不介意一点js，http://fittextjs.com/有一个很棒的jquery解决方案

Answer 3

这不太完美，但使用媒体查询可能会很接近。

@media screen and (max-height: 50px) {
  body {
    font-size: 7.5px;
  }
}

@media screen and (max-height: 100px) {
  body {
    font-size: 15px;
  }
}

@media screen and (max-height: 150px) {
  body {
    font-size: 22.5px;
  }
}

@media screen and (max-height: 200px) {
  body {
    font-size: 30px;
  }
}

等。你必须确定何时制造一个“休息”点以及在低端和高端接受它的距离。

有没有办法使用CSS将文本大小设置为窗口大小的百分比？

3 个答案: