简单的手机端布局入门

手机端的布局和PC端的布局，应该差不多，但是要注意几个点：

1. 手机端有个最基本的meta标签要加：

   <meta name="viewport" id="viewport" content="width=device-width, initial-scale=1">

网页手机wap2.0网页的head里加入下面这条元标签，在iPhone的浏览器中页面将以原始大小显示，并不允许缩放。

说到移动平台meta标签，那就不得不说一下viewport了，那么什么是viewport呢？

viewport即可视区域，对于桌面浏览器而言，viewport指的就是除去所有工具栏、状态栏、滚动条等等之后用于看网页的区域

非必须标签

<meta name="format-detection" content="telephone=yes"/>
//当该 HTML 页面在手机上浏览时，该标签用于指定是否将网页内容中的手机号码显示为拨号的超链接。

手机端的像素一般用em或者rem,这次用rem主要是想动态计算一下网页各个元素展示的大小，具体用js来计算，加在网页的head里面

  <script type="text/javascript">
        ;(function(window){
            var width = window.screen.width;
            var html = document.getElementsByTagName("html")[0];
            html.style.fontSize = width / 30 + "px";
            console.log(html.style.fontSize);
            window.onresize = function(){
                var width = window.screen.width;
                html.style.fontSize = width / 31 + "px";
            }
        })(window);
    </script>
//具体html.style.fontSize = width / 31 + "px";中的31是多少，这就要看自己要做多大的适应了。

这里的意思是，根据屏幕的大小来设置html的font-size大小，假如width是3000px;那么html的font-size大小就是3000/30 == 100px;也就是说1rem就是100px的大小，假如一个div的宽度是100px,就可以设置width:1rem,这样做的好处是动态去计算html根元素的font-size大小，要是自己开发调试的时候记得切换不同分辨率的手机的时候记得刷新一遍

以下是我自己做的效果：
ipad

6plus

这只是两个不同分辨率下的效果。

css 代码（例如）

.header-description{
    width: 17rem;
    padding-top: 5rem;
    margin: auto;
    text-align: center;
}

以上布局总结

资料：
手机适配比好好的博客文章