rem详细介绍与实际开发使用

最新推荐文章于 2024-04-13 21:21:47 发布

来陪人家玩游戏嘛

最新推荐文章于 2024-04-13 21:21:47 发布

阅读量1.3k

点赞数

分类专栏： css 文章标签： css html react.js

本文链接：https://blog.csdn.net/gongliming_qd/article/details/121426347

版权

css 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

作用 : 解决前端工作中移动端适配问题

基本概念

rem

rem 是啥?

rem等于css中html中font-size设定的值, 如下代码: 当font-size设置为75px, 在box设置width的值设置为1rem, 那么此时的1rem 等于 75px

html {
      font-size: 75px;
    }
.box {
      /* 75px === 1rem */
      width: 1rem;  
    }

提出等分概念?

假设我有一个750px的设计稿,我可以将750px进行10等分, 那么1等分就是750/10 == 75px. 那么结合上面的rem概念, 我可以将html中的font-size设置为75px, 那么1rem就等于75px了. 那么750px就等于750/75 = 10rem. 那么不管手机有多大,我都进行十等分. 长度都为10rem. 此时有个750设计稿的一个盒子宽度为100px,那么就可以转换成100/75 = 1.25rem. 1.25rem也就是整个页面的1.25/10. 那么如果此时用的是375px大小的手机. 那么同样的显示占总屏幕 * 1.25的盒子几就可以了. 也就是 375也10等分则为一等分为37.5px. 用37.5*1.25rem就为375px大小的手机所要展示的长度.

所以等分的font-size应该如下设置 :

设计稿是750px, 但是页面进行拉伸, body的宽度肯定是会变的, 那么我们就需要让页面自适应. 如果页面宽度为750px, 同样是10等分, 那么1份的值为 75px, 如果页面宽度为640px, 同样10等分, 1份的宽度就为64px,同理,320px下的1份就为32px. 在等分的概念下, 页面就能做到自适应了.

实际工作中如何设置font-size操作 ?

这里推荐使用淘宝的插件 https://github.com/amfe/lib-flexible, npm或者直接以下复制代码都可以, copy下来的源码, 最后导入即可

 (function flexible(window, document) {
    var docEl = document.documentElement
    var dpr = window.devicePixelRatio || 1

    // adjust body font size
    function setBodyFontSize() {
      if (document.body) {
        document.body.style.fontSize = (12 * dpr) + 'px'
      } else {
        document.addEventListener('DOMContentLoaded', setBodyFontSize)
      }
    }
    setBodyFontSize();

    // set 1rem = viewWidth / 10
    function setRemUnit() {
      var rem = docEl.clientWidth / 10
      docEl.style.fontSize = rem + 'px'
    }

    setRemUnit()

    // reset rem unit on page resize
    window.addEventListener('resize', setRemUnit)
    window.addEventListener('pageshow', function (e) {
      if (e.persisted) {
        setRemUnit()
      }
    })

    // detect 0.5px supports
    if (dpr >= 2) {
      var fakeBody = document.createElement('body')
      var testElement = document.createElement('div')
      testElement.style.border = '.5px solid transparent'
      fakeBody.appendChild(testElement)
      docEl.appendChild(fakeBody)
      if (testElement.offsetHeight === 1) {
        docEl.classList.add('hairlines')
      }
      docEl.removeChild(fakeBody)
    }
  }(window, document))

我们来演示以下, 完整代码如下 :
在十等分的情况下, 1rem的大小是多少~

<!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>
</head>
<style>
    *{margin: 0;padding: 0;}

    .box{
        font-size: 1rem;
    }
</style>
<script>
  (function flexible(window, document) {
    var docEl = document.documentElement
    var dpr = window.devicePixelRatio || 1

    // adjust body font size
    function setBodyFontSize() {
      if (document.body) {
        document.body.style.fontSize = (12 * dpr) + 'px'
      } else {
        document.addEventListener('DOMContentLoaded', setBodyFontSize)
      }
    }
    setBodyFontSize();

    // set 1rem = viewWidth / 10
    function setRemUnit() {
      var rem = docEl.clientWidth / 10
      docEl.style.fontSize = rem + 'px'
    }

    setRemUnit()

    // reset rem unit on page resize
    window.addEventListener('resize', setRemUnit)
    window.addEventListener('pageshow', function (e) {
      if (e.persisted) {
        setRemUnit()
      }
    })

    // detect 0.5px supports
    if (dpr >= 2) {
      var fakeBody = document.createElement('body')
      var testElement = document.createElement('div')
      testElement.style.border = '.5px solid transparent'
      fakeBody.appendChild(testElement)
      docEl.appendChild(fakeBody)
      if (testElement.offsetHeight === 1) {
        docEl.classList.add('hairlines')
      }
      docEl.removeChild(fakeBody)
    }
  }(window, document))

</script>

<body>

 <div class="box">
        你好
 </div>

</body>

</html>

最后再来个vscode插件转换下px为rem

在这里插入图片描述
设置下1rem等于75px就好了

检验一下 ?
在这里插入图片描述
那如果设置稿为640px的呢??

那么在vscode中设置把上面的75px为64就好啦!!! 然后f12在640px下开发即可~

来陪人家玩游戏嘛

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
rem详细介绍与实际开发使用

作用 : 解决前端工作中移动端适配问题基本概念remrem 是啥?rem等于css中html中font-size设定的值, 如下代码: 当font-size设置为75px, 在box设置width的值设置为1rem, 那么此时的1rem 等于 75pxhtml { font-size: 75px; }.box { /* 75px === 1rem */ width: 1rem; }提出等分概念?假设我有一个750px的设计.
复制链接

扫一扫