基於設備寬度的字體大小

Question

我們應該如何根據設備寬度設置字體大小，以便移動網站在所有寬度設備上呈現良好。我正在使用jQuery手機。它是否照顧到這一點。

Answer 1

html {font-size：62.5％; } body {font-size：1em;}

@media（max-width：300px）{{font-size：70％;} } }

@media（min-width：500px）{{font-size：80％;}} } }

@media（min-width：700px）{{font-size：120％;}} } }

@media（min-width：1200px）{{font-size：200％;}} } }

Demo : http://jsfiddle.net/pLyjt/ 

Answer 2

視口。 本文作者大衛斯托雷：https://css-tricks.com/viewport-sized-typography/

例：

#box{ 
 
    background-color:black; 
 
    width: 100vh; 
 
} 
 

 

 
h1.rad { 
 
text-align: center; 
 
vertical-align: middle; 
 
color: #999; 
 
font-family: "Helvetica Neue"; 
 
font-size: 3.14159vw; 
 
line-height: 6.66vh; 
 
font-weight: 100; 
 
text-transform: uppercase; 
 
}

<div id="box"> 
 
<h1 class="rad"> 
 
    Viewport sizing.<br>So rad. 
 
    </h1> 
 
    </div>