由于需要做手机网站，对手机端的web布局做了一些研究，总结了一下，大概一下几条：

1 加viewport元标签

 <meta> name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, minimal-ui" />

    viewport可以设置页面的默认宽度和缩放比例，在移动端布局中，是重要的一个元素。

    width=device-width: 宽度等于屏幕的宽度

    initial-scale=1：缩放比例为1

    user-scalable=no： 禁止缩放功能

    minimal-ui：默认进入全屏幕浏览状态

2 使用js自动计算，辅助rm单位，完美设置页面字体

    
    <script>
        //小米官网的写法
        ! function(n) {
            var e = n.document,
                t = e.documentElement,
                i = 720,         //设计图尺寸
                d = i / 100,     //1rem = 100px
                o = "orientationchange" in n ? "orientationchange" : "resize",
                a = function() {
                var n = t.clientWidth || 320;n > 720 && (n = 720);
                t.style.fontSize = n / d + "px"
        };
       e.addEventListener && (n.addEventListener(o, a, !1), e.addEventListener("DOMContentLoaded", a, !1))
        }(window);
    </script>

    动态计算页面的基础字体，其它单位使用相对大小字体rm来控制，可以实现不同的分辨率显示符合的字体大小，这个计算方法是比较常用的，但是肯定有更好的，欢迎探讨。

3 使用流式布局，宽度尽量使用百分比，当然一些左边固定宽度，右边百分比的页面除外。

    设置div的float: right;或者float: left;可以让页面元素在超出的情况下自动换行，让页面随着屏幕大小变化的情况下，元素不至于被挤出页面，看不到。

    宽度尽量使用百分比 width:xxx%;，这样可以让页面适用不同的分辨率情况。

    左边固定宽度，右边百分比的页面，一般左边设置固定的宽度，右边设置百分比宽度，这种情况，实际使用中较多。

  
 .div01 .left{
     float: left;
     width: 150px;
 }
 .div01 .right{
     /*width: 100%;*/
      height: 100%;
 }

4 后面会分享一个布局的例子，直接拷贝就可以使用了，谢谢大家。