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

时间：2016-12-09 13:59:19

标签： 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

结果如下：

chrome-test

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

所以，在前两种情况下，我得到的字体大小与设备屏幕尺寸大致相同，这是我想要达到的目标（尽管如此，我很困惑，{{1} } 也显示几乎相同的大小，当它应该更小时） - 所以这一切都很好。

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

但是，我认为em会考虑设备屏幕分辨率，但看起来并非如此：

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

  

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

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

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

3 个答案:

答案 0 :(得分：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。无论方向如何。将它与calc()中的基本1em相结合，为我们提供了一种在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相乘，之后我们将两个值相加以确定字体大小。

答案 1 :(得分：1)

好的，我想我找到了一个可以使用的解决方案，它使用了JavaScript。通过下面粘贴的代码，我现在可以在Chromium Developer Tools中的不同设备中进行测试：

devtools-test-2

正如我们所看到的，第一个div的相对大小.testdiv现在具有em中的规范，它是在设备大小之间保留的（这是我想要的）;第二个div中的px，正如预期的那样不会保留相对大小 - 第三个案例也没有pt规范。

我遇到的第一个问题是如何获得设备分辨率。请注意，vw，vh - 以及vmin和vmax - 与视口大小相关，即窗口大小。这在移动设备上并不是一个问题，因为移动设备上的浏览器通常以“全屏”开头（我甚至不确定是否可以在移动设备，iOS或Android上调整浏览器/应用程序窗口的大小） - 但它可能如果在桌面上使用浏览器，浏览器最终可能无法全屏显示，则会出现问题。

值得庆幸的是，可以使用JavaScript（How to detect the screen resolution with JavaScript?）获取设备分辨率，在这种情况下，我得到设备的宽度和高度（以像素为单位） - 从中​​我可以计算devicemin两者中较小的一个（类似于vmin）。然后我将“基本字体大小”（<html>元素的字体大小）设置为devicemin的2.67％（这是我自己的任意选择），以像素为单位。希望这能确保我在具有不同分辨率的设备上具有相对于设备分辨率相同的字体大小。

第二个问题，对我来说有些意外，是你必须头部有一个<meta name="viewport" content="width=device-width, initial-scale=1.0"/>条目/指令！否则，没有它，iOS浏览器将只应用自己的字体大小/缩放比例，因此我们会得到意想不到的结果，如：

devtools-ios-no-viewport

事实上，我对Chromium Developer Tools的结果感到非常惊讶，我不得不在Xcode iOS模拟器中尝试测试 - 而且令人惊讶的是，Chromium Developer Tools实际上模拟了这种行为与iOS模拟器相同（左图是开发人员工具中的代码，右边是iOS模拟器中的OP代码）。有关详情，请参阅Some font-size's rendered larger on Safari (iPhone) ...

无论如何，既然我有这样的“基础”字体大小，我可以继续并实现基于宽度＆lt; 20em，＆lt; 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">
  // https://stackoverflow.com/questions/2242086/how-to-detect-the-screen-resolution-with-javascript
  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 {
  /* https://stackoverflow.com/questions/3226001 ; 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 :(得分：0)

此外，您可以使用%符号。如下所示：

＆＃13;
＆＃13; 
div.wrapper {
   font-size: 28px;
}
div.small {
   font-size: 80%;
}
div.big {
   font-size: 150%;
}
＆＃13; 
<div class="wrapper">
    <div class="small">Small text</div>
    <div class="normal">Normal text</div>
    <div class="big">Big text</div>
</div>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题