likes
comments
collection
share

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

作者站长头像
站长
· 阅读数 27

前言

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

REM布局

REM 是一个单位, REM布局 是以 REM 为基本的一种布局方式。

REM 中的 R 就是 Root 的意思,它代表了 根标签 ,所以说 REM 这个单位的大小是根据 根标签 font-size 来决定的,而 根标签 就是 html

如果 html font-size: 14px ,则整个页面的 1rem = 14px ,如果 html font-size: 20px ,则整个页面的 1rem = 20px

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

设计稿

那如果我现在给你一张设计稿,宽为 800px ,而设计稿中有一个按钮长宽为 100px、20px ,那么你将此按钮绘制到网页上的时候,应该长宽各是多少 rem 呢?

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

网页

设计稿是设计稿,而网页是网页,设计稿的宽度是固定的,而网页的宽度是不固定的,因为不同的电脑的屏幕尺寸是不一样的,这里我们先选取一个 1920px 的网页来举例子

我们可以把设计稿上的 1px 看成是 1rem ,那么 1920px 的网页上 1rem 就是 (1920 / 800 * 1)px

而按钮在设计稿上是 100px=100rem ,到了网页上按钮也是 100rem ,只不过是两个rem的大小不一样而已~~

根据设计稿,计算出网页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的大小,有那么难吗?