适配屏幕px、rem单位换算, 将 pxToRem 函数设置为一个全局工具如：在 utils.js 文件、SCSS/Mixin 定义

页面的宽度适配：

• 假设页面的根元素（html）的字体大小设置为动态值（常用 rem 单位适配时的做法），
  比如 html { font-size: (屏幕宽度 / 设计稿宽度) }。
• 如果根元素的字体大小为 1rem = 屏幕宽度 / 1920px，那么 300/1920 * 100rem 就能适配到实际屏幕。
• ⚠️假设我们用 rem 来适配不同屏幕宽度，通常会设置：

html {
  font-size: calc(100vw / 1920); /* 根元素字体大小 */
}

这里的意思是：
100vw 表示视口宽度；
1920 是设计稿宽度；(1920是可变的)
设置 1rem = 视口宽度 / 1920。

一、 如何整体的适配

🌰：div在设计稿中宽 300px，设计稿的宽度是1920px；
那么该div在页面中宽：300/1920 * 100rem

这段代码的意图是通过 相对单位 rem 和设计稿的比例来动态适配页面中某个 div 的宽度。

具体含义如下：

1. 设计稿中的比例：

   • 设计稿中 div 的宽度为 300px，设计稿总宽度为 1920px。
   • 宽度在设计稿中的占比为：300 / 1920。

2. 页面的宽度适配：

   • 假设页面的根元素（html）的字体大小设置为动态值（常用 rem 单位适配时的做法），
     比如 html { font-size: (屏幕宽度 / 设计稿宽度) }。
   • 如果根元素的字体大小为 1rem = 屏幕宽度 / 1920px，那么 300/1920 * 100rem 就能适配到实际屏幕。

3. 计算公式：

   • 300 / 1920 计算的是设计稿中 div 宽度占整个设计稿宽度的比例。
   • * 100rem 是为了把这个比例转化成页面中的实际宽度，假设页面根元素的 1rem 是以设计稿为基准动态设置的。

实际应用：

这种写法通常用在移动端或响应式页面中，结合动态设置的 rem，可以让 div 的宽度随屏幕尺寸变化而自适应。

例如，在 CSS 文件中：

html {
  font-size: calc(100vw / 1920); /* 根据屏幕宽度动态设置根元素字体大小 */
}

div {
  width: calc(300 / 1920 * 100rem); /* 按设计稿比例设置宽度 */
}

简化公式：

如果 html 的字体大小已经设为 100vw / 1920，则直接写为：

div {
  width: 100rem; /* 宽度自动按比例缩放 */
}

总结：

该写法通过设计稿比例和 rem 动态计算，实现了设计稿到实际页面的精准适配。

二、在div中如何适配

带入上述的公式
例如：div在设计稿中长 100px，设计稿的宽度是1920px；
那么该div在页面中长：100/1920 * 100rem (代入第2个公式)

1. 写成一个转换函数

可以通过一个函数，将设计稿中的长度（px）直接转换为页面中的长度（基于 rem 的单位）。假设设计稿宽度为 1920px：

// 转换函数
function pxToRem(px, designWidth = 1920) {
  return (px / designWidth) * 100 + "rem";
}

使用示例：

对于长度为 100px 的 div：

const width = pxToRem(100); // "5.208rem"

对于另一个长度为 230px 的 div：

const width230 = pxToRem(230); // "11.979rem"

2. * 100rem 是固定的吗？重点

是的，这与 rem 和 px 的换算规则 以及设计的基准有关：

• ⚠️假设我们用 rem 来适配不同屏幕宽度，通常会设置：

  html {
    font-size: calc(100vw / 1920); /* 根元素字体大小 */
  }
  

  这里的意思是：

  • 100vw 表示视口宽度；
  • 1920 是设计稿宽度；
  • 设置 1rem = 视口宽度 / 1920。

• 乘以 100rem，是因为 换算公式：
  如果 1rem = 视口宽度 / 1920，设计稿中的像素值要除以 1920，并换算成 rem，最终公式是：
  
  所以，如果你设置的换算基准 html 的 font-size 是 100vw / 1920，乘以 100rem 就是固定的。

3. 全局使用的方法

为方便全局使用，可以通过以下几种方式实现。

方法 1：通过 JS 全局变量和工具函数

可以将 pxToRem 函数设置为一个全局工具，例如在 utils.js 文件中定义：

export function pxToRem(px, designWidth = 1920) {
  return (px / designWidth) * 100 + "rem";
}

然后在需要的地方导入使用：

import { pxToRem } from './utils';

const divWidth = pxToRem(230); // "11.979rem"

方法 2：通过 SCSS/Mixin 定义

在 SCSS 中，可以写一个 Mixin，直接在样式中调用：

// SCSS 函数
@function pxToRem($px, $design-width: 1920) {
  @return ($px / $design-width) * 100 + rem;
}

// 使用示例
div {
  width: pxToRem(230); // 11.979rem
}

方法 3：通过 CSS 自定义属性

在 CSS 文件中定义一个全局变量基准：

:root {
  --design-width: 1920; /* 设计稿宽度 */
}

@function pxToRem($px) {
  @return calc($px / var(--design-width) * 100rem);
}

div {
  width: pxToRem(230); /* 使用全局基准 */
}

4. 总结

• 函数封装： 使用 pxToRem(px, designWidth) 函数，适合动态计算，便于在 JS 中使用。
• 样式文件封装： 利用 SCSS 函数或 CSS 自定义属性，实现全局使用，便于在样式文件中调用。
• 100rem 是换算规则：它依赖于根元素的动态设置 font-size = 100vw / 1920，确保 rem 和设计稿比例一致。
• 230px 转换后的宽度： "11.979rem"（根据公式计算）。

三、求页面宽度&页面高度：

let  页面宽度
if (设备宽度 / 设备高度 > 16/9) {
	页面宽度 = 设备高度  *  (16/9)
} else {
	页面宽度 = 设备宽度
}
const 页面高度 = 页面宽度 / (16/9)

如下是使用的例子：