Js自动转px为rem适配不同屏幕

当然可以，下面是对你提供的文章内容的结构化整理版，方便理解和查阅：

rem 与常用 CSS 单位说明 & 自定义使用方法

1. 常用单位简介

2. rem 使用步骤

第一步：设置 viewport

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1">

确保页面可正确响应不同设备宽度。

第二步：设置动态 rem 基准

方法一：简单自适应（设计稿为 640px 宽）

<script>
  document.documentElement.style.fontSize = document.documentElement.clientWidth / 640 * 100 + 'px';
</script>

方法二：封装成函数并监听窗口变化

<script>
  function setRemBase() {
    const html = document.documentElement;
    html.style.fontSize = (html.clientWidth / 640) * 100 + 'px';
  }

  window.addEventListener('resize', setRemBase);
  window.addEventListener('DOMContentLoaded', setRemBase);
</script>

3. 备注说明

为什么要设置 html 的 font-size？

因为 rem 是基于 html 的字体大小来计算的，一旦设置好根字体，就可以通过 rem 自动进行全站等比缩放。

为什么要乘以 100？

假设设计稿宽度为 640px：

• 手机设备宽度是 320px，则比例是：320 / 640 = 0.5
• 若 html 的 font-size = 0.5px，会低于浏览器的最小字体限制（一般为 12px），可能出现显示异常
• 乘以 100 后，html 的 font-size = 50px，更符合现实开发需要
• 写样式时，你写的 50px 实际写作 0.5rem

总结：

意思就是，在开发的时候你可以无视设计图和设备的偏差，设计图上是50px，你代码里样式可以直接写50px，效果不受影响，即便是最小的1px也不会出现样式异常，因为1px实际运算以后是50px。