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
在过去,CSS要求实现甚至在计算机屏幕上正确显示绝对单位.但是由于不正确的实现数量超过了正确数量并且情况似乎没有改善,因此CSS在2011年放弃了这一要求.目前,绝对单位必须仅在打印输出和高分辨率设备上正常工作.
好吧,我有什么选择,在所有三种情况下实现大致相同的字体大小(相对于设备屏幕大小):
- 如果我不想使用JavaScript(只有HTML + CSS)？
- 如果我想使用JavaScript(我猜有一种方法可以查询设备屏幕 - 而不是视口 - 分辨率,但我不确定是否真的存在)？
rob*_*t-s 23
我已经编写了一个关于如何使用纯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.无论方向如何.将它与基本的1em结合在一起,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相乘,之后我们添加两个值以建立字体大小.
- 巧合的是,我也在不久前就同一主题发表了一些文章.只是在这里思考; 如果使用了一个类,然后根据屏幕大小将其应用于媒体查询,那么它是否也有意义？因为id是独一无二的. (2认同)
- 对不起,我不能提供小提琴,但我很确定你知道我的意思;-)最后,我最终使用了不同字体大小的媒体查询.@Roberrrt但我绝对会尝试你的方法:-) (2认同)
- 结合这是有道理的,让我结束自己的网站来测试一些东西. (2认同)
- @ Fred-ii-我经常使用20em/40em/80em媒体查询断点,然后"增强"基本字体大小,<20em`calc(1em + 1vw)`.<40em`calc(1.2em + 1vw)`.`calc(1.5em + 1vw)`. (2认同)
- 我认为您可以将（.4em + 1vmin）+（.4em + 1vmax）更改为（.8em + 1vw + 1vh）`。令我感到惊讶的是，没有一种便捷的方式说“使它成为正常大小”并在所有设备上都具有可读性。 (2认同)
好的，我想我找到了一个可以使用的解决方案，它使用 JavaScript。使用下面粘贴的代码，我现在在 Chromium Developer Tools 中的不同设备上进行测试时得到了这个：
正如你所看到的，第一个 div 的相对大小，.testdiv在emnow 中的规范是跨设备大小保留的（这是我想要的）；px在第二个 div 中，正如预期的那样不会保留相对大小——第三种情况也没有pt规范。
我遇到的第一个问题是如何获得设备分辨率。请注意，vw, vh- 因此vmin和vmax- 与视口大小有关，即窗口大小。这在移动设备中并不是什么大问题，因为移动设备上的浏览器通常以“全屏”模式启动（我什至不确定是否可以在移动设备、iOS 或 Android 上调整浏览器/应用程序窗口的大小） - 但它可能如果在桌面上使用浏览器，则可能会出现问题，浏览器最终可能无法全屏显示。
值得庆幸的是，可以使用 JavaScript 获取设备分辨率，（如何使用 JavaScript检测屏幕分辨率？），在这种情况下，我以像素为单位获取设备宽度和高度 - 从它们中，我计算devicemin为两者中较小的一个（类似于vmin）。然后我将“基本字体大小”（<html>元素的字体大小）设置为像素的 2.67% devicemin（这是我自己的任意选择）。希望这样可以确保我在不同分辨率的设备上相对于设备分辨率具有相同的字体大小。
第二个问题，对我来说有点出乎意料，是您必须<meta name="viewport" content="width=device-width, initial-scale=1.0"/>在头脑中拥有一个条目/指令！否则，没有它，iOS 浏览器只会应用自己的字体大小/缩放，因此我们会得到一个意想不到的结果，如：
事实上，我对 Chromium Developer Tools 中的这个结果感到非常惊讶，我不得不在 Xcode iOS 模拟器中尝试测试 - 令人惊讶的是，Chromium Developer Tools 实际上确实模拟了与 iOS 模拟器相同的行为（左下图是开发者工具中的代码，右边是iOS模拟器中的OP代码）。有关更多信息，请参阅某些字体大小在 Safari (iPhone) 上呈现得更大...
无论如何，现在我有了这样的“基本”字体大小，我可以根据宽度 <20em、<40em 等继续并实现响应式设计 - 并确保这些大小将指代任何屏幕上大致相同的相对区域设备...
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/> <!-- MUST have, so iPhone doesn't autozoom and change the fontsize! -->
<script type="text/javascript">
// /sf/ask/156946051/
var devicewidth = window.screen.width;
var deviceheight = window.screen.height;
var devicemin = Math.min(devicewidth, deviceheight);
// say we want base font size: 16px @ 600px (min of 800x600); 16/600 = 0.0266667
var basefontsize = Math.round(0.0267*devicemin);
// apply:
var rootElement = document.documentElement;
rootElement.style.fontSize = basefontsize;
// report:
console.log(navigator.userAgent);
var report = "device res: " + devicewidth + " x " + deviceheight + " ; base font size: " + basefontsize + "/" + rootElement.style.fontSize;
console.log(report);
function reporter() {
document.getElementById("dreport").innerHTML = report + "/" + document.documentElement.style.fontSize + " ... " + navigator.userAgent;
}
window.onload = reporter;
</script>
<style type="text/css">
body {
/* /sf/ask/225820101/ ; no real need/effect in this case, though */
-webkit-text-size-adjust: none;
}
.testdiv, .testdivB, .testdivC {
width: 50%;
height: 30%;
margin: 6px;
border: 2px solid gray;
font-size: 4em;
}
.testdivB {
font-size: 12px;
}
.testdivC {
font-size: 30pt;
}
#dreport {
font-size: 0.76em;
}
</style>
</head>
<body>
<div id="dreport"></div>
<div class="testdiv">Test one writing</div>
<div class="testdivB">Test another writing</div>
<div class="testdivC">Test three writing</div>
</body>
</html>
- 对问题的出色描述和解释，包括解决问题的绝妙方法。做得太好了！ (2认同)
| 归档时间： |
|
| 查看次数： |
7387 次 |
| 最近记录： |