web移动端开发总结-布局篇

这周做了一个移动端的项目，在开发过程中，踩到了不少坑，也学到了不少东西。在此记录下来一些重要的东西。

一、单位

说到移动端，不得不提适配问题，大大小小的移动设备不但让做Android和ios的难过，因为设备大小和浏览器的差异，现在也让前端开始头疼了，不过，方法总是比问题多，我们是革命的队伍，遇到问题就要上！
因为现如今市面上移动设备的分辨率大小不同，显然咱们常用的px单位在这个时候就有些不太灵光了，为此，css3出了一个新单位——rem，rem是移动端神器，它完美解决了分辨率的适配问题。

rem就是相对于根元素的font-size来做计算,举个例子：

/*定义HTML根元素字体大小*/
html{
        font-size: 10px;
}
/*定义子元素，采用rem作为单位*/
body{
       width: 10rem;  /*相当于10*10px=100px*/
       height: 10rem; /*相当于10*10px=100px*/
       font-size: 1.4rem;  /*相当于1.4*10px=14px*/
       border-radius: .5rem /*相当于0.5*10px=5px*/
}

像这样一个宽高各100px的box就出现了，很简单吧，发现没，有些像我们以前常用的em，不过rem是相对于根元素()的字体大小，em相对 于父元素的字体大小。

虽然很简单，但是移动设备那么多，我们又怎么根据手机屏幕的分辨率不同，去设置的字体大小呢？

我知道的方法有2个：

1）通过媒体查询

/*默认为20px*/
html{
    font-size: 20px;
}

/*判断宽度设置不同的Html font-size值去覆盖默认值*/
@media only screen and (min-width: 320px) {
html{
       font-size: 10px;
    }
}
@media only screen and (min-width: 375px) {
html{
       font-size: 16px;
    }
 }
@media only screen and (min-width: 414px) {
html{
       font-size: 20px;
    }
 }

像这样通过媒体查询的方式，只需要把常用的屏幕宽度考虑进去即可，能够满足大部分应用场景，不过这一做法不够严谨，处女座的你，怎么能满足呢？那就用js去设置fontSize吧！

2）通过js计算

 //设置fontSize
var doc = document, win = window;
function initFontSize () {
    var docEl = doc.documentElement,
    resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
    recalc = function() {
        var clientWidth = docEl.clientWidth; 
        //window.innerWidth;
        if (!clientWidth) return;
        fontSizeRate = (clientWidth / 375);
        var baseFontSize = 10 * fontSizeRate;
        docEl.style.fontSize = baseFontSize + 'px';
    };

    recalc();
    if (!doc.addEventListener) return;
    win.addEventListener(resizeEvt, recalc, false);
    doc.addEventListener('DOMcontentLoaded', recalc, false);
};
initFontSize();

通过js设备的屏幕分辨率，可以计算出相应的字体的大小，这个方法可以适配所有屏幕的大小，这下就完美许多了。

二、使用标签中的viewport布局

有了rem单位还不够，得再加上viewport，如下：

其中width=device-width表示设备宽度，也可以写死；Initial-scale=1.0表示初始化缩放； minimum-scale=1.0, maximum-scale=1.0分别表示最大和最小缩放值；user-scalable=no表示不允许缩放。name="viewport"这个是必须要有的，有了这个标签，页面就有那么点意思了。

三、弹性布局盒子布局

以前PC端布局方式通常会使用float、margin、padding等方式布局，这些方法不仅有繁琐的计算，而且在移动端还容易出错。现在移动端，有更好的选择，使用flexbox布局方式。

一直以来这种布局方式都有兼容性问题，让前端同学想用，又不敢用，究其原因也就是即分不清它各个版本的编写规范和兼容性。值得惊喜的是，目前除了Opera mobile12，移动端的各大浏览器都是支持flexbox的旧版语法的，但不包含flex的wrap属性。所以可以大胆用，不用太担心。

需要注意的问题：

a) 虽然移动端的各大浏览器都是支持flexbox的旧版语法的，但是还是得有兼容性写法;

b) 在开发的时候，我发现在使用弹性盒子模型时，如果涉及到文字的时候需要注意，在li里写上“我们”和“我们的”，分别是两个字和三个字。会有不同的宽度而导致不均分，解决办法，如上面css所示，我设置了子元素width为5%（只有设置了li是统一的width就行，不一定需要是5%）就可以解决这个问题。

总结

移动端布局的问题就说到这，等后端做好接口然后开始绑定数据。不过移动端开发的问题远远不止，要想做好移动端，需要学习的还有很多。革命尚未成功，同志仍需努力啊。