rem适配

最新推荐文章于 2022-12-07 10:55:27 发布

mollerlala

最新推荐文章于 2022-12-07 10:55:27 发布

阅读量427

点赞数

分类专栏：前端实用知识点整理

本文链接：https://blog.csdn.net/mollerlala/article/details/104767055

版权

前端实用知识点整理专栏收录该内容

8 篇文章 0 订阅

订阅专栏

本文由三部分构成：实战部分+原理+参考网址

实战部分

实战设置：1rem = 100px

实战代码：下方代码适应绝大多数移动端网页(至于对scale的处理，以后看懂了再补充)

(function (doc, win) {
    var docEl = doc.documentElement,
    resizeEvt = 'orientationchange' in  window ? 'orientationchange' : 'resize',
    recalc = function () {
        var clientWidth = docEl.clientWidth;
        if (!clientWidth) return;
        //此处的psdWidth按设计稿来，设计稿宽是多少，psdWidth就是多少
        var psdWidth = 750;
        docEl.style.fontSize = 100 * (clientWidth / psdWidth) + 'px';
    }
    if (!doc.addEventListener) return;
    win.addEventListener(resizeEvt, recalc, false);
    doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>页面标题</title>
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<link rel="shortcut icon" href="favicon.ico"/>
	</head>
	<body>
	</body>
</html>

实战蓝湖：如下图设置，就可以复制代码了，不过有些阴影，边框还是要换成px才能复制正确

原理

1.首先了解一下前端单位(px，em，rem)的继承范围

px：设置多少就是多少，和其他元素的大小设置无关！

em：继承最近的元素，我好像从来没用过这个单位~~~

rem：继承body或者html元素（也就是根元素），和其他元素的大小设置无关！

2.再聊聊rem与body的fontSize关系

公式：1rem = 根元素设置的字体大小，详细见下方代码

/*浏览器的默认字体高都是16px*/
/*1rem为根元素设置的字体大小，所以下方代码都可以等于1rem*/
html{
    font-size: 100%;/*100% = 16px = 1rem*/
    font-size: 200%;/*200% = 32px = 1rem*/
    font-size: 300%;/*300% = 48px = 1rem*/
}

由上方公式和代码可以得出，1rem可以是任何大小。

3.在移动端自适应的应用

在实际前端项目中，为了方便换算，通常将1rem设置为100px，

理想化情况蓝湖设计稿为750，页面宽度为750，1rem=100px，字体28px=0.28rem

理想化情况蓝湖设计稿为640，页面宽度为640，1rem=100px，字体28px=0.28rem

写页面时全部按理想化的情况编写，那么最后的输出的页面就是自适应的。

比如，理想化750的设计稿加750的页面宽度，当实际手机宽度是640时，1rem就不等于100px，而是85.3px，0.28rem就不是28像素而是23.893px。也就是页面会按照当前根元素的font-size自动调节实际大小