前端面试题-rem 原理

最新推荐文章于 2024-07-20 18:16:53 发布

小松冲冲冲~

最新推荐文章于 2024-07-20 18:16:53 发布

阅读量2.2k

点赞数 1

分类专栏：移动端开发文章标签：前端 android ios

原文链接：https://www.cnblogs.com/redFeather/p/15330676.html

版权

REM 移动端适配响应式布局设备宽度设计稿

关键词由CSDN通过智能技术生成

移动端开发专栏收录该内容

1 篇文章 0 订阅

订阅专栏

rem原理
1、rem定义
rem是相对长度单位，相对于html元素(根元素)font-size计算值的倍数的css单位。

简单理解：1rem = html的font-size值（px）

eg:
html{
font-size:10px;
}
div{
font-size:1rem;//实际 1*10px=10px
}
2、适配原理
js设置 html标签的font-size = 移动设备宽度/设计稿宽度 * 100 + “px”

具体：移动设备宽度/设计稿宽度是渲染效果相对于设计稿的缩放比 ==》 *100 是为了把rem单位的font-size值放大100倍（因为当font-size值小于浏览器支持的最小字体时，浏览器会把这个值按最小字体处理），为了方便计算，倍数一般为10或100

eg:

设计稿宽度700px，窗口宽度700px，倍数为100 ：

html { font-size:100px } 设盒子 width:1rem;（即100px）此时盒子占屏1/7

若窗口宽度 350px ：

html {font-size:50px} 此时盒子宽度 1rem=50px 盒子占屏1/7 实现了移动端适配。

3、js实现
根据获取到的设备宽度，动态修改根元素的font-size值

var cw = document.documentElement.clientWidth;
if (cw > 750) {
cw = 750;
}
document.getElementsByTagName(“html”)[0].style.fontSize = 100 * ( cw / 750) + ‘px’
兼容性

(function(designWidth, maxWidth) {
var doc = document,
win = window;
var docEl = doc.documentElement;
var tid;
var rootItem,rootStyle;

function refreshRem() {
    var width = docEl.getBoundingClientRect().width;
    if (!maxWidth) {
        maxWidth = 640;
    };
    if (width > maxWidth) {
        width = maxWidth;
    }
    var rem = width * 100 / designWidth;
    //兼容UC开始
    rootStyle="html{font-size:"+rem+'px !important}';
    rootItem = document.getElementById('rootsize') || document.createElement("style");
    if(!document.getElementById('rootsize')){
    document.getElementsByTagName("head")[0].appendChild(rootItem);
    rootItem.id='rootsize';
    }
    if(rootItem.styleSheet){
    rootItem.styleSheet.disabled||(rootItem.styleSheet.cssText=rootStyle)
    }else{
    try{rootItem.innerHTML=rootStyle}catch(f){rootItem.innerText=rootStyle}
    }
    //兼容UC结束
    docEl.style.fontSize = rem + "px";
};
refreshRem();

win.addEventListener("resize", function() {
    clearTimeout(tid); //防止执行两次
    tid = setTimeout(refreshRem, 300);
}, false);

win.addEventListener("pageshow", function(e) {
    if (e.persisted) { // 浏览器后退的时候重新计算
        clearTimeout(tid);
        tid = setTimeout(refreshRem, 300);
    }
}, false);

if (doc.readyState === "complete") {
    doc.body.style.fontSize = "16px";
} else {
    doc.addEventListener("DOMContentLoaded", function(e) {
        doc.body.style.fontSize = "16px";
    }, false);
}

})(750, 750);

转载地址
https://www.cnblogs.com/redFeather/p/15330676.html