h5移动端布局实践

h5的移动布局有很多种方法，去网上一搜，比丰胸小广告还多，还附赠了一大堆的相关概念，大同小异，我帮你做了实践，筛选出了最常用的一种方法，就是用rem布局。

我们首先理顺PC到手机的来龙去脉，知之才能更好的用之。PC时代，没有智能手机，人们也没有在手机上浏览网页的需求，因此那时很多设计稿都是为大屏幕设计的，然而到了移动互联网时代，在手机上阅读内容已经是家常便饭，但此时依然存活着大量为PC设计的网站，如何让用户在小小的手机屏幕上也能正常浏览这些老PC网页呢？移动浏览器的各大厂商们就开始填坑了。归根到底，还是利益驱动着技术的进步，这些大厂们创造了一个新概念---layout viewport(布局视口)，这个视口也是用px来衡量的，每个移动浏览器都有一个layout viewport的初始值，比如safari是980px，这个值可以让PC网站在手机上也能完整的渲染出来。

这个视口的概念是虚拟的，它的尺寸远大于手机屏幕的物理尺寸，目的就是把PC网站放进这个虚拟的视口中，好让用户在手机上也能看到PC网站的全部内容，如下图所示：

内容倒是能全部显示出来，但是字会特别小，用户需要手动缩放页面来看清内容，体验还是不够舒适，因此又催生了一批专门为移动端设计的网站。移动设计稿的尺寸远远小于PC设计稿，但是layout viewport的宽度没变，如果设计师设计了一个按钮是20px，这个按钮在980px的画布上就会显得特别小，如果按照移动设计稿标注的px来设置元素的宽高还是不行，因此iphone首先推出了一个新的解决方案，使得移动浏览器中支持meta标签，在这个标签中可以修改layout viewport的宽度，比如下面折行代码：

layout viewport原本在safari中是980px，把它的宽度设置为等于device-width后就变小了很多，device-width是个跟设备相关的值，比如iphone都是320px，不同的手机这个值多少有些不同，不过一般都比layout viewport小。现在移动设计稿中20px的按钮在320px的画布上就不会显得太小了，前面铺垫这么多，总结一下就两点：

为了在手机上也能正常看PC网站的内容，各大浏览器厂商发明了layout viewport。

为了让专门为手机设计的网站优雅显示，也为了填补layout viewport的坑，所以又发明了meta标签，这个标签可以让开发者自定义layout viewport的大小。

了解了前因后果，我们回归到移动端的布局方案上，rem布局是说开发者设定好html的font-size大小，其子元素的宽高内边距外边距都相对于这个根元素的font-size来设置大小，我们只要针对不同的设备屏幕大小设置一个不同的font-size，这样网站里面的内容会根据这个值自动缩放。那么如何设置font-size呢？首先把meta标签设置好，其次用JS来设置font-size：

上面这段代码的意思是检测当前程序运行环境的浏览器的layout viewport的宽度，把这个宽度十等分，当然也可以八等分，九等分，这里分成10份，只是为了方便计算。比如某个浏览器视口宽度是980px，那么html的font-size就是98px，html的子元素用单位rem来表示，比如设计稿的总宽度是1080px，设计稿上有个按钮，设计师标注的这个按钮宽200px，那么代码中就可以给这个按钮的宽度设置为1.85rem，这个值是怎么算出来的呢？1080px分成10份，每一份是108px，按钮的宽度就是200/108=1.85rem。那么在980px的屏宽上，这个按钮的宽度就是1.85*98=181px。当然按设计图上的每个标注自己手工换算单位是很不方便的，如果你使用LESS，可以写个mixins来自动转换单位，具体方法见下图：

最后总结一下步骤：

在head标签中设置meta标签来改变layout viewport的初始值

用JS动态设置html的font-size

根据设计图的标注，将各个元素的宽高转换为以rem为单位的数值

参考资料：

https://developer.mozilla.org/zh-CN/docs/Mobile/Viewport_meta_tag

http://tgideas.qq.com/webplat/info/news_version3/804/7104/7106/m5723/201509/376281.shtml

https://segmentfault.com/a/1190000006068808

https://www.quirksmode.org/mobile/viewports.html

https://www.quirksmode.org/mobile/viewports2.html