下圖做好各種版本手機的適配(h5設(shè)計稿為750px)：
<pre>
@media screen and (max-width: 319px) {
html {
font-size: 85.33333px;
}
}
@media screen and (min-width: 320px) and (max-width: 359px) {
html {
font-size: 85.33333px;
}
}
@media screen and (min-width: 360px) and (max-width: 374px) {
html {
font-size: 96px;
}
}
@media screen and (min-width: 375px) and (max-width: 383px) {
html {
font-size: 100px;
}
}
@media screen and (min-width: 384px) and (max-width: 399px) {
html {
font-size: 102.4px;
}
}
@media screen and (min-width: 400px) and (max-width: 413px) {
html {
font-size: 106.66667px;
}
}
@media screen and (min-width: 414px) {
html {
font-size: 110.4px;
}
}
</pre>
H5頁面要求：
1.h5頁面長寬高和間距，原則上使用rem作為單位惠拭；
2.原頁面上如果是px為單位的，以200px = 1rem 职辅；
以下情況為特例：
a.因為background對rem支持的偏差，所以使用background的標(biāo)簽域携，高寬依舊使用px
不過值減半，圖大小減半秀鞭，例子：
舊版：
<pre>
i {
background: url(../img/..) no-repeat;
display: inline-block;
height: 40px;
vertical-align: middle;
width: 138px;
}
</pre>
新版：
<pre>
i {
background: url(../img/..) no-repeat;
-webkit-background-size: 69px 20px;
background-size: 69px 20px;
display: inline-block;
height: 20px;
vertical-align: middle;
width: 69px;
}
</pre>
b.如果原字體使用的也是rem趋观，則值除以20，例子：
舊版：
<pre>font-size: 2.8rem;</pre>
新版：
<pre>font-size: 0.14rem;</pre>
c.圖片排列的皱坛，盡量使用百分比來保證列數(shù)。
