(function flexible(window,document) {
var docEl = document.documentElement;
function setRemUnit(){
var clientWidth = docEl.clientWidth;
docEl.style.fontSize = (clientWidth / 750 ) * 100 + "px";
var scaledFontSize = parseInt(window.getComputedStyle(document.querySelector("html"),null).getPropertyValue("font-size"));
if(parseInt(docEl.style.fontSize) !== scaledFontSize){
var val= (clientWidth/750)*100;
docEl.style.fontSize= val * val/scaledFontSize+"px"
}
}
setRemUnit();
window.addEventListener("resize",setRemUnit);
window.addEventListener("pageshow",function(e){
if(e.persisted){
setRemUnit()
}
})
}(window,document));
设计稿 750px, 如果设计稿写 width:150px;代码写 1.5rem即可
代码分步骤解析:
(1)核心代码:计算 rootFontSize ,计算系数 封装成立即调用函数
(function () {
function setFontSize () {
var screenWidth = window.screen.width
document.documentElement.style.fontSize = (screenWidth / 750) * 100 + 'px'
}
setFontSize()
})()
计算方式如上
(2)当网页变化(resize)的时候
(function () {
function setFontSize () {
var screenWidth = window.screen.width
document.documentElement.style.fontSize = (screenWidth / 750) * 100 + 'px'
}
setFontSize()
window.addEventListener('resize', setFontSize) // 当浏览器切换手机机型
})()
其实到这,已经完美解决了,但有时候用户骚操作,放大手机字体等等,这样布局就乱了,如果用户放大手机字体,应该把当前页面document.documentElement.fontSize重置成我们算好的
var scaledFontSize = parseInt(window.getComputedStyle(document.querySelector("html"),null).getPropertyValue("font-size"));
if(parseInt(docEl.style.fontSize) !== scaledFontSize){
var val= (clientWidth/750)*100;
docEl.style.fontSize= val * val/scaledFontSize+"px"
}
以上all