在较小的分辨率下，字体大小太小

这是我的代码：

 font-size: 2vh; 

在高分辨率下，文本清晰可见：

但是在较小的分辨率上：

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

我的视口：

  
  
    

 




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.

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;
}

Johannes.. 5

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

rem与浏览器的基本（“根”）字体大小（在移动浏览器中通常以适合设备的方式设置）有关，em与父元素的字体大小（继承的）有关，可以有点棘手。在这两种情况下，均rem/em意味着参考大小的100％（请参见上文），因此例如1.6 rem是根大小的160％，这对于标头而言可能是一个不错的值。

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

rem与浏览器的基本（“根”）字体大小（在移动浏览器中通常以适合设备的方式设置）有关，em与父元素的字体大小（继承的）有关，可以有点棘手。在这两种情况下，均rem/em意味着参考大小的100％（请参见上文），因此例如1.6 rem是根大小的160％，这对于标头而言可能是一个不错的值。