1

src/utils/rem.js

@@ -1,13 +1,28 @@
 // rem等比适配配置
 // 基准大小
 const baseSize = 16
-// 设计稿宽度
-const designWidth = 1920
+// 设计稿宽度（PC端）
+const pcDesignWidth = 1920
+// 设计稿宽度（移动端）
+const mobileDesignWidth = 375
+// 移动端/PC端断点
+const mobileBreakpoint = 1000
 // 最大缩放比例
 const maxScale = 2
 
+// 检测是否为移动端
+export function isMobileDevice() {
+  return window.innerWidth < mobileBreakpoint
+}
+
+// 获取当前设计稿宽度
+function getDesignWidth() {
+  return isMobileDevice() ? mobileDesignWidth : pcDesignWidth
+}
+
 // 设置 rem 函数
 function setRem() {
+  const designWidth = getDesignWidth()
   // 当前页面宽度相对于设计稿宽度的缩放比例
   const scale = document.documentElement.clientWidth / designWidth
   // 设置页面根节点字体大小（最高放大比例为maxScale）
@@ -18,6 +33,7 @@ function setRem() {
 export function fontSize(res) {
   const clientWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth
   if (!clientWidth) return res
+  const designWidth = getDesignWidth()
   const scale = clientWidth / designWidth
   return res * Math.min(scale, maxScale)
 }