rem 響應式頁面字型設定
阿新 • • 發佈:2018-12-23
// “()()”表示自執行函式
(function (doc, win) {
var docEl = doc.documentElement,
// 手機旋轉事件,大部分手機瀏覽器都支援 onorientationchange 如果不支援,可以使用原始的 resize
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
recalc = function () {
//clientWidth: 獲取物件可見內容的寬度,不包括滾動條,不包括邊框
var clientWidth = docEl.clientWidth;
if (!clientWidth) return;
docEl.style.fontSize = 10*(clientWidth / 320) + 'px';
};
recalc();
//判斷是否支援監聽事件 ,不支援則停止
if (!doc.addEventListener) return;
//註冊翻轉事件
win.addEventListener(resizeEvt, recalc, false);
})(document, window);
(function (doc, win) {
var docEl = doc.documentElement,
// 手機旋轉事件,大部分手機瀏覽器都支援 onorientationchange 如果不支援,可以使用原始的 resize
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
recalc = function () {
//clientWidth: 獲取物件可見內容的寬度,不包括滾動條,不包括邊框
var clientWidth = docEl.clientWidth;
if (!clientWidth) return;
docEl.style.fontSize = 10*(clientWidth / 320) + 'px';
};
recalc();
//判斷是否支援監聽事件 ,不支援則停止
if (!doc.addEventListener) return;
//註冊翻轉事件
win.addEventListener(resizeEvt, recalc, false);
})(document, window);