jquery - 基于设备宽度的字体大小

Question

我们应该如何根据设备宽度设置字体大小，以便移动网站在所有宽度的设备上都能正常呈现。我正在使用jquery mobile。有没有管这个。

Answer 1

视口。David Storey 的文章：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>

Answer 2

html { 字体大小：62.5%; } 正文 { 字体大小：1em;}

@media (max-width: 300px) { html { font-size: 70%; } }

@media (min-width: 500px) { html { 字体大小: 80%; } }

@media (min-width: 700px) { html { 字体大小: 120%; } }

@media (min-width: 1200px) { html { 字体大小: 200%; } }

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