今天有個朋友在群裡上傳了一份案例，點進去研究了起來，發現了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
在Google瀏覽器手機模式下測試，
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改為670
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
