rem编写前端自适应页面

最新推荐文章于 2024-06-11 01:32:28 发布

听说名字长键盘敲得更响

最新推荐文章于 2024-06-11 01:32:28 发布

阅读量204

点赞数

文章标签：前端前端框架 html5

本文链接：https://blog.youkuaiyun.com/weixin_54656536/article/details/131191731

版权

文章介绍了rem作为CSS单位如何关联于html的font-size，并展示了如何通过JavaScript动态调整html的font-size以实现响应式设计。此外，提到了使用postcss-pxtorem插件自动化将px转换为rem的过程，以适应不同设备的屏幕尺寸。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1rem=html.fontSize

例：html的font-size为100px 1rem=100px 宽度200px的盒子为2rem

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <!-- 视口宽度与设备宽度一样 禁止用户缩放 -->
    <meta
      name="viewport"
      content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"
    />
    <title>Document</title>
    <style>
      /* 当我们拖动网页或者刚改手机的时候,html的font-size会发生改变 */
      html {
        font-size: 100px;
      }

      body {
        font-size: 16px;
      }

      h1 {
        font-size: 0.12rem;
      }
      /* // 试试手机为ip6plus和ip5时,div的宽高各是多少(px) */
      div {
        width: 1rem;
        height: 1rem;
        background: gray;
        line-height: 1rem;
      }
    </style>
  </head>

  <body>
    <script>
      function resetWidth() {
        // 兼容ie浏览器 document.body.clientWidth
        var baseWidth =
          document.documentElement.clientWidth || document.body.clientWidth;
        console.log(baseWidth);
        // 默认的设置是375px(ip6)的根元素设为100px, 其他的手机都相对这个进行调整
        document.documentElement.style.fontSize =
          (baseWidth / 375) * 100 + 'px'; // 1rem=100px
      }
      resetWidth();
      window.addEventListener('resize', function () {
        resetWidth();
      });
    </script>
    <div>内容</div>
  </body>
</html>

写惯了px，不想换rem

安装postcss-pxtorem

npm i postcss-pxtorem --save-dev

项目根目录下package.json，在postcss的plugins里添加下面的代码

"postcss-pxtorem": {
        "rootValue": 100,
        "propList": [
          "*"
        ]
      }

在这里插入图片描述