共计 1466 个字符，预计需要花费 4 分钟才能阅读完成。
前言
大家好，我是林三心，用最通俗易懂的话讲最难的知识点 是我的座右铭，根底是进阶的前提 是我的初心
REM 布局
REM 是一个单位， REM 布局 是以 REM 为根本的一种布局形式。
REM 中的 R 就是 Root 的意思，它代表了 根标签 ，所以说 REM 这个单位的大小是依据 根标签 的 font-size 来决定的，而 根标签 就是 html
如果 html 的 font-size: 14px ，则整个页面的 1rem = 14px ，如果 html 的 font-size: 20px ，则整个页面的 1rem = 20px
设计稿
那如果我当初给你一张设计稿，宽为 800px ，而设计稿中有一个按钮长宽为 100px、20px ，那么你将此按钮绘制到网页上的时候，应该长宽各是多少 rem 呢？
网页
设计稿是设计稿，而网页是网页，设计稿的宽度是固定的，而网页的宽度是不固定的，因为不同的电脑的屏幕尺寸是不一样的，这里咱们先选取一个 1920px 的网页来举例子
咱们能够把设计稿上的 1px 看成是 1rem ，那么 1920px 的网页上 1rem 就是 (1920 / 800 * 1)px
而按钮在设计稿上是 100px=100rem ，到了网页上按钮也是 100rem ，只不过是两个 rem 的大小不一样而已~~
实际
咱们筹备三个文件 index.html、index.css、index.js
-
index.html<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <link rel="stylesheet" href="./index.css" /> </head> <body> <button class="btn"> 按钮 </button> </body> <script src="./index.js"></script> </html> -
index.csshtml {font-size: 1px;} .btn { width: 100rem; height: 20rem; } -
index.js// multiple 是倍数，默认是 1，也能够自定义 const computedFontStyle = ( clientWidth, designWidth, multiple = 1) => {return clientWidth / designWidth * multiple} // 每次屏幕宽度扭转时，扭转 html 标签的 font-size window.onresize = () => { // 获取 html 对象 const docEl = document.documentElement // 获取网页宽度 const clientWidth = docEl.clientWidth // 计算 html 的 font-size const rootFontStyle = computedFontStyle(clientWidth, 800) docEl.setAttribute('style', `font-size: ${rootFontStyle}px`) }
当咱们扭转屏幕宽度时，html 的 font-size 都会实时更改，达到 rem 大小更改的成果，同时扭转 button 的相应高度宽度
结语
我是林三心，一个热心的前端菜鸟程序员。如果你上进，喜爱前端，想学习前端，那咱们能够交朋友，一起摸鱼哈哈，摸鱼群，加我请备注【思否】
