在rem下如何实现1像素？

在 rem 下实现 1 像素，核心思路是找到当前环境下 1rem 对应的像素值，然后将其除以这个像素值，得到 1px 对应的 rem 值。 有几种常见的方法：

1. 利用媒体查询（Media Queries）和 calc():

   这是最推荐也是最灵活的方式，可以适配不同根字体大小。

   /* 假设设计稿基准是 16px */
   html { font-size: 16px; }
   
   @media (min-width: 375px) {
     html { font-size: calc(100vw / 375 * 16px); }
   }
   
   @media (min-width: 750px) {
     html { font-size: calc(100vw / 750 * 16px); }
   }
   
   .one-pixel {
     border: 1px solid #000; /* 或者其他需要1px的地方 */
     border: calc(1px / 16 * 1rem) solid #000; /* 动态计算1px对应的rem */
   }
   

   解释:

   • 我们先设置一个默认的 font-size，比如 16px。
   • 使用媒体查询针对不同屏幕宽度设置 html 的 font-size，这里使用 calc() 动态计算，确保 1rem 始终对应合适的像素值，以 375px 宽的屏幕为例，1rem 等于 16px，750px 宽的屏幕，1rem 也等于 16px。 您可以根据设计稿的宽度调整。
   • 在需要 1px 边框的地方，使用 calc(1px / 16 * 1rem) 计算出 1px 对应的 rem 值。这里的 16 需要和 html 的默认 font-size 保持一致。

2. 使用 JavaScript 动态计算:

   function setRem() {
     const baseSize = 16; // 设计稿基准字体大小
     const clientWidth = document.documentElement.clientWidth || document.body.clientWidth;
     const fontSize = clientWidth / 750 * baseSize; // 以750px宽的设计稿为例
     document.documentElement.style.fontSize = fontSize + 'px';
   
     // 设置1px对应的rem
     const onePixelRem = 1 / fontSize;
     document.documentElement.style.setProperty('--one-pixel', onePixelRem + 'rem');
   }
   
   setRem();
   window.onresize = setRem; // 监听窗口大小变化
   
   // css中使用
   .one-pixel {
     border: var(--one-pixel) solid #000;
   }
   

   解释:

   • JavaScript 获取屏幕宽度，动态计算 html 的 font-size。
   • 计算 1px 对应的 rem 值，并将其设置为 CSS 变量 --one-pixel。
   • 在 CSS 中使用 var(--one-pixel) 获取 1px 对应的 rem 值。

3. 使用 Sass/Less 等 CSS 预处理器:

   如果使用 CSS 预处理器，可以定义一个函数来计算 1px 对应的 rem 值。

   (Sass 示例):

   $base-font-size: 16px;
   
   @function px-to-rem($px) {
     @return ($px / $base-font-size) * 1rem;
   }
   
   .one-pixel {
     border: px-to-rem(1px) solid #000;
   }
   

选择哪种方法？

• 推荐使用媒体查询结合 calc() 的方法，它更简洁、高效，且不需要 JavaScript 的参与。
• 如果项目已经使用了 JavaScript 动态设置 rem，可以考虑使用 JavaScript 计算 1px 对应的 rem 值。
• CSS 预处理器的方法也比较方便，但需要额外的构建步骤。

无论选择哪种方法，都需要根据你的项目具体情况进行调整，确保 1px 对应的 rem 值计算正确。 记住，关键在于根据屏幕宽度动态计算 html 的 font-size，并基于此计算 1px 对应的 rem 值。