这是我的代码:

<p> font-size: 2vh; </p>


在高分辨率下,文本清晰可见:



但是在较小的分辨率上:



如何制作文本,在较小的分辨率下不能太小而在高分辨率下不能太大?
如果必须使用媒体查询,那么vh / vw单位有什么意义?

我的视口:

<meta name="viewport" content="width=device-width, initial-scale=1.0">


小代码:

<head>
<meta charset="UTF-8">
<title>title</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css?family=Lato:400,700&amp;subset=latin-ext" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="files/css/style.css">
</head>

<body>
<div id="logo">
<p>Lorem ipsum dolor sit amet,
consectetur adipiscing elit. Phasellus vel mattis risus.
Maecenas vel mauris ex. Curabitur mollis nibh sit amet egestas
fermentum. Ut posuere id sapien in suscipit. Integer a ultrices
metus, nec faucibus ipsum. Morbi nec venenatis nunc. In dignissim
dignissim velit ac finibus.</p>
</div>
</body>


CSS文件:

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    text-align: left;
    color: #FFFFFF;
    background: #31302f;
    font-family: 'Lato', sans-serif;
    font-size: 18px; /* for internet explorer */
    font-size: 2vh;
    -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

#logo p {
    font-size: 20px; /* for internet explorer */
    font-size: 2vh;
    text-align: left;
}

最佳答案

字体大小的vh单位并不理想,因为它们实际上是屏幕/设备高度的百分比。在480像素高的设备上,2vh表示9.6像素,对于常规文本而言绝对太小了。 IMO最好使用emrem单位。

rem与浏览器的基本(“根”)字体大小(在移动浏览器中通常以适合设备的方式设置)有关,em与父级的字体大小有关element-继承的,可能有点棘手。在这两种情况下,一个rem/em表示参考大小的100%(请参见上文),因此,例如1.6 rem是根大小的160%,这对于标头而言可能是一个不错的值。

07-24 09:50
查看更多