今天有個朋友在群裡上傳了一份案例，點進去研究了起來，發現了rem這個單位。
然後我就開始百度rem，搜到幾篇好文章，跟大家分享一下，
以下代碼，是在朋友所發案例中拷貝的
<!doctype Html>
<Html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
</body>
</Html>
<script>
//auto adaptation
var calculate_size = function () {
var BASE_FONT_SIZE = 100;
var docEl = document.documentElement,
clientWidth = docEl.clIEntWidth;
if (!clIEntWidth) return;
docEl.style.fontSize = BASE_FONT_SIZE * (clIEntWidth / 320) + 'px';
};
// Abort if browser does not support addEventListener
if (document.addEventListener) {
var resizeEvt = 'orientationchange' in window ? 'orIEntationchange' : 'resize';
window.addEventListener(resizeEvt, calculate_size, false);
document.addEventListener('DOMContentLoaded', calculate_size, false);
calculate_size();
}
</script>
關於var BASE_FONT_SIZE = 100;
如下解釋：
根元素的值可以任意的去定義，
但是建議最小定義20px以上，
還有定義的時候要考慮方便自己換算，
有些人定100px，
但是不要定義10px，
因為Chrome不支持中文字體小於12px，
所以會導致當計算小於12px的時候，
會默認取12px去計算，導致中文版Chrome的rem計算不准確。
關於clIEntWidth
在谷歌浏覽器手機模式下測試，
iphone4,5,6，顯示為980px，
clIEntWidth參考文章：
http://www.cnblogs.com/fullhouse/archive/2012/01/16/2324131.Html
http://www.cnblogs.com/kongxianghai/p/4192032.Html
補充關於clIEntWidth / 320
320沒啥用
現在一般是640的，640是個變數
設計稿的寬一般都是640px
如果設計師給你的設計稿是670px的
就把640改為670a