Question

我们应该如何根据设备宽度设置字体大小，以便移动网站在所有宽度设备上呈现正常。我正在使用jquery mobile。是否会照顾到这一点。

Answer 1

视口。 David Storey撰写的文章：https://css-tricks.com/viewport-sized-typography/

例如：

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

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

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

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

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

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

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

字体大小取决于设备宽度

2 个答案: