问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
开发者社区
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

CSS 字体大小（响应），相对于设备分辨率？

社区维基
1
新手上路，请多包涵

假设我们有以下 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

过去，CSS 要求实现即使在计算机屏幕上也能正确显示绝对单位。但由于错误实施的数量多于正确实施的数量，而且情况似乎没有改善，CSS 在 2011 年放弃了这一要求。目前，绝对单位只能在打印输出和高分辨率设备上正确工作。

好的，那么我有什么选择可以在所有三种情况下实现大致相同的字体大小（相对于设备屏幕大小）：

  • 如果我不想使用 JavaScript（仅 HTML + CSS）？
  • 如果我确实想使用 JavaScript（我想有一种方法可以查询设备屏幕 - 而不是视口 - 分辨率，但我不确定是否真的有）？

原文由 sdbbs 发布，翻译遵循 CC BY-SA 4.0 许可协议

Stack Overflow 翻译htmlcss
阅读 627
1 个回答
得票最新
社区维基
1

不久前，我写了一个关于如何使用纯 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() font-size 应用小型自定义响应方面的好方法。

替代方法（ 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 相乘，然后将这两个值相加以确定字体大小。

原文由 roberrrt-s 发布，翻译遵循 CC BY-SA 3.0 许可协议

撰写回答
你尚未登录，登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进，让解决方法与时俱进
推荐问题
logo
Stack Overflow 翻译
子站问答
访问
宣传栏