html – CSS字体大小(响应),相对于设备分辨率？

假设我们有以下test.htm：

<html>
<head>
  <Meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <style type="text/css">
.testdiv,.testdivB,.testdivC {
  width: 50%;
  height: 30%;
  margin: 6px;
  border: 2px solid gray;
  font-size: 4em;
}
.testdivB {
  font-size: 12px;
}
.testdivC {
  font-size: 30pt;
}
  </style>
</head>

<body>

  <div class="testdiv">Test one writing</div>
  <div class="testdivB">Test another writing</div>
  <div class="testdivC">Test three writing</div>

</body>
</html>

我已经尝试使用开发人员工具在Chromium中对此进行测试,这允许我模拟不同的设备;这里：

* Apple iPhone 4        : device resolution  320 x  480,a/r 0.666667
* Google Nexus 10       : device resolution  800 x 1280,a/r 0.625
* Amazon Kindle Fire HDX: device resolution 1600 x 2560,a/r 0.625

结果如下：

在这个例子中,所有设备都是纵向的,并且具有“几乎”相同的宽高比(~0.6),即使它们具有截然不同的分辨率.

因此,在前两种情况下,我得到的字体大小大致相对于设备屏幕大小,这是我想要实现的(尽管我很困惑,testdivB也显示为几乎相同)大小,当它应该更小) – 所以这一切都很好.

但是,在第三个例子中,在具有最大分辨率的设备上,testdivB不出所料(因为它在px中定义)相对于设备屏幕尺寸要小得多; testdivA也不是很令人惊讶,因为em与浏览器的“计算字体大小”相关 – 如果我没记错的话,那个也用像素表示.

但是,我认为pt会考虑设备屏幕分辨率,但它看起来不是：

http://www.w3.org/Style/Examples/007/units.en.html

In the past,CSS required that implementations display absolute units correctly even on computer screens. But as the number of incorrect implementations outnumbered correct ones and the situation didn’t seem to improve,CSS abandoned that requirement in 2011. Currently,absolute units must work correctly only on printed output and on high-resolution devices.

好吧,我有什么选择,在所有三种情况下实现大致相同的字体大小(相对于设备屏幕大小)：

>如果我不想使用JavaScript(只有HTML CSS)？
>如果我确实想使用JavaScript(我猜有一种方法可以查询设备屏幕 – 而不是视口 – 分辨率,但我不确定是否确实存在)？

解决方法

我刚刚编写了一个关于如何使用纯HTML / CSS实现此目的的小教程/示例：

响应单位(vmin / vmax)

#small {
    font-size: calc(1em + 1vmin);
}

#medium {
    font-size: calc(1em + 2vmin);
}

#large {
    font-size: calc(1em + 3vmin);
}

<div id="small">Small text</div>
<div id="medium">Medium text</div>
<div id="large">Large text</div>

规则vmin在您的上下文中非常有用.它需要vmin：屏幕最小边的1/100.无论方向如何.将它与calc()中的基本1em相结合,为我们提供了一种在字体大小上应用小型自定义响应方面的好方法.

替代方法(vw / vh)

#small {
    font-size: calc(1em + 1vw);
}

#medium {
    font-size: calc(1em + 2vw);
}

#large {
    font-size: calc(1em + 3vw);
}

<div id="small">Small text</div>
<div id="medium">Medium text</div>
<div id="large">Large text</div>

如果您希望对实际纵横比应用更多控制,我建议使用vw超过vmin.视口宽度(vw)占视口宽度的1/100.

基于视口宽高比(vmin和vmax)的响应单位：

#test1 {
    font-size: calc((.4em + 1vmin) + (.4em + 1vmax));
}

#test2 {
    font-size: calc((.4em + 2vmin) + (.4em + 2vmax));
}

#test3 {
    font-size: calc((.4em + 3vmin) + (.4em + 3vmax));
}

<div id="test1">Small text</div>
<div id="test2">Medium text</div>
<div id="test3">Large text</div>

我对这个解决方案非常满意,这种方式允许我们同时考虑视口宽度和长度.我们将基本字体大小分为两个(在这种情况下为.4em)并将其与1vmin和1vmax相乘,之后我们添加两个值来建立字体大小.

html – CSS字体大小(响应),相对于设备分辨率？

解决方法

相关文章