最近寫網站佈局的時候碰到了一個比較頭疼的客戶，然後這個網站也是接別人的尾一些要求都不清楚。

網站寫完後客戶驗貨的時候電腦螢幕不一樣大我的電腦上顯示是正常的，到了客戶電腦上就變樣了，這樣子對於後期和客戶的溝通調整產生了很大的問題。

經過這個網站的洗禮，決定找一個解決的辦法，這裡借鑑了某大神的做法就是用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部分不會有什麼變化，但是字型會變得很大。