分享一个rem的网页布局写法

最近写网站布局的时候碰到了一个比较头疼的客户，然后这个网站也是接别人的尾一些要求都不清楚。

网站写完后客户验货的时候电脑屏幕不一样大我的电脑上显示是正常的，到了客户电脑上就变样了，这样子对于后期和客户的沟通调整产生了很大的问题。

经过这个网站的洗礼，决定找一个解决的办法，这里借鉴了某大神的做法就是用rem进行html编写。以rem为单位进行屏幕大小的动态调整，最终的结果无论在什么屏幕下显示的比例都是一样的。下面附上代码：

js代码：直接复制引入到html里面就行了

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

html部分：加上下面这点css样式意思是1rem等于10px（你肯定理解的）

<script src="size.js"></script>

<style type="text/css">
   *{
        margin: 0;
        padding: 0;
    }
    html{
      font-size: 10px;
   }

好了准备工作已经完成了往后写长度高度的时候就rem代替px，也可以摆脱之前写网页一直要用百分比限制的问题（当然这个方法也能用百分比）

但是有一点不好的是谷歌浏览器最小字体默认12px当你一直缩小的时候其他html部分不会有什么变化，但是字体会变得很大。