css - 使用rem布局的問題

問題描述

是這樣的，看到網上有說可以動態定義根元素的font-size，我使用了document.documentElement.clientWidth/10來定義的，設計稿的寬度是750，按理來說在iphone6上的font-size要為75的，可是，我的卻是37.5，然后就很迷茫了

問題解答

;(function (doc, win, undefined) {

var docEl = doc.documentElement,resizeEvt = ’orientationchange’ in win? ’orientationchange’ : ’resize’,recalc = function () { var clientWidth = docEl.clientWidth; if (clientWidth === undefined) return; docEl.style.fontSize = 20 * (clientWidth / 320) + ’px’;};if (doc.addEventListener === undefined) return;win.addEventListener(resizeEvt, recalc, false);doc.addEventListener(’DOMContentLoaded’, recalc, false)

})(document, window);

iphone的devicePixelRatio的為2,所以你需要設置<meta name='viewport' content='initial-scale=0.5, maximum-scale=0.5, minimum-scale=0.5, user-scalable=no'>