字體大小是較小的分辨率

這裏太小，是我的代碼：字體大小是較小的分辨率

<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

是的，完全一樣 –

字體大小是較小的分辨率

回答

相關問題