根据设计稿，计算出网页REM的大小，有那么难吗？

前言

大家好，我是林三心，用最通俗易懂的话讲最难的知识点是我的座右铭，基础是进阶的前提是我的初心

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.css

html {
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的相应高度宽度

结语

我是林三心，一个热心的前端菜鸟程序员。如果你上进，喜欢前端，想学习前端，那咱们可以交朋友，一起摸鱼哈哈，摸鱼群，加我请备注【思否】

根据设计稿，计算出网页REM的大小，有那么难吗？

前言

REM布局

设计稿

网页

实践

结语

Sunshine_Lin

引用和评论

无代码工具！既省事，又能给你的简历增添色彩~

腾讯新闻中心首页改版啦

网页设计的垂直居中

CSS团队协作规范

前端如何入门 Go 语言

100个React最佳实践小技巧

前端开发工具