feat(h5): useRem

packages/shims-uni-app.d.ts

@@ -34,6 +34,10 @@ declare namespace UniApp {
     globalStyle: {
       navigationBar: PageNavigationBar
       refreshOptions?: PageRefreshOptions
+      maxWidth?: number
+      rpxCalcMaxDeviceWidth?: number
+      rpxCalcBaseDeviceWidth?: number
+      // rpxCalcIncludeWidth?: number
     }
     topWindow?: LayoutWindowOptions
     leftWindow?: LayoutWindowOptions

packages/uni-api/src/service/base/upx2px.ts

@@ -19,6 +19,11 @@ function checkDeviceWidth() {
   isIOS = platform === 'ios'
 }
 
+function checkValue(value: unknown, defaultValue: number) {
+  const newValue = Number(value) as number
+  return isNaN(newValue) ? defaultValue : newValue
+}
+
 export const upx2px = defineSyncApi<API_TYPE_UPX2PX>(
   API_UPX2PX,
   (number, newDeviceWidth?: number) => {
@@ -34,7 +39,13 @@ export const upx2px = defineSyncApi<API_TYPE_UPX2PX>(
     if (number === 0) {
       return 0
     }
-    let result = (number / BASE_DEVICE_WIDTH) * (newDeviceWidth || deviceWidth)
+    const config = __uniConfig.globalStyle || {}
+    // ignore rpxCalcIncludeWidth
+    const maxWidth = checkValue(config.rpxCalcMaxDeviceWidth, 960)
+    const baseWidth = checkValue(config.rpxCalcBaseDeviceWidth, 375)
+    let width = newDeviceWidth || deviceWidth
+    width = width <= maxWidth ? width : baseWidth
+    let result = (number / BASE_DEVICE_WIDTH) * width
     if (result < 0) {
       result = -result
     }

packages/uni-core/src/view/plugin/index.ts

@@ -3,11 +3,13 @@ import { App } from 'vue'
 import { initLongPress } from './longPress'
 import { initAppConfig } from './appConfig'
 import { initCustomDataset } from '@dcloudio/uni-shared'
+import { useRem } from './rem'
 
 export function initView(app: App) {
   if (__NODE_JS__) {
     return
   }
+  useRem()
   initCustomDataset()
   if (__UNI_FEATURE_LONGPRESS__) {
     initLongPress()

packages/uni-core/src/view/plugin/rem.ts

+function checkValue(value: unknown, defaultValue: number) {
+  const newValue = Number(value) as number
+  return isNaN(newValue) ? defaultValue : newValue
+}
+
+function getWindowWidth() {
+  const screenFix =
+    /^Apple/.test(navigator.vendor) && typeof window.orientation === 'number'
+  const landscape = screenFix && Math.abs(window.orientation as number) === 90
+  var screenWidth = screenFix
+    ? Math[landscape ? 'max' : 'min'](screen.width, screen.height)
+    : screen.width
+  var windowWidth =
+    Math.min(
+      window.innerWidth,
+      document.documentElement.clientWidth,
+      screenWidth
+    ) || screenWidth
+  return windowWidth
+}
+
+export function useRem() {
+  // TODO 与 upx2px 合并抽离逻辑到 shared，区分 service、view
+  function updateRem() {
+    const config = __uniConfig.globalStyle || {}
+    // ignore: rpxCalcIncludeWidth
+    const maxWidth = checkValue(config.rpxCalcMaxDeviceWidth, 960)
+    const baseWidth = checkValue(config.rpxCalcBaseDeviceWidth, 375)
+    let width = getWindowWidth()
+    width = width <= maxWidth ? width : baseWidth
+
+    document.documentElement.style.fontSize = width / 23.4375 + 'px'
+  }
+  updateRem()
+  document.addEventListener('DOMContentLoaded', updateRem)
+  window.addEventListener('load', updateRem)
+  window.addEventListener('resize', updateRem)
+}

packages/uni-h5/dist/uni-h5.es.js

@@ -967,7 +967,33 @@ function initAppConfig$1(appConfig) {
     globalProperties.$gcd = getComponentDescriptor;
   }
 }
+function checkValue$1(value, defaultValue) {
+  const newValue = Number(value);
+  return isNaN(newValue) ? defaultValue : newValue;
+}
+function getWindowWidth$1() {
+  const screenFix = /^Apple/.test(navigator.vendor) && typeof window.orientation === "number";
+  const landscape = screenFix && Math.abs(window.orientation) === 90;
+  var screenWidth = screenFix ? Math[landscape ? "max" : "min"](screen.width, screen.height) : screen.width;
+  var windowWidth = Math.min(window.innerWidth, document.documentElement.clientWidth, screenWidth) || screenWidth;
+  return windowWidth;
+}
+function useRem() {
+  function updateRem() {
+    const config = __uniConfig.globalStyle || {};
+    const maxWidth = checkValue$1(config.rpxCalcMaxDeviceWidth, 960);
+    const baseWidth = checkValue$1(config.rpxCalcBaseDeviceWidth, 375);
+    let width = getWindowWidth$1();
+    width = width <= maxWidth ? width : baseWidth;
+    document.documentElement.style.fontSize = width / 23.4375 + "px";
+  }
+  updateRem();
+  document.addEventListener("DOMContentLoaded", updateRem);
+  window.addEventListener("load", updateRem);
+  window.addEventListener("resize", updateRem);
+}
 function initView(app) {
+  useRem();
   initCustomDataset();
   if (__UNI_FEATURE_LONGPRESS__) {
     initLongPress();
@@ -9881,6 +9907,10 @@ function checkDeviceWidth() {
   deviceDPR = pixelRatio2;
   isIOS = platform === "ios";
 }
+function checkValue(value, defaultValue) {
+  const newValue = Number(value);
+  return isNaN(newValue) ? defaultValue : newValue;
+}
 const upx2px = /* @__PURE__ */ defineSyncApi(API_UPX2PX, (number, newDeviceWidth) => {
   if (deviceWidth === 0) {
     checkDeviceWidth();
@@ -9889,7 +9919,12 @@ const upx2px = /* @__PURE__ */ defineSyncApi(API_UPX2PX, (number, newDeviceWidth
   if (number === 0) {
     return 0;
   }
-  let result = number / BASE_DEVICE_WIDTH * (newDeviceWidth || deviceWidth);
+  const config = __uniConfig.globalStyle || {};
+  const maxWidth = checkValue(config.rpxCalcMaxDeviceWidth, 960);
+  const baseWidth = checkValue(config.rpxCalcBaseDeviceWidth, 375);
+  let width = newDeviceWidth || deviceWidth;
+  width = width <= maxWidth ? width : baseWidth;
+  let result = number / BASE_DEVICE_WIDTH * width;
   if (result < 0) {
     result = -result;
   }

packages/uni-h5/style/framework/base.css

@@ -13,6 +13,7 @@ body {
 
 body {
   overflow-x: hidden;
+  font-size: 16px;
 }
 
 uni-app,

packages/uni-shared/dist/uni-shared.cjs.js

@@ -44,6 +44,7 @@ const defaultRpx2Unit = {
     unitPrecision: 5,
 };
 function createRpx2Unit(unit, unitRatio, unitPrecision) {
+    // ignore: rpxCalcIncludeWidth
     return (val) => val.replace(unitRE, (m, $1) => {
         if (!$1) {
             return m;

packages/uni-shared/dist/uni-shared.es.js

@@ -40,6 +40,7 @@ const defaultRpx2Unit = {
     unitPrecision: 5,
 };
 function createRpx2Unit(unit, unitRatio, unitPrecision) {
+    // ignore: rpxCalcIncludeWidth
     return (val) => val.replace(unitRE, (m, $1) => {
         if (!$1) {
             return m;

packages/uni-shared/src/dom/style.ts

@@ -22,6 +22,7 @@ export function createRpx2Unit(
   unitRatio: number,
   unitPrecision: number
 ) {
+  // ignore: rpxCalcIncludeWidth
   return (val: string) =>
     val.replace(unitRE, (m, $1) => {
       if (!$1) {