手机h5布局（二）适配

上一篇说到flex布局，这篇说下我的从切图到前端适配的方案。
关于字体是否需要适配大小，个人观点，如果是确定是手机端使用（不包括ipad等较大屏幕）可以使用px为单位。
1.关于切图

视觉图一般会做基于iPhone6的2倍去做750*1334（高度跟随内容变化）并标注大小，切图可以切@2X或@3X的。

2.关于前端
这里用到的是rem；
rem（font size of the root element）是指相对于根元素（html）的字体大小的单位。简单的说它就是一个相对单位。看到rem大家一定会想起em单位，em（font size of the element）是指相对于父元素的字体大小的单位。它们之间其实很相似，只不过一个计算的规则是依赖根元素一个是依赖父元素计算。

既然rem依赖根元素，也就是说，根元素的font-size的改变就能使页面里的rem单位相应的改变，来达到适配的目的，问题来了，怎么控制根元素字体单位大小那，我们一般用两种方法。

1.通过css3媒体查询来改变根元素的字体单位大小。

2.通过设置js来自动检查手机屏幕的宽来改变根元素字体单位大小。

通过css控制看代码

@media only screen and (min-width:320px) {
    html {
    font-size:17.06667px!important
}
}@media only screen and (min-width:335px) {
    html {
    font-size:17.86667px!important
}
}@media only screen and (min-width:345px) {
    html {
    font-size:18.4px!important
}
}@media only screen and (min-width:360px) {
    html {
    font-size:19.2px!important
}
}@media only screen and (min-width:375px) {
    html {
    font-size:20px!important
}
}@media only screen and (min-width:400px) {
    html {
    font-size:21.33333px!important
}
}@media only screen and (min-width:414px) {
    html {
    font-size:22.08px!important
}
}@media only screen and (min-width:430px) {
    html {
    font-size:22.93333px!important
}
}@media only screen and (min-width:454px) {
    html {
    font-size:24.21333px!important
}
}@media only screen and (min-width:460px) {
    html {
    font-size:24.53333px!important
}
}@media only screen and (min-width:480px) {
    html {
    font-size:25.6px!important
}
}@media only screen and (min-width:500px) {
    html {
    font-size:26.66667px!important
}
}@media only screen and (min-width:520px) {
    html {
    font-size:27.73333px!important
}
}@media only screen and (min-width:540px) {
    html {
    font-size:28.8px!important
}
}@media only screen and (min-width:560px) {
    html {
    font-size:29.86667px!important
}
}@media only screen and (min-width:580px) {
    html {
    font-size:30.93333px!important
}
}@media only screen and (min-width:600px) {
    html {
    font-size:32px!important
}
}@media only screen and (min-width:620px) {
    html {
    font-size:33.06667px!important
}
}@media only screen and (min-width:640px) {
    html {
    font-size:34.13333px!important
}
}@media only screen and (min-width:680px) {
    html {
    font-size:36.26667px!important
}
}@media only screen and (min-width:700px) {
    html {
    font-size:37.33333px!important
}
}@media only screen and (min-width:720px) {
    html {
    font-size:38.4px!important
}
}@media only screen and (min-width:735px) {
    html {
    font-size:39.2px!important
}
}@media only screen and (min-width:750px) {
    html {
    font-size:40px!important
}
}@media only screen and (min-width:780px) {
    html {
    font-size:41.6px!important
}
}@media only screen and (min-width:800px) {
    html {
    font-size:42.66667px!important
}
}@media only screen and (min-width:840px) {
    html {
    font-size:44.8px!important
}
}@media only screen and (min-width:900px) {
    html {
    font-size:48px!important
}
}@media only screen and (min-width:960px) {
    html {
    font-size:51.2px!important
}
}

CSS无论哪个手机只要适配一款就OK.

通过js控制看代码

(function (doc, win, undefined) {
    var docEl = doc.documentElement,
        resizeEvt = 'orientationchange' in win? 'orientationchange' : 'resize',
        recalc = function () {
            var clientWidth = docEl.clientWidth;
            if (clientWidth === undefined) return;
            docEl.style.fontSize = 100 * (clientWidth / 375) + 'px';
        };
    if (doc.addEventListener === undefined) return;
    win.addEventListener(resizeEvt, recalc, false);
    doc.addEventListener('DOMContentLoaded', recalc, false)
})(document, window);

js这里我设置了基于ipone6(375*667)的1rem=100px(有利于转换)

前端尺寸要转换成375*667的，也就是2倍的图要除以2，3倍图要除以3，再通过px转换rem(100px=1rem)

注意：由于html设置了由js控制font-size，所以要在body上设置一个常用的font-size:0.2rem(相当于20px;

如果不设置例如line-height之类的就不好控制)

总结：关于使用css还是js适配，个人见解js方便些，代码量少，更好的来展现视觉图,但是需要在你设定的界面写适配（本案例是基于ipone6）。
使用css控制的不精确，无法做到与视觉图匹配，但是不需要指定哪个手机界面，找个看的顺眼的就OK。