字体大小是较小的分辨率

这里太小，是我的代码：字体大小是较小的分辨率

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

来源

2017-01-16 Paweł

你能添加一个小的代码片段吗？ – Nitheesh

是的，我刚刚编辑 –

修改了答案。 – Nitheesh

vh单位的字体大小是不理想的，因为它们实际上是屏/设备高度的百分比。在480像素高的设备上2vh表示9.6像素，这对于普通文本来说绝对太小。国际海事组织最好使用em或rem单位。

rem涉及浏览器的基本（“根”）字体大小（在移动浏览器中通常设置为适合设备的方式），em与父级的字体大小有关元素 - 继承，这可能有点棘手。在这两种情况下，一个rem/em意味着引用大小的100％（参见上文），因此，例如1.6 rem是根大小的160％，这对于标题可能是一个很好的值。

来源

2017-01-16 11:36:54 Johannes

对我来说，“em”就够了。 Upvote – MrPk

Okey，我会使用rem单位。你帮了我。 –

您必须设置meta标签的移动解决方案。因此，分辨率将在手机屏幕上得到纠正。

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

你可以找到的细节here。

从您的代码中，您的代码中没有问题。您需要添加media query来调整字体大小。

我已添加示例代码。

<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"> 
 
    <style> 
 
     @media only screen and (max-width: 500px) { 
 
      #logo { 
 
       font-size: 25px; 
 
      } 
 
     } 
 
    </style> 
 
</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>

来源

2017-01-16 11:29:34 Nitheesh

我将使用rem单位和媒体查询。你也帮助了我。 –

你有没有在标题：

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

来源

2017-01-16 11:30:57

是的，完全一样 –

字体大小是较小的分辨率

回答

相关问题