From 0a4eda4be699705c30d63a6984ef4166c718b07c Mon Sep 17 00:00:00 2001
From: hanyuxinting <hanyuxinting@sina.cn>
Date: Mon, 2 Feb 2026 10:57:10 +0800
Subject: [PATCH 01/18] =?UTF-8?q?fix:=20=E6=81=A2=E5=A4=8D=E5=8E=9F?=
 =?UTF-8?q?=E6=9C=89=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json                                  |  4 +-
 .../avatarcropper/avatarcropper.taro.tsx      |  8 ++--
 src/packages/button/button.taro.tsx           | 37 +++++++++----------
 src/packages/lottie/lottiemp.taro.tsx         | 25 +++++++------
 src/packages/overlay/overlay.taro.tsx         | 31 ++++++++--------
 src/packages/overlay/overlay.tsx              |  6 ---
 src/packages/rate/rate.taro.tsx               | 11 +++---
 7 files changed, 58 insertions(+), 64 deletions(-)

diff --git a/package.json b/package.json
index 4f4d561967..9c54d1de8e 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@nutui/nutui-react-taro",
-  "version": "3.0.19-cpp.25",
+  "version": "3.0.18",
   "style": "dist/style.css",
   "main": "dist/nutui.react.umd.js",
   "module": "dist/es/packages/nutui.react.build.js",
@@ -109,7 +109,7 @@
   "dependencies": {
     "@babel/runtime": "^7.23.9",
     "@nutui/icons-react": "^3.0.2-beta.5",
-    "@nutui/icons-react-taro": "3.0.2-cpp.3.beta.5",
+    "@nutui/icons-react-taro": "^3.0.2-beta.3",
     "@nutui/jdesign-icons-react-taro": "1.0.6-beta.2",
     "@nutui/touch-emulator": "^1.0.0",
     "@nutui/lottie-miniprogram": "^1.0.2",
diff --git a/src/packages/avatarcropper/avatarcropper.taro.tsx b/src/packages/avatarcropper/avatarcropper.taro.tsx
index ee184339f9..f227f259b2 100644
--- a/src/packages/avatarcropper/avatarcropper.taro.tsx
+++ b/src/packages/avatarcropper/avatarcropper.taro.tsx
@@ -4,8 +4,9 @@ import React, {
   useMemo,
   useCallback,
   FunctionComponent,
+  useLayoutEffect,
 } from 'react'
-import Taro, { useReady, createSelectorQuery } from '@tarojs/taro'
+import Taro, { createSelectorQuery } from '@tarojs/taro'
 import classNames from 'classnames'
 import { Canvas, CommonEventFunction, View } from '@tarojs/components'
 import { getWindowInfo } from '@/utils/taro/get-system-info'
@@ -137,7 +138,7 @@ export const AvatarCropper: FunctionComponent<
     cropperCanvasContext: null,
   })
 
-  useReady(() => {
+  useLayoutEffect(() => {
     if (showAlipayCanvas2D) {
       const { canvasId } = canvasAll
       createSelectorQuery()
@@ -149,7 +150,7 @@ export const AvatarCropper: FunctionComponent<
         })
         .exec()
     }
-  })
+  }, [showAlipayCanvas2D, state.displayHeight, state.displayWidth])
 
   useEffect(() => {
     setCanvasAll({
@@ -693,4 +694,5 @@ export const AvatarCropper: FunctionComponent<
     </>
   )
 }
+
 AvatarCropper.displayName = 'NutAvatarCropper'
diff --git a/src/packages/button/button.taro.tsx b/src/packages/button/button.taro.tsx
index 44a0183041..7ddc656031 100644
--- a/src/packages/button/button.taro.tsx
+++ b/src/packages/button/button.taro.tsx
@@ -2,18 +2,19 @@ import React, { CSSProperties, useCallback, useMemo } from 'react'
 import type { MouseEvent } from 'react'
 import classNames from 'classnames'
 import {
-  // ButtonProps as MiniProgramButtonProps,
+  ButtonProps as MiniProgramButtonProps,
   View,
-  // Button as TaroButton,
+  Button as TaroButton,
 } from '@tarojs/components'
 import { Loading } from '@nutui/icons-react-taro'
+import { getEnv } from '@tarojs/taro'
 import { BasicComponent, ComponentDefaults } from '@/utils/typings'
 import { harmony } from '@/utils/taro/platform'
 
-// type OmitMiniProgramButtonProps = Omit<
-//   MiniProgramButtonProps,
-//   'size' | 'type' | 'onClick' | 'style'
-// >
+type OmitMiniProgramButtonProps = Omit<
+  MiniProgramButtonProps,
+  'size' | 'type' | 'onClick' | 'style'
+>
 
 export type ButtonType =
   | 'default'
@@ -26,11 +27,9 @@ export type ButtonSize = 'xlarge' | 'large' | 'normal' | 'small' | 'mini'
 export type ButtonShape = 'square' | 'round'
 export type ButtonFill = 'solid' | 'outline' | 'dashed' | 'none'
 
-// export interface ButtonProps
-//   extends BasicComponent,
-//     OmitMiniProgramButtonProps {
-
-export interface ButtonProps extends BasicComponent {
+export interface ButtonProps
+  extends BasicComponent,
+    OmitMiniProgramButtonProps {
   color: string
   shape: ButtonShape
   type: ButtonType
@@ -77,7 +76,7 @@ export const Button = React.forwardRef<HTMLButtonElement, Partial<ButtonProps>>(
       children,
       className,
       style,
-      // formType,
+      formType,
       nativeType,
       onClick,
       ...rest
@@ -146,18 +145,17 @@ export const Button = React.forwardRef<HTMLButtonElement, Partial<ButtonProps>>(
       className
     )
 
-    // if (getEnv() === 'WEB') {
-    //   ;(rest as any).type = formType
-    // }
+    if (getEnv() === 'WEB') {
+      ;(rest as any).type = formType
+    }
     return (
       // eslint-disable-next-line @typescript-eslint/ban-ts-comment
       // @ts-ignore
       // eslint-disable-next-line react/button-has-type
-      // <TaroButton
-      <View
+      <TaroButton
         {...rest}
         ref={ref}
-        // formType={formType || nativeType}
+        formType={formType || nativeType}
         className={buttonClassNames}
         style={{ ...getStyle, ...style }}
         onClick={(e) => handleClick(e as any)}
@@ -177,8 +175,7 @@ export const Button = React.forwardRef<HTMLButtonElement, Partial<ButtonProps>>(
           )}
           {rightIcon}
         </View>
-      </View>
-      // </TaroButton>
+      </TaroButton>
     )
   }
 )
diff --git a/src/packages/lottie/lottiemp.taro.tsx b/src/packages/lottie/lottiemp.taro.tsx
index 5dd321c581..82790d79e8 100644
--- a/src/packages/lottie/lottiemp.taro.tsx
+++ b/src/packages/lottie/lottiemp.taro.tsx
@@ -1,5 +1,5 @@
-import React, { useImperativeHandle, useRef } from 'react'
-import { createSelectorQuery, getEnv, useReady, useUnload } from '@tarojs/taro'
+import React, { useImperativeHandle, useLayoutEffect, useRef } from 'react'
+import { createSelectorQuery, getEnv, useUnload } from '@tarojs/taro'
 import lottie from '@nutui/lottie-miniprogram'
 import { getWindowInfo } from '@/utils/taro/get-system-info'
 import { useUuid } from '@/hooks/use-uuid'
@@ -20,15 +20,10 @@ export const Lottie = React.forwardRef((props: TaroLottieProps, ref: any) => {
     speed = 1,
     dpr = true,
   } = props
-  const setSpeed = () => {
-    if (animation.current) {
-      animation.current.setSpeed(Math.abs(speed))
-      animation.current.setDirection(speed > 0 ? 1 : -1)
-    }
-  }
+
   useImperativeHandle(ref, () => animation.current || {})
   const pixelRatio = useRef(getWindowInfo().pixelRatio)
-  useReady(() => {
+  useLayoutEffect(() => {
     createSelectorQuery()
       .select(`#${id}`)
       .fields(
@@ -62,9 +57,14 @@ export const Lottie = React.forwardRef((props: TaroLottieProps, ref: any) => {
                 context,
               },
             })
-            onComplete &&
+            if (onComplete) {
               animation.current.addEventListener('complete', onComplete)
-            setSpeed()
+            }
+
+            if (animation.current) {
+              animation.current.setSpeed(Math.abs(speed))
+              animation.current.setDirection(speed > 0 ? 1 : -1)
+            }
             inited.current = true
           } catch (error) {
             console.error(error)
@@ -72,7 +72,8 @@ export const Lottie = React.forwardRef((props: TaroLottieProps, ref: any) => {
         }
       )
       .exec()
-  })
+  }, [autoPlay, dpr, id, loop, onComplete, source, speed, style])
+
   useUnload(() => {
     onComplete &&
       animation.current &&
diff --git a/src/packages/overlay/overlay.taro.tsx b/src/packages/overlay/overlay.taro.tsx
index 5bfe2f2f9f..328835b230 100644
--- a/src/packages/overlay/overlay.taro.tsx
+++ b/src/packages/overlay/overlay.taro.tsx
@@ -1,4 +1,5 @@
 import React, { FunctionComponent, useEffect, useState } from 'react'
+import { CSSTransition } from 'react-transition-group'
 import classNames from 'classnames'
 import { ITouchEvent, View } from '@tarojs/components'
 import { ComponentDefaults } from '@/utils/typings'
@@ -59,7 +60,7 @@ export const Overlay: FunctionComponent<
     <View
       ref={nodeRef}
       className={classes}
-      style={{ ...styles, display: innerVisible ? 'block' : 'none' }}
+      style={styles}
       {...(rest as any)}
       catchMove={lockScroll}
       onClick={handleClick}
@@ -68,21 +69,19 @@ export const Overlay: FunctionComponent<
     </View>
   )
 
-  return <>{renderOverlay()}</>
-
-  // return (
-  //   <CSSTransition
-  //     nodeRef={nodeRef}
-  //     classNames={`${classPrefix}-slide`}
-  //     unmountOnExit
-  //     timeout={duration}
-  //     in={innerVisible}
-  //     onEntered={afterShow}
-  //     onExited={afterClose}
-  //   >
-  //     {renderOverlay()}
-  //   </CSSTransition>
-  // )
+  return (
+    <CSSTransition
+      nodeRef={nodeRef}
+      classNames={`${classPrefix}-slide`}
+      unmountOnExit
+      timeout={duration}
+      in={innerVisible}
+      onEntered={afterShow}
+      onExited={afterClose}
+    >
+      {renderOverlay()}
+    </CSSTransition>
+  )
 }
 
 Overlay.displayName = 'NutOverlay'
diff --git a/src/packages/overlay/overlay.tsx b/src/packages/overlay/overlay.tsx
index 82ed8211fc..98667d689b 100644
--- a/src/packages/overlay/overlay.tsx
+++ b/src/packages/overlay/overlay.tsx
@@ -10,7 +10,6 @@ import classNames from 'classnames'
 import { ComponentDefaults } from '@/utils/typings'
 import { useLockScroll } from '@/hooks/use-lock-scroll'
 import { WebOverlayProps } from '@/types'
-import { useConfig } from '@/packages/configprovider'
 
 export const defaultOverlayProps: WebOverlayProps = {
   ...ComponentDefaults,
@@ -38,14 +37,12 @@ export const Overlay: FunctionComponent<
     afterShow,
     afterClose,
     onClick,
-    ariaLabel,
     ...rest
   } = { ...defaultOverlayProps, ...props }
 
   const classPrefix = 'nut-overlay'
   const [innerVisible, setInnerVisible] = useState(visible)
   const nodeRef = useRef(null)
-  const { locale } = useConfig()
 
   useEffect(() => {
     setInnerVisible(visible)
@@ -81,9 +78,6 @@ export const Overlay: FunctionComponent<
         style={styles}
         {...rest}
         onClick={handleClick}
-        {...(closeOnOverlayClick
-          ? { ariaLabel: ariaLabel || locale.mask }
-          : {})}
       >
         {children}
       </div>
diff --git a/src/packages/rate/rate.taro.tsx b/src/packages/rate/rate.taro.tsx
index e2f30008f5..000c68f296 100644
--- a/src/packages/rate/rate.taro.tsx
+++ b/src/packages/rate/rate.taro.tsx
@@ -1,13 +1,14 @@
 import React, {
   FunctionComponent,
   ReactElement,
+  useCallback,
   useEffect,
+  useLayoutEffect,
   useRef,
   useState,
 } from 'react'
 import classNames from 'classnames'
 import { StarFill } from '@nutui/icons-react-taro'
-import { useReady } from '@tarojs/taro'
 import { ITouchEvent, Text, View } from '@tarojs/components'
 import { ComponentDefaults } from '@/utils/typings'
 import { usePropsValue } from '@/hooks/use-props-value'
@@ -131,7 +132,7 @@ export const Rate: FunctionComponent<Partial<TaroRateProps>> = (props) => {
     }
   }
 
-  const updateRects = () => {
+  const updateRects = useCallback(() => {
     for (let index = 0; index < refs.length; index++) {
       const item = refs[index]
       if (item) {
@@ -140,11 +141,11 @@ export const Rate: FunctionComponent<Partial<TaroRateProps>> = (props) => {
         })
       }
     }
-  }
+  }, [refs])
 
-  useReady(() => {
+  useLayoutEffect(() => {
     updateRects()
-  })
+  }, [updateRects])
 
   const handleTouchStart = (e: any) => {
     if (!touchable || readOnly || disabled) {

From dc4f1e2819cc4838b585b9c78cb74ee3817f3371 Mon Sep 17 00:00:00 2001
From: songchenglin3 <353833373@qq.com>
Date: Wed, 29 Apr 2026 21:43:54 +0800
Subject: [PATCH 02/18] =?UTF-8?q?feat:=20=E5=A4=9A=E5=B0=BA=E5=AF=B8?=
 =?UTF-8?q?=E9=80=82=E9=85=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/pages/index/index.config.ts           |    2 +
 src/packages/actionsheet/actionsheet.scss     |    8 +-
 src/packages/address/address.scss             |   84 +-
 src/packages/animate/animate.scss             |   52 +-
 src/packages/audio/audio.scss                 |   34 +-
 src/packages/avatar/avatar.scss               |    2 +-
 src/packages/avatarcropper/avatarcropper.scss |    4 +-
 src/packages/avatargroup/avatargroup.scss     |    8 +-
 src/packages/badge/badge.scss                 |    2 +-
 src/packages/barrage/barrage.scss             |    4 +-
 src/packages/button/button.scss               |    2 +-
 src/packages/calendar/calendar.scss           |   49 +-
 src/packages/calendarcard/calendarcard.scss   |   22 +-
 src/packages/card/card.scss                   |   30 +-
 src/packages/cell/cell.scss                   |    6 +-
 src/packages/cellgroup/cellgroup.scss         |    8 +-
 src/packages/checkbox/checkbox.scss           |   50 +-
 src/packages/checkboxgroup/checkboxgroup.scss |   12 +-
 src/packages/collapseitem/collapseitem.scss   |   16 +-
 src/packages/countdown/countdown.scss         |    6 +-
 src/packages/dialog/dialog.scss               |    4 +-
 src/packages/divider/divider.scss             |    4 +-
 src/packages/elevator/elevator.scss           |    6 +-
 src/packages/ellipsis/ellipsis.scss           |    2 +-
 src/packages/empty/empty.scss                 |    8 +-
 src/packages/fixednav/fixednav.scss           |   77 +-
 src/packages/formitem/formitem.scss           |   20 +-
 src/packages/grid/grid.scss                   |    2 +-
 src/packages/griditem/griditem.scss           |    4 +-
 .../hoverbuttonitem/hoverbuttonitem.scss      |   30 +-
 src/packages/imagepreview/imagepreview.scss   |   20 +-
 src/packages/indicator/indicator.scss         |   26 +-
 .../infiniteloading/infiniteloading.scss      |    8 +-
 src/packages/input/input.scss                 |    8 +-
 src/packages/inputnumber/inputnumber.scss     |   12 +-
 src/packages/menuitem/menuitem.scss           |    4 +-
 src/packages/navbar/navbar.scss               |   28 +-
 src/packages/noticebar/noticebar.scss         |    4 +-
 src/packages/notify/notify.scss               |   16 +-
 .../numberkeyboard/numberkeyboard.scss        |   14 +-
 src/packages/pagination/pagination.scss       |   10 +-
 src/packages/popover/popover.scss             |   60 +-
 src/packages/popup/popup.scss                 |    6 +-
 src/packages/progress/progress.scss           |    2 +-
 src/packages/pulltorefresh/pulltorefresh.scss |    4 +-
 src/packages/radio/radio.scss                 |   11 +-
 src/packages/radiogroup/radiogroup.scss       |    6 +-
 src/packages/range/range.scss                 |   81 +-
 src/packages/rate/rate.scss                   |   16 +-
 src/packages/resultpage/resultpage.scss       |    4 +-
 src/packages/searchbar/searchbar.scss         |   38 +-
 src/packages/segmented/segmented.scss         |   12 +-
 src/packages/shortpassword/shortpassword.scss |   48 +-
 src/packages/skeleton/skeleton.scss           |    6 +-
 src/packages/step/step.scss                   |    8 +-
 src/packages/steps/steps.scss                 |   44 +-
 src/packages/swipe/swipe.scss                 |    6 +-
 src/packages/swiper/swiper.scss               |    8 +-
 src/packages/switch/switch.scss               |   16 +-
 src/packages/tabbar/tabbar.scss               |   20 +-
 src/packages/tabbaritem/tabbaritem.scss       |   14 +-
 src/packages/table/table.scss                 |   26 +-
 src/packages/tabs/tabs.scss                   |   38 +-
 src/packages/tag/tag.scss                     |    6 +-
 src/packages/textarea/textarea.scss           |   12 +-
 src/packages/timedetail/timedetail.scss       |   10 +-
 src/packages/timeselect/timeselect.scss       |    4 +-
 src/packages/toast/toast.scss                 |   20 +-
 src/packages/tour/tour.scss                   |    8 +-
 src/packages/uploader/uploader.scss           |   28 +-
 src/packages/virtuallist/virtuallist.scss     |   18 +-
 src/sites/mobile/main.tsx                     |    2 +
 src/styles/variables.scss                     | 1052 +++++++++++------
 src/utils/index.taro.ts                       |    1 +
 src/utils/index.ts                            |    1 +
 src/utils/scale-f.taro.ts                     |   20 +
 src/utils/scale-f.ts                          |  110 ++
 77 files changed, 1475 insertions(+), 999 deletions(-)
 create mode 100644 src/utils/scale-f.taro.ts
 create mode 100644 src/utils/scale-f.ts

diff --git a/packages/nutui-taro-demo/src/pages/index/index.config.ts b/packages/nutui-taro-demo/src/pages/index/index.config.ts
index a7c25c75b7..d1120af4da 100644
--- a/packages/nutui-taro-demo/src/pages/index/index.config.ts
+++ b/packages/nutui-taro-demo/src/pages/index/index.config.ts
@@ -1,3 +1,5 @@
 export default definePageConfig({
   navigationBarTitleText: '首页',
+  // App设计规范适配版本
+  // designAppVersion: 16
 })
diff --git a/src/packages/actionsheet/actionsheet.scss b/src/packages/actionsheet/actionsheet.scss
index c850df3b0d..1bb3769513 100644
--- a/src/packages/actionsheet/actionsheet.scss
+++ b/src/packages/actionsheet/actionsheet.scss
@@ -9,7 +9,7 @@
   }
 
   .nut-popup-title {
-    border-bottom: 1px solid $actionsheet-border-color;
+    border-bottom: scale-px(1px) solid $actionsheet-border-color;
   }
 
   &-list {
@@ -23,7 +23,7 @@
   &-cancel,
   &-item {
     display: block;
-    padding: 10px;
+    padding: scale-px(10px);
     text-align: $actionsheet-item-text-align;
     line-height: $actionsheet-item-line-height;
     font-size: $font-size-base;
@@ -54,8 +54,8 @@
   }
 
   &-cancel {
-    margin-top: 5px;
-    border-top: 1px solid $actionsheet-border-color;
+    margin-top: scale-px(5px);
+    border-top: scale-px(1px) solid $actionsheet-border-color;
     border-radius: $actionsheet-border-radius;
   }
 
diff --git a/src/packages/address/address.scss b/src/packages/address/address.scss
index 18fea0ecfc..1f9b2d11ef 100644
--- a/src/packages/address/address.scss
+++ b/src/packages/address/address.scss
@@ -4,15 +4,15 @@
 .nut-address {
   &-exist {
     display: block;
-    padding: 15px 20px 0;
-    height: 279px;
+    padding: scale-px(15px) scale-px(20px) 0;
+    height: scale-px(279px);
     overflow-y: auto;
     box-sizing: border-box;
 
     &-item {
       display: flex;
       align-items: center;
-      margin-bottom: 20px;
+      margin-bottom: scale-px(20px);
       font-size: $font-size-s;
       line-height: $font-size-base;
       color: $color-title;
@@ -22,26 +22,26 @@
       }
 
       &-info {
-        margin-left: 9px;
+        margin-left: scale-px(9px);
       }
     }
   }
 
   &-footer {
     width: 100%;
-    height: 54px;
-    padding: 6px 0px 0;
-    border-top: 1px solid $color-border;
+    height: scale-px(54px);
+    padding: scale-px(6px) scale-px(0px) 0;
+    border-top: scale-px(1px) solid $color-border;
 
     &-btn {
       width: 90%;
-      height: 42px;
-      line-height: 42px;
+      height: scale-px(42px);
+      line-height: scale-px(42px);
       margin: auto;
       text-align: center;
       background: $button-primary-background-color;
-      border-radius: 21px;
-      font-size: 15px;
+      border-radius: scale-px(21px);
+      font-size: scale-px(15px);
       color: $color-primary-text;
     }
   }
@@ -49,12 +49,12 @@
 
 .nut-address {
   &-title {
-    font-size: 14px;
+    font-size: scale-px(14px);
     font-weight: 500;
-    padding: 16px 16px 12px 16px;
+    padding: scale-px(16px) scale-px(16px) scale-px(12px) scale-px(16px);
   }
   &-hotlist {
-    padding: 0 16px;
+    padding: 0 scale-px(16px);
     display: flex;
     flex-wrap: wrap;
     align-items: flex-start;
@@ -62,16 +62,16 @@
       display: flex;
       justify-content: center;
       align-items: center;
-      width: 63px;
-      height: 28px;
-      font-size: 12px;
-      border-radius: 4px;
-      margin-bottom: 7px;
+      width: scale-px(63px);
+      height: scale-px(28px);
+      font-size: scale-px(12px);
+      border-radius: scale-px(4px);
+      margin-bottom: scale-px(7px);
       /* #ifdef harmony dynamic*/
-      margin-right: 6px;
+      margin-right: scale-px(6px);
       /* #endif */
       /* #ifndef harmony dynamic*/
-      margin-right: 7px;
+      margin-right: scale-px(7px);
       /* #endif */
       background-color: $color-background-sunken;
       color: $color-title;
@@ -83,36 +83,36 @@
     &.hotlist-more {
       .nut-address-hotlist-item {
         width: auto;
-        padding: 0 16px;
-        margin-right: 7px;
+        padding: 0 scale-px(16px);
+        margin-right: scale-px(7px);
       }
     }
   }
 
   &-selected {
     width: 100%;
-    height: 60px;
-    padding: 0 16px;
+    height: scale-px(60px);
+    padding: 0 scale-px(16px);
     display: flex;
     align-items: center;
-    border-bottom: 1px solid $color-border;
+    border-bottom: scale-px(1px) solid $color-border;
     &-item {
-      font-size: 12px;
+      font-size: scale-px(12px);
       display: inline-block;
-      height: 28px;
-      line-height: 28px;
-      padding: 0 12px;
-      border-radius: 4px;
+      height: scale-px(28px);
+      line-height: scale-px(28px);
+      padding: 0 scale-px(12px);
+      border-radius: scale-px(4px);
       background-color: $color-background-sunken;
 
       &.active {
-        border: 1px solid $color-primary;
+        border: scale-px(1px) solid $color-primary;
         background-color: $color-primary-light-pressed;
         color: $color-primary;
       }
     }
     &-border {
-      margin: 0 2px;
+      margin: 0 scale-px(2px);
       color: $color-text-disabled;
     }
   }
@@ -122,15 +122,15 @@
     .nut-elevator-list {
       &-item {
         position: relative;
-        padding-left: 20px;
+        padding-left: scale-px(20px);
       }
       &-item-code {
         display: inline;
         position: absolute;
         left: 0;
         top: 0;
-        height: 30px;
-        line-height: 30px;
+        height: scale-px(30px);
+        line-height: scale-px(30px);
         border-bottom: 0;
         color: $color-text-help;
         font-weight: 500;
@@ -145,11 +145,11 @@
         display: flex;
         justify-content: center;
         align-items: center;
-        width: 16px;
-        height: 16px;
-        font-size: 10px;
-        border-radius: 16px;
-        margin-bottom: 2px;
+        width: scale-px(16px);
+        height: scale-px(16px);
+        font-size: scale-px(10px);
+        border-radius: scale-px(16px);
+        margin-bottom: scale-px(2px);
         color: $color-text-help;
         &-active {
           background-color: $color-primary;
@@ -167,7 +167,7 @@
     &-item {
       &-info {
         margin-left: 0;
-        margin-right: 9px;
+        margin-right: scale-px(9px);
       }
     }
   }
diff --git a/src/packages/animate/animate.scss b/src/packages/animate/animate.scss
index 67b478bb3e..1de0a969aa 100644
--- a/src/packages/animate/animate.scss
+++ b/src/packages/animate/animate.scss
@@ -76,31 +76,31 @@
       transform: translateX(0);
     }
     10% {
-      transform: translateX(-9px);
+      transform: translateX(scale-px(-9px));
     }
     20% {
-      transform: translateX(8px);
+      transform: translateX(scale-px(8px));
     }
     30% {
-      transform: translateX(-7px);
+      transform: translateX(scale-px(-7px));
     }
     40% {
-      transform: translateX(6px);
+      transform: translateX(scale-px(6px));
     }
     50% {
-      transform: translateX(-5px);
+      transform: translateX(scale-px(-5px));
     }
     60% {
-      transform: translateX(4px);
+      transform: translateX(scale-px(4px));
     }
     70% {
-      transform: translateX(-3px);
+      transform: translateX(scale-px(-3px));
     }
     80% {
-      transform: translateX(2px);
+      transform: translateX(scale-px(2px));
     }
     90% {
-      transform: translateX(-1px);
+      transform: translateX(scale-px(-1px));
     }
   }
   .nut-animate-shake {
@@ -142,16 +142,16 @@
     position: relative;
     &::after,
     &::before {
-      width: 60px;
-      height: 60px;
+      width: scale-px(60px);
+      height: scale-px(60px);
       content: '';
       box-sizing: border-box;
-      border: 4px solid rgba(255, 255, 255, 0.6);
+      border: scale-px(4px) solid rgba(255, 255, 255, 0.6);
       position: absolute;
-      border-radius: 30px;
+      border-radius: scale-px(30px);
       right: 50%;
-      margin-top: -30px;
-      margin-right: -30px;
+      margin-top: scale-px(-30px);
+      margin-right: scale-px(-30px);
       z-index: 1;
       transform: scale(0);
       animation: twinkle 2s ease-out infinite;
@@ -180,8 +180,8 @@
     position: relative;
     overflow: hidden;
     &::after {
-      width: 100px;
-      height: 60px;
+      width: scale-px(100px);
+      height: scale-px(60px);
       position: absolute;
       left: 0;
       top: 0;
@@ -194,17 +194,17 @@
       );
       animation: flicker 1.5s linear infinite;
       transform: skewX(-20deg);
-      filter: blur(3px);
+      filter: blur(scale-px(3px));
     }
   }
 
   @keyframes flicker {
     0% {
-      transform: translateX(-100px) skewX(-20deg);
+      transform: translateX(scale-px(-100px)) skewX(-20deg);
     }
     40%,
     100% {
-      transform: translateX(150px) skewX(-20deg);
+      transform: translateX(scale-px(150px)) skewX(-20deg);
     }
   }
 
@@ -214,13 +214,13 @@
       transform: rotate(0) translateY(0);
     }
     25% {
-      transform: rotate(10deg) translateY(20px);
+      transform: rotate(10deg) translateY(scale-px(20px));
     }
     50% {
-      transform: rotate(0) translateY(-10px);
+      transform: rotate(0) translateY(scale-px(-10px));
     }
     75% {
-      transform: rotate(-10deg) translateY(20px);
+      transform: rotate(-10deg) translateY(scale-px(20px));
     }
     100% {
       transform: rotate(0) translateY(0);
@@ -237,13 +237,13 @@
       top: 0;
     }
     25% {
-      top: 1px;
+      top: scale-px(1px);
     }
     50% {
-      top: 4px;
+      top: scale-px(4px);
     }
     75% {
-      top: 1px;
+      top: scale-px(1px);
     }
     100% {
       top: 0;
diff --git a/src/packages/audio/audio.scss b/src/packages/audio/audio.scss
index e26ed4deb5..efd4939a90 100644
--- a/src/packages/audio/audio.scss
+++ b/src/packages/audio/audio.scss
@@ -10,11 +10,11 @@
       display: flex;
       align-items: center;
       justify-content: center;
-      width: 30px;
-      height: 30px;
+      width: scale-px(30px);
+      height: scale-px(30px);
       background: $white;
       border-radius: 50%;
-      box-shadow: 0 0 8px $color-text-disabled;
+      box-shadow: 0 0 scale-px(8px) $color-text-disabled;
     }
 
     .nut-audio-icon-stop {
@@ -26,11 +26,11 @@
         top: 50%;
         transform: translateX(-50%);
         content: '';
-        height: 2px;
-        width: 30px;
+        height: scale-px(2px);
+        width: scale-px(30px);
         background: $color-text-disabled;
         transform: rotate(45deg);
-        transform-origin: 8px -18px;
+        transform-origin: scale-px(8px) scale-px(-18px);
       }
     }
   }
@@ -39,35 +39,35 @@
     display: flex;
     align-items: center;
     width: 100%;
-    margin: 0px auto;
-    padding: 10px 0;
+    margin: scale-px(0px) auto;
+    padding: scale-px(10px) 0;
 
     &-bar-wrapper {
       flex: 1;
-      margin: 0 10px;
+      margin: 0 scale-px(10px);
     }
 
     .time {
-      min-width: 50px;
-      font-size: 12px;
+      min-width: scale-px(50px);
+      font-size: scale-px(12px);
       text-align: center;
     }
 
     .nut-range-button {
-      width: 8px;
-      height: 8px;
+      width: scale-px(8px);
+      height: scale-px(8px);
     }
   }
 
   .custom-button-group {
     .nut-button-primary {
-      margin: 0 5px;
+      margin: 0 scale-px(5px);
     }
   }
 
   .custom-button-group-disable {
     .nut-button-primary {
-      margin: 0 5px;
+      margin: 0 scale-px(5px);
       pointer-events: none;
     }
   }
@@ -78,7 +78,7 @@
 
   .nut-audio-none-container {
     .nut-voice {
-      border: 1px solid $color-title;
+      border: scale-px(1px) solid $color-title;
       align-items: center;
     }
   }
@@ -92,7 +92,7 @@
         left: auto;
         right: 50%;
         transform: rotate(-45deg);
-        transform-origin: 20px -18px;
+        transform-origin: scale-px(20px) scale-px(-18px);
       }
     }
   }
diff --git a/src/packages/avatar/avatar.scss b/src/packages/avatar/avatar.scss
index f3480990ce..6aa681ed47 100644
--- a/src/packages/avatar/avatar.scss
+++ b/src/packages/avatar/avatar.scss
@@ -12,7 +12,7 @@
   height: $avatar-normal-height;
 
   &-round {
-    border-radius: 999px;
+    border-radius: scale-px(999px);
     overflow: hidden;
   }
 
diff --git a/src/packages/avatarcropper/avatarcropper.scss b/src/packages/avatarcropper/avatarcropper.scss
index b79102847b..9ed3283c0c 100644
--- a/src/packages/avatarcropper/avatarcropper.scss
+++ b/src/packages/avatarcropper/avatarcropper.scss
@@ -72,7 +72,7 @@
 
       &-item {
         color: #fff;
-        padding: 15px;
+        padding: scale-px(15px);
         cursor: pointer;
         display: flex;
         align-items: center;
@@ -98,7 +98,7 @@
         top: 50%;
         transform: translate(-50%, -50%);
         background-color: transparent;
-        box-shadow: 0 0 1000px 1000px rgba(0, 0, 0, 0.6);
+        box-shadow: 0 0 scale-px(1000px) scale-px(1000px) rgba(0, 0, 0, 0.6);
       }
     }
   }
diff --git a/src/packages/avatargroup/avatargroup.scss b/src/packages/avatargroup/avatargroup.scss
index 27462e4d11..c7dede3c8e 100644
--- a/src/packages/avatargroup/avatargroup.scss
+++ b/src/packages/avatargroup/avatargroup.scss
@@ -4,11 +4,11 @@
   flex: 0 0 auto; // 防止被压缩
   &-avatar,
   .nut-avatar {
-    border: 1px solid #fff;
-    margin-left: -8px;
+    border: scale-px(1px) solid #fff;
+    margin-left: scale-px(-8px);
 
     &:not(:first-of-type) {
-      margin-left: -8px;
+      margin-left: scale-px(-8px);
     }
   }
 }
@@ -18,7 +18,7 @@
   .nut-avatar {
     &:not(:first-of-type) {
       margin-left: 0;
-      margin-right: -8px;
+      margin-right: scale-px(-8px);
     }
   }
 }
diff --git a/src/packages/badge/badge.scss b/src/packages/badge/badge.scss
index 750ccb6010..ed27f80324 100644
--- a/src/packages/badge/badge.scss
+++ b/src/packages/badge/badge.scss
@@ -55,7 +55,7 @@
     box-sizing: border-box;
     color: $badge-color;
     font-size: $badge-font-size;
-    line-height: 12px;
+    line-height: scale-px(12px);
     white-space: nowrap;
     font-weight: normal;
     vertical-align: middle;
diff --git a/src/packages/barrage/barrage.scss b/src/packages/barrage/barrage.scss
index 66c351fa4e..f7a2592c99 100644
--- a/src/packages/barrage/barrage.scss
+++ b/src/packages/barrage/barrage.scss
@@ -13,8 +13,8 @@
     display: block;
     position: absolute;
     right: 0;
-    padding: 4px 16px;
-    border-radius: 16px;
+    padding: scale-px(4px) scale-px(16px);
+    border-radius: scale-px(16px);
     font-size: $font-size-s;
     text-align: center;
     white-space: pre;
diff --git a/src/packages/button/button.scss b/src/packages/button/button.scss
index 5f950e9dad..e4d1ea3181 100644
--- a/src/packages/button/button.scss
+++ b/src/packages/button/button.scss
@@ -3,7 +3,7 @@
   display: flex;
   display: inline-block;
   /* #ifdef harmony dynamic*/
-  width: 80px;
+  width: scale-px(80px);
   /* #endif */
   /* #ifndef harmony dynamic*/
   width: auto;
diff --git a/src/packages/calendar/calendar.scss b/src/packages/calendar/calendar.scss
index 7a394555d6..ab41cff0ed 100644
--- a/src/packages/calendar/calendar.scss
+++ b/src/packages/calendar/calendar.scss
@@ -46,12 +46,12 @@
     color: $color-title;
     font-size: $calendar-title-font-size;
     font-weight: $calendar-title-font-weight;
-    line-height: 50px;
+    line-height: scale-px(50px);
   }
 
   &-sub-title {
-    padding: 7px 0;
-    line-height: 22px;
+    padding: scale-px(7px) 0;
+    line-height: scale-px(22px);
     font-size: $calendar-sub-title-font-size;
   }
 
@@ -59,9 +59,10 @@
     display: flex;
     align-items: center;
     justify-content: space-around;
-    height: 36px;
-    border-radius: 0px 0px 12px 12px;
-    box-shadow: 0px 4px 10px 0px rgba($color: #000000, $alpha: 0.06);
+    height: scale-px(36px);
+    border-radius: scale-px(0px) scale-px(0px) scale-px(12px) scale-px(12px);
+    box-shadow: scale-px(0px) scale-px(4px) scale-px(10px) scale-px(0px)
+      rgba($color: #000000, $alpha: 0.06);
   }
 
   &-week-item {
@@ -87,11 +88,11 @@
     box-sizing: border-box;
 
     .calendar-loading-tip {
-      height: 50px;
-      line-height: 50px;
+      height: scale-px(50px);
+      line-height: scale-px(50px);
       text-align: center;
       position: absolute;
-      top: -50px;
+      top: scale-px(-50px);
       left: 0;
       right: 0;
       font-size: $font-size-s;
@@ -105,9 +106,9 @@
     text-align: center;
 
     &-title {
-      height: 23px;
-      line-height: 23px;
-      margin: 8px 0;
+      height: scale-px(23px);
+      line-height: scale-px(23px);
+      margin: scale-px(8px) 0;
     }
   }
 
@@ -125,7 +126,7 @@
     width: $calendar-day-width;
     height: $calendar-day-height;
     font-weight: $calendar-day-font-weight;
-    margin-bottom: 4px;
+    margin-bottom: scale-px(4px);
 
     &:nth-child(7n + 0),
     &:nth-child(7n + 1) {
@@ -135,22 +136,22 @@
     &-info,
     &-info-curr {
       position: absolute;
-      bottom: 5px;
+      bottom: scale-px(5px);
       width: 100%;
-      font-size: 12px;
-      line-height: 14px;
+      font-size: scale-px(12px);
+      line-height: scale-px(14px);
     }
 
     &-info-top {
       position: absolute;
       width: 100%;
-      top: 5px;
+      top: scale-px(5px);
     }
 
     &-info-bottom {
       position: absolute;
       width: 100%;
-      bottom: 5px;
+      bottom: scale-px(5px);
     }
 
     &-active {
@@ -159,13 +160,13 @@
       border-radius: $calendar-day-active-border-radius;
 
       &.active-start {
-        border-radius: 0px;
+        border-radius: scale-px(0px);
         border-top-left-radius: $calendar-day-active-border-radius;
         border-bottom-left-radius: $calendar-day-active-border-radius;
       }
 
       &.active-end {
-        border-radius: 0px;
+        border-radius: scale-px(0px);
         border-top-right-radius: $calendar-day-active-border-radius;
         border-bottom-right-radius: $calendar-day-active-border-radius;
       }
@@ -206,9 +207,9 @@
     background-color: $white;
 
     .calendar-confirm-btn {
-      height: 40px;
-      line-height: 40px;
-      margin: 6px 16px;
+      height: scale-px(40px);
+      line-height: scale-px(40px);
+      margin: scale-px(6px) scale-px(16px);
       text-align: center;
       border-radius: $radius-base;
       background: $button-primary-background-color;
@@ -219,7 +220,7 @@
 }
 
 .nut-calendar-popup .nut-popup-title-right {
-  top: 7px !important;
+  top: scale-px(7px) !important;
 }
 
 [dir='rtl'] .nut-calendar,
diff --git a/src/packages/calendarcard/calendarcard.scss b/src/packages/calendarcard/calendarcard.scss
index 56042a0b92..6f94b3f943 100644
--- a/src/packages/calendarcard/calendarcard.scss
+++ b/src/packages/calendarcard/calendarcard.scss
@@ -1,6 +1,6 @@
 .nut-calendarcard {
   background: $color-background-overlay;
-  border-radius: 12px;
+  border-radius: scale-px(12px);
   overflow: hidden;
   font-size: $calendar-base-font-size;
   color: $color-title;
@@ -17,15 +17,15 @@
       display: flex;
       flex-direction: row;
       cursor: pointer;
-      margin: 16px;
+      margin: scale-px(16px);
       line-height: 1;
 
       .left {
-        margin-left: 8px;
+        margin-left: scale-px(8px);
       }
 
       .right {
-        margin-right: 8px;
+        margin-right: scale-px(8px);
       }
     }
   }
@@ -44,9 +44,9 @@
     flex-direction: column;
     position: relative;
     width: $calendar-day-width;
-    height: 48px;
+    height: scale-px(48px);
     cursor: pointer;
-    margin-bottom: 4px;
+    margin-bottom: scale-px(4px);
     text-align: center;
 
     &.header {
@@ -59,9 +59,9 @@
       align-items: center;
       justify-content: center;
       width: 100%;
-      height: 12px;
-      font-size: 12px;
-      line-height: 12px;
+      height: scale-px(12px);
+      font-size: scale-px(12px);
+      line-height: scale-px(12px);
     }
 
     &.weekend {
@@ -132,12 +132,12 @@
     &-right {
       .left {
         margin-left: 0;
-        margin-right: 8px;
+        margin-right: scale-px(8px);
       }
 
       .right {
         margin-right: 0;
-        margin-left: 8px;
+        margin-left: scale-px(8px);
       }
 
       .nut-icon-ArrowLeft,
diff --git a/src/packages/card/card.scss b/src/packages/card/card.scss
index ba888dd854..faa2081ec8 100644
--- a/src/packages/card/card.scss
+++ b/src/packages/card/card.scss
@@ -9,8 +9,8 @@
   border-radius: $card-border-radius;
 
   &-left {
-    width: 120px;
-    height: 120px;
+    width: scale-px(120px);
+    height: scale-px(120px);
     flex-shrink: 0;
 
     > img {
@@ -23,25 +23,25 @@
 
   &-right {
     flex: 1;
-    padding: 0 10px 8px;
+    padding: 0 scale-px(10px) scale-px(8px);
 
     &-title {
       @include moreline-ellipsis();
       line-height: 1.5;
-      font-size: 14px;
+      font-size: scale-px(14px);
       color: $color-title;
     }
 
     &-price {
       display: flex;
       align-items: center;
-      height: 18px;
-      line-height: 18px;
-      margin-top: 9px;
+      height: scale-px(18px);
+      line-height: scale-px(18px);
+      margin-top: scale-px(9px);
 
       &-origin {
         &.nut-price {
-          margin-left: 2px;
+          margin-left: scale-px(2px);
           .nut-price-symbol,
           .nut-price-integer,
           .nut-price-decimal {
@@ -54,11 +54,11 @@
     &-other {
       display: flex;
       align-items: center;
-      padding: 5px 0 2px;
+      padding: scale-px(5px) 0 scale-px(2px);
 
       .nut-tag {
-        padding: 0 2px;
-        margin-right: 5px;
+        padding: 0 scale-px(2px);
+        margin-right: scale-px(5px);
         font-size: $font-size-xs;
       }
     }
@@ -71,8 +71,8 @@
       &-name {
         line-height: 1.5;
         color: $color-text;
-        font-size: 12px;
-        padding-top: 4px;
+        font-size: scale-px(12px);
+        padding-top: scale-px(4px);
       }
     }
   }
@@ -85,7 +85,7 @@
       &-origin {
         &.nut-price {
           margin-left: 0;
-          margin-right: 2px;
+          margin-right: scale-px(2px);
         }
       }
     }
@@ -93,7 +93,7 @@
     &-other {
       .nut-tag {
         margin-right: 0;
-        margin-left: 5px;
+        margin-left: scale-px(5px);
       }
     }
   }
diff --git a/src/packages/cell/cell.scss b/src/packages/cell/cell.scss
index 31847bb99d..c5fb3b8fbb 100644
--- a/src/packages/cell/cell.scss
+++ b/src/packages/cell/cell.scss
@@ -11,7 +11,7 @@
   box-shadow: $cell-box-shadow;
   font-size: $cell-title-font-size;
   color: $cell-title-color;
-  margin-bottom: 10px;
+  margin-bottom: scale-px(10px);
   box-sizing: border-box;
 
   &-group-item {
@@ -73,12 +73,12 @@
 
   &-divider {
     display: flex;
-    min-height: 1px;
+    min-height: scale-px(1px);
     padding-left: $cell-divider-left;
     padding-right: $cell-divider-right;
     &-inner {
       display: flex;
-      height: 1px;
+      height: scale-px(1px);
       width: 100%;
       border-top: $cell-divider-border-bottom;
     }
diff --git a/src/packages/cellgroup/cellgroup.scss b/src/packages/cellgroup/cellgroup.scss
index ab968f0108..d0fee11d8b 100644
--- a/src/packages/cellgroup/cellgroup.scss
+++ b/src/packages/cellgroup/cellgroup.scss
@@ -9,8 +9,8 @@
     color: $cell-group-title-color;
     font-size: $cell-group-title-font-size;
     line-height: $cell-group-title-line-height;
-    margin-top: 30px;
-    margin-bottom: 10px;
+    margin-top: scale-px(30px);
+    margin-bottom: scale-px(10px);
   }
 
   &-description {
@@ -21,8 +21,8 @@
     color: $cell-group-description-color;
     font-size: $cell-group-description-font-size;
     line-height: $cell-group-description-line-height;
-    margin-top: 10px;
-    margin-bottom: 10px;
+    margin-top: scale-px(10px);
+    margin-bottom: scale-px(10px);
   }
 
   &-wrap {
diff --git a/src/packages/checkbox/checkbox.scss b/src/packages/checkbox/checkbox.scss
index 58aa00a1a2..491d8cd40e 100644
--- a/src/packages/checkbox/checkbox.scss
+++ b/src/packages/checkbox/checkbox.scss
@@ -11,10 +11,11 @@
   }
 
   &-icon-wrap {
-    font-size: 0px;
-    line-height: 0px;
+    font-size: scale-px(0px);
+    line-height: scale-px(0px);
     border-radius: 50%;
-    box-shadow: 0px 2px 4px 0px rgba(255, 15, 35, 0.2);
+    box-shadow: scale-px(0px) scale-px(2px) scale-px(4px) scale-px(0px)
+      rgba(255, 15, 35, 0.2);
   }
 
   &-icon-checked {
@@ -43,7 +44,8 @@
   &-icon-indeterminate {
     color: $color-primary;
     background-color: $white;
-    box-shadow: 0px 2px 4px 0px #ff0f2333;
+    box-shadow: scale-px(0px) scale-px(2px) scale-px(4px) scale-px(0px)
+      #ff0f2333;
     border-radius: 50%;
 
     &.nut-checkbox-icon-disabled {
@@ -76,14 +78,14 @@
     display: inline-flex;
     /* #endif */
     align-items: center;
-    min-height: 32px;
+    min-height: scale-px(32px);
     padding: $checkbox-button-padding;
     font-size: $checkbox-button-font-size;
     background: $checkbox-button-background;
     border-radius: $checkbox-button-border-radius;
     color: $checkbox-label-color;
     box-sizing: border-box;
-    border: 1px solid $checkbox-button-background;
+    border: scale-px(1px) solid $checkbox-button-background;
     overflow: hidden;
 
     &-active {
@@ -94,7 +96,7 @@
 
     &-disabled {
       color: $color-text-disabled;
-      border: 1px solid $checkbox-button-background;
+      border: scale-px(1px) solid $checkbox-button-background;
     }
 
     &-icon {
@@ -103,35 +105,35 @@
       bottom: 0;
       width: 0;
       height: 0;
-      border-top: 10px solid transparent;
-      border-left: 10px solid transparent;
-      border-bottom: 10px solid $color-primary;
-      border-right: 10px solid $color-primary;
+      border-top: scale-px(10px) solid transparent;
+      border-left: scale-px(10px) solid transparent;
+      border-bottom: scale-px(10px) solid $color-primary;
+      border-right: scale-px(10px) solid $color-primary;
       display: flex;
       align-items: flex-end;
       justify-content: flex-end;
     }
 
     .nut-checkbox-button-icon-checked {
-      width: 12px;
-      height: 12px;
+      width: scale-px(12px);
+      height: scale-px(12px);
       position: absolute;
       color: $white;
       right: 0;
       bottom: 0;
-      transform: translate(-1px, -2px);
+      transform: translate(scale-px(-1px), scale-px(-2px));
     }
 
     .nut-icon {
       position: absolute;
-      font-size: 12px;
-      width: 12px;
-      height: 12px;
+      font-size: scale-px(12px);
+      width: scale-px(12px);
+      height: scale-px(12px);
 
       &:before {
         top: auto;
-        bottom: -22px;
-        margin-left: 6px;
+        bottom: scale-px(-22px);
+        margin-left: scale-px(6px);
       }
     }
   }
@@ -139,7 +141,7 @@
   .nut-checkbox-button-active.nut-checkbox-button-disabled {
     background: $color-text-disabled;
     color: $white;
-    border: 1px solid $color-text-disabled;
+    border: scale-px(1px) solid $color-text-disabled;
   }
 
   &-list-item {
@@ -176,19 +178,19 @@
     &-icon {
       right: auto;
       left: 0;
-      border-right: 10px solid transparent;
-      border-left: 10px solid $color-primary;
+      border-right: scale-px(10px) solid transparent;
+      border-left: scale-px(10px) solid $color-primary;
 
       &-checked {
         left: auto;
         right: 50%;
-        transform: translate(3px, -3px);
+        transform: translate(scale-px(3px), scale-px(-3px));
       }
 
       .nut-icon {
         &:before {
           margin-left: 0;
-          margin-right: 6px;
+          margin-right: scale-px(6px);
         }
       }
     }
diff --git a/src/packages/checkboxgroup/checkboxgroup.scss b/src/packages/checkboxgroup/checkboxgroup.scss
index 3e2a6bd4e8..c6863eecb7 100644
--- a/src/packages/checkboxgroup/checkboxgroup.scss
+++ b/src/packages/checkboxgroup/checkboxgroup.scss
@@ -10,7 +10,7 @@
     flex-direction: column;
 
     .nut-checkbox {
-      margin-bottom: 5px;
+      margin-bottom: scale-px(5px);
 
       &.nut-checkbox-reverse {
         width: 100%;
@@ -37,7 +37,7 @@
       display: inline-flex;
       /* #endif */
       flex: 1;
-      margin-right: 20px;
+      margin-right: scale-px(20px);
 
       &-button-active {
         border: $radio-button-active-border;
@@ -55,7 +55,7 @@
     box-sizing: border-box;
 
     .nut-checkbox {
-      margin-bottom: 5px;
+      margin-bottom: scale-px(5px);
 
       &.nut-checkbox-reverse {
         width: auto;
@@ -75,14 +75,14 @@
 .nut-rtl .nut-checkboxgroup {
   .nut-checkbox {
     &-label {
-      margin-right: 5px;
+      margin-right: scale-px(5px);
     }
   }
 
   &-vertical {
     .nut-checkbox {
       &-label {
-        margin-right: 5px;
+        margin-right: scale-px(5px);
       }
     }
   }
@@ -90,7 +90,7 @@
   &-horizontal {
     .nut-checkbox {
       margin-right: 0;
-      margin-left: 20px;
+      margin-left: scale-px(20px);
     }
   }
 }
diff --git a/src/packages/collapseitem/collapseitem.scss b/src/packages/collapseitem/collapseitem.scss
index 067cfa9b49..faf0cb2d64 100644
--- a/src/packages/collapseitem/collapseitem.scss
+++ b/src/packages/collapseitem/collapseitem.scss
@@ -6,8 +6,8 @@
     box-sizing: border-box;
     content: ' ';
     pointer-events: none;
-    right: 16px;
-    left: 16px;
+    right: scale-px(16px);
+    left: scale-px(16px);
     bottom: 0;
     border-bottom: $collapse-item-border-bottom;
     -webkit-transform: scaleY(0.5);
@@ -34,8 +34,8 @@
       box-sizing: border-box;
       content: ' ';
       pointer-events: none;
-      right: 16px;
-      left: 16px;
+      right: scale-px(16px);
+      left: scale-px(16px);
       bottom: 0;
       border-bottom: $collapse-item-header-border-bottom;
       /* #ifdef harmony dynamic*/
@@ -57,7 +57,7 @@
     flex: 1;
     display: flex;
     justify-content: flex-end;
-    padding: 0px 20px;
+    padding: scale-px(0px) scale-px(20px);
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
@@ -66,7 +66,7 @@
 
   &-icon-box {
     display: flex;
-    width: 24px;
+    width: scale-px(24px);
     position: relative;
     color: $color-text;
   }
@@ -76,7 +76,7 @@
     align-items: center;
     position: absolute;
     top: 50%;
-    left: 5px;
+    left: scale-px(5px);
     transform: translateY(-50%);
     transform-origin: center;
     transition: transform 0.3s;
@@ -126,6 +126,6 @@
 .nut-rtl .nut-collapse-item {
   &-icon {
     left: auto;
-    right: 5px;
+    right: scale-px(5px);
   }
 }
diff --git a/src/packages/countdown/countdown.scss b/src/packages/countdown/countdown.scss
index 84323db283..e16cb0237f 100644
--- a/src/packages/countdown/countdown.scss
+++ b/src/packages/countdown/countdown.scss
@@ -15,7 +15,7 @@
     box-sizing: border-box;
     font-weight: $coutdown-font-weight;
     font-size: $countdown-font-size;
-    line-height: calc($countdown-font-size + 2px);
+    line-height: calc($countdown-font-size + scale-px(2px));
     font-family: 'JDZH-Regular';
   }
   &-number,
@@ -41,7 +41,7 @@
     background-color: $countdown-number-background-color;
     color: $countdown-number-color;
     &::after {
-      border: 1px solid $countdown-number-border-color;
+      border: scale-px(1px) solid $countdown-number-border-color;
     }
   }
 
@@ -49,7 +49,7 @@
     background-color: $countdown-number-primary-background-color;
     color: $countdown-number-primary-color;
     &::after {
-      border: 1px solid $countdown-number-primary-border-color;
+      border: scale-px(1px) solid $countdown-number-primary-border-color;
     }
   }
   &-number-text {
diff --git a/src/packages/dialog/dialog.scss b/src/packages/dialog/dialog.scss
index 5e49bf26b8..4b72ef101e 100644
--- a/src/packages/dialog/dialog.scss
+++ b/src/packages/dialog/dialog.scss
@@ -60,7 +60,7 @@
     }
 
     &-bottom {
-      bottom: -64px;
+      bottom: scale-px(-64px);
       width: $dialog-bottom-close-icon-size;
       height: $dialog-bottom-close-icon-size;
       left: 50%;
@@ -130,7 +130,7 @@
     .nut-button {
       min-width: $dialog-footer-button-min-width;
       border-radius: $dialog-footer-button-border;
-      padding: var(--nutui-button-large-padding, 0 12px);
+      padding: var(--nutui-button-large-padding, 0 scale-px(12px));
     }
 
     &-cancel.nut-dialog-footer-cancel {
diff --git a/src/packages/divider/divider.scss b/src/packages/divider/divider.scss
index bb5c5bb6cc..a9a6aac260 100644
--- a/src/packages/divider/divider.scss
+++ b/src/packages/divider/divider.scss
@@ -51,9 +51,9 @@
     /* #ifndef dynamic*/
     display: inline-flex;
     /* #endif */
-    width: 0px;
+    width: scale-px(0px);
     height: $divider-vertical-height;
-    border-left: 1px solid $divider-border-color;
+    border-left: scale-px(1px) solid $divider-border-color;
     margin: $divider-vertical-margin;
     vertical-align: middle;
   }
diff --git a/src/packages/elevator/elevator.scss b/src/packages/elevator/elevator.scss
index ba1732bfed..dfe3550d29 100644
--- a/src/packages/elevator/elevator.scss
+++ b/src/packages/elevator/elevator.scss
@@ -106,10 +106,10 @@
         /* #endif */
         align-items: center;
         justify-content: center;
-        height: 16px;
-        width: 16px;
+        height: scale-px(16px);
+        width: scale-px(16px);
         border-radius: 50%;
-        margin: 1px 0;
+        margin: scale-px(1px) 0;
         color: $elevator-bars-color;
         font-size: $elevator-bars-font-size;
         cursor: pointer;
diff --git a/src/packages/ellipsis/ellipsis.scss b/src/packages/ellipsis/ellipsis.scss
index f7b313ad8c..5520be55c2 100644
--- a/src/packages/ellipsis/ellipsis.scss
+++ b/src/packages/ellipsis/ellipsis.scss
@@ -14,7 +14,7 @@
 
 .nut-ellipsis-copy {
   position: absolute;
-  top: -999999px;
+  top: scale-px(-999999px);
 }
 
 .nut-ellipsis-width {
diff --git a/src/packages/empty/empty.scss b/src/packages/empty/empty.scss
index 7ec5e472fa..f6508e30c4 100644
--- a/src/packages/empty/empty.scss
+++ b/src/packages/empty/empty.scss
@@ -48,16 +48,16 @@
   &-actions-base {
     display: flex;
     flex-direction: row;
-    margin-top: 24px;
+    margin-top: scale-px(24px);
   }
   &-actions-small {
     display: flex;
     flex-direction: row;
-    margin-top: 16px;
+    margin-top: scale-px(16px);
   }
 
   &-action {
-    margin-right: 6px;
-    margin-left: 6px;
+    margin-right: scale-px(6px);
+    margin-left: scale-px(6px);
   }
 }
diff --git a/src/packages/fixednav/fixednav.scss b/src/packages/fixednav/fixednav.scss
index 7c85ede37e..de82c6d945 100644
--- a/src/packages/fixednav/fixednav.scss
+++ b/src/packages/fixednav/fixednav.scss
@@ -5,7 +5,7 @@
   position: fixed;
   z-index: $fixednav-index;
   display: inline-block;
-  height: 50px;
+  height: scale-px(5scale-px(0px));
 
   &.active {
     .nut-fixednav-btn {
@@ -29,17 +29,18 @@
     box-sizing: border-box;
     position: absolute;
     z-index: $fixednav-index;
-    width: 70px;
+    width: scale-px(7scale-px(0px));
     height: 100%;
     background: $fixednav-button-background;
-    box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.2);
+    box-shadow: scale-px(0px) scale-px(2px) scale-px(4px) scale-px(0px)
+      rgba(0, 0, 0, 0.2);
     display: flex;
     align-items: center;
     justify-content: center;
 
     .text {
-      width: 24px;
-      line-height: 13px;
+      width: scale-px(2scale-px(4px));
+      line-height: scale-px(1scale-px(3px));
       font-size: $font-size-s;
       color: #fff;
       flex-shrink: 0;
@@ -59,7 +60,8 @@
     background: $fixednav-background-color;
     display: flex;
     justify-content: space-between;
-    box-shadow: 2px 2px 8px 0px rgba(0, 0, 0, 0.2);
+    box-shadow: scale-px(2px) scale-px(2px) scale-px(8px) scale-px(0px)
+      rgba(0, 0, 0, 0.2);
 
     &-item {
       position: relative;
@@ -69,19 +71,19 @@
       flex-direction: column;
       justify-content: center;
       align-items: center;
-      min-width: 50px;
+      min-width: scale-px(5scale-px(0px));
       flex-shrink: 0;
       color: $fixednav-color;
 
       .nut-fixednav-list-text {
-        font-size: 10px;
+        font-size: scale-px(1scale-px(0px));
       }
     }
 
     &-image {
-      width: 20px;
-      height: 20px;
-      margin-bottom: 2px;
+      width: scale-px(2scale-px(0px));
+      height: scale-px(2scale-px(0px));
+      margin-bottom: scale-px(2px);
     }
   }
 
@@ -89,19 +91,21 @@
     right: 0;
     .nut-fixednav-btn {
       right: 0;
-      border-radius: 45px 0px 0px 45px;
+      border-radius: scale-px(4scale-px(5px)) scale-px(0px) scale-px(0px)
+        scale-px(4scale-px(5px));
       .nut-icon {
-        margin-right: 5px;
+        margin-right: scale-px(5px);
         transform: rotate(0deg);
       }
     }
     .nut-fixednav-list {
       right: 0;
       transform: translateX(100%);
-      border-radius: 25px 0px 0px 25px;
+      border-radius: scale-px(2scale-px(5px)) scale-px(0px) scale-px(0px)
+        scale-px(2scale-px(5px));
       padding: {
-        left: 20px;
-        right: 80px;
+        left: scale-px(2scale-px(0px));
+        right: scale-px(8scale-px(0px));
       }
     }
   }
@@ -111,9 +115,9 @@
     .nut-fixednav-btn {
       flex-direction: row-reverse;
       left: 0;
-      border-radius: 0 45px 45px 0;
+      border-radius: 0 scale-px(4scale-px(5px)) scale-px(4scale-px(5px)) 0;
       .nut-icon {
-        margin-left: 5px;
+        margin-left: scale-px(5px);
         transform: rotate(180deg);
       }
     }
@@ -121,10 +125,11 @@
     .nut-fixednav-list {
       transform: translateX(-100%);
       left: 0;
-      border-radius: 0px 25px 25px 0px;
+      border-radius: scale-px(0px) scale-px(2scale-px(5px))
+        scale-px(2scale-px(5px)) scale-px(0px);
       padding: {
-        left: 80px;
-        right: 20px;
+        left: scale-px(8scale-px(0px));
+        right: scale-px(2scale-px(0px));
       }
     }
   }
@@ -150,10 +155,11 @@
   &-btn {
     right: auto;
     left: 0;
-    border-radius: 0px 45px 45px 0px;
+    border-radius: scale-px(0px) scale-px(4scale-px(5px))
+      scale-px(4scale-px(5px)) scale-px(0px);
     .nut-icon {
-      margin-right: 0px;
-      margin-left: 5px;
+      margin-right: scale-px(0px);
+      margin-left: scale-px(5px);
       transform: rotate(180deg);
     }
   }
@@ -162,12 +168,14 @@
     right: auto;
     left: 0;
     transform: translateX(-100%);
-    border-radius: 0px 25px 25px 0px;
-    box-shadow: -2px 2px 8px 0px rgba(0, 0, 0, 0.2);
+    border-radius: scale-px(0px) scale-px(2scale-px(5px))
+      scale-px(2scale-px(5px)) scale-px(0px);
+    box-shadow: scale-px(-scale-px(2px)) scale-px(2px) scale-px(8px)
+      scale-px(0px) rgba(0, 0, 0, 0.2);
 
     padding: {
-      right: 20px;
-      left: 80px;
+      right: scale-px(2scale-px(0px));
+      left: scale-px(8scale-px(0px));
     }
 
     &-item {
@@ -185,12 +193,12 @@
     .nut-fixednav-btn {
       left: auto;
       right: 0;
-      border-radius: 45px 0 0 45px;
+      border-radius: scale-px(4scale-px(5px)) 0 0 scale-px(4scale-px(5px));
 
       .nut-icon {
         transform: rotate(0deg);
-        margin-right: 5px;
-        margin-left: 0px;
+        margin-right: scale-px(5px);
+        margin-left: scale-px(0px);
       }
     }
 
@@ -198,11 +206,12 @@
       transform: translateX(100%);
       right: auto;
       left: auto;
-      border-radius: 25px 0px 0px 25px;
+      border-radius: scale-px(2scale-px(5px)) scale-px(0px) scale-px(0px)
+        scale-px(2scale-px(5px));
 
       padding: {
-        right: 80px;
-        left: 20px;
+        right: scale-px(8scale-px(0px));
+        left: scale-px(2scale-px(0px));
       }
     }
   }
diff --git a/src/packages/formitem/formitem.scss b/src/packages/formitem/formitem.scss
index 285e36b715..e6005259c0 100644
--- a/src/packages/formitem/formitem.scss
+++ b/src/packages/formitem/formitem.scss
@@ -23,14 +23,14 @@
       color: $form-item-required-color;
       margin-right: $form-item-required-margin-right;
       position: absolute;
-      left: -10px;
+      left: scale-px(-10px);
     }
 
     &-right-required {
       color: $form-item-required-color;
       margin-left: $form-item-required-margin-right;
       position: absolute;
-      right: -10px;
+      right: scale-px(-10px);
     }
   }
 
@@ -68,7 +68,7 @@
       }
 
       .nut-range-container {
-        min-height: 24px;
+        min-height: scale-px(24px);
       }
 
       .nut-textarea {
@@ -132,13 +132,13 @@
 
 .nut-form-item-label-right {
   justify-content: flex-end;
-  padding-right: 24px;
+  padding-right: scale-px(24px);
   white-space: nowrap;
 }
 
 .nut-form-item-label-left {
   position: relative;
-  padding-left: 12px;
+  padding-left: scale-px(12px);
   white-space: nowrap;
 }
 
@@ -150,8 +150,8 @@
 
 .nut-form-item-label-top {
   display: block;
-  padding-bottom: 4px;
-  padding-right: 24px;
+  padding-bottom: scale-px(4px);
+  padding-right: scale-px(24px);
 }
 
 .nut-form-item-body-top {
@@ -163,14 +163,14 @@
 .nut-rtl .form-layout-right .nut-form-item-label {
   text-align: left;
   padding-right: 0;
-  padding-left: 24px;
+  padding-left: scale-px(24px);
 }
 
 [dir='rtl'] .form-layout-left .nut-form-item-label,
 .nut-rtl .form-layout-left .nut-form-item-label {
   text-align: right;
   padding-left: 0;
-  padding-right: 12px;
+  padding-right: scale-px(12px);
 
   // .required {
   //   left: auto;
@@ -181,7 +181,7 @@
 [dir='rtl'] .form-layout-top .nut-form-item-label,
 .nut-rtl .form-layout-top .nut-form-item-label {
   padding-right: 0;
-  padding-left: 24px;
+  padding-left: scale-px(24px);
 }
 
 [dir='rtl'] .form-layout-top .nut-form-item-body,
diff --git a/src/packages/grid/grid.scss b/src/packages/grid/grid.scss
index 92d9a1b268..372766e3a3 100644
--- a/src/packages/grid/grid.scss
+++ b/src/packages/grid/grid.scss
@@ -17,6 +17,6 @@
 .nut-rtl .nut-grid {
   &-border {
     border-left-width: 0;
-    border-right-width: 1px;
+    border-right-width: scale-px(1px);
   }
 }
diff --git a/src/packages/griditem/griditem.scss b/src/packages/griditem/griditem.scss
index ee1df14ec0..a3ae4da838 100644
--- a/src/packages/griditem/griditem.scss
+++ b/src/packages/griditem/griditem.scss
@@ -98,12 +98,12 @@
     &-content {
       &-border {
         border-right-width: 0;
-        border-left-width: 1px;
+        border-left-width: scale-px(1px);
       }
 
       &-surround {
         border-left-width: 0;
-        border-right-width: 1px;
+        border-right-width: scale-px(1px);
       }
 
       &-horizontal {
diff --git a/src/packages/hoverbuttonitem/hoverbuttonitem.scss b/src/packages/hoverbuttonitem/hoverbuttonitem.scss
index d33de14b34..d82329a36b 100644
--- a/src/packages/hoverbuttonitem/hoverbuttonitem.scss
+++ b/src/packages/hoverbuttonitem/hoverbuttonitem.scss
@@ -3,7 +3,7 @@
     width: $hoverbutton-item-size;
     height: $hoverbutton-item-size;
     border-radius: $hoverbutton-item-size;
-    border: 1px solid $hoverbutton-item-border-color;
+    border: scale-px(1px) solid $hoverbutton-item-border-color;
     background-color: $hoverbutton-item-background;
 
     &:active,
@@ -26,25 +26,25 @@
 
       .nut-icon {
         display: block;
-        width: 14px;
-        height: 14px;
-        font-size: 14px;
+        width: scale-px(14px);
+        height: scale-px(14px);
+        font-size: scale-px(14px);
       }
     }
   }
 
   &-icon {
-    width: 20px;
-    height: 20px;
-    margin: 9px;
+    width: scale-px(20px);
+    height: scale-px(20px);
+    margin: scale-px(9px);
     color: $hoverbutton-item-icon-color;
     fill: $hoverbutton-item-icon-color;
 
     .nut-icon {
       display: block;
-      width: 20px;
-      height: 20px;
-      font-size: 20px;
+      width: scale-px(20px);
+      height: scale-px(20px);
+      font-size: scale-px(20px);
     }
   }
 
@@ -54,13 +54,13 @@
   }
 
   &-text-icon {
-    width: 14px;
-    height: 5px;
+    width: scale-px(14px);
+    height: scale-px(5px);
   }
 
   &-text {
-    font-size: 10px;
-    margin-top: 5px;
-    line-height: 9px;
+    font-size: scale-px(10px);
+    margin-top: scale-px(5px);
+    line-height: scale-px(9px);
   }
 }
diff --git a/src/packages/imagepreview/imagepreview.scss b/src/packages/imagepreview/imagepreview.scss
index 1587f2886a..51108ec84b 100644
--- a/src/packages/imagepreview/imagepreview.scss
+++ b/src/packages/imagepreview/imagepreview.scss
@@ -16,7 +16,7 @@
   &-index {
     position: fixed;
     z-index: 2002;
-    top: 50px;
+    top: scale-px(50px);
     text-align: center;
     left: 0;
     right: 0;
@@ -25,7 +25,7 @@
 
     .arrow {
       position: absolute;
-      left: 15px;
+      left: scale-px(15px);
       transform: rotateZ(180deg);
     }
   }
@@ -44,17 +44,17 @@
     }
 
     &.top-right {
-      top: 50px;
-      right: 20px;
+      top: scale-px(50px);
+      right: scale-px(20px);
     }
 
     &.top-left {
-      top: 50px;
-      left: 20px;
+      top: scale-px(50px);
+      left: scale-px(20px);
     }
 
     &.bottom {
-      bottom: 50px;
+      bottom: scale-px(50px);
       left: 0;
       right: 0;
       text-align: center;
@@ -103,19 +103,19 @@
   &-index {
     .arrow {
       left: auto;
-      right: 15px;
+      right: scale-px(15px);
       transform: rotateZ(-180deg);
     }
   }
   &-close {
     &.top-right {
       right: auto;
-      left: 20px;
+      left: scale-px(20px);
     }
 
     &.top-left {
       left: auto;
-      right: 20px;
+      right: scale-px(20px);
     }
   }
 }
diff --git a/src/packages/indicator/indicator.scss b/src/packages/indicator/indicator.scss
index 6c442de3f5..cd30feea2d 100644
--- a/src/packages/indicator/indicator.scss
+++ b/src/packages/indicator/indicator.scss
@@ -6,7 +6,7 @@
   align-items: center;
 
   &-fixed-width {
-    width: 21px;
+    width: scale-px(21px);
   }
 
   &-dot,
@@ -21,7 +21,7 @@
     opacity: 0.4;
 
     &-0 {
-      margin-left: 0px;
+      margin-left: scale-px(0px);
     }
 
     &-active {
@@ -36,11 +36,11 @@
   &-fixed-width {
     // 两个页码的时候
     .nut-indicator-dot {
-      width: 12px;
+      width: scale-px(12px);
       border-radius: $indicator-border-radius;
 
       &-active {
-        width: 6px;
+        width: scale-px(6px);
       }
     }
   }
@@ -49,17 +49,17 @@
     // 竖向固定高度
     &.nut-indicator-fixed-width {
       justify-content: flex-start;
-      height: 21px;
+      height: scale-px(21px);
       width: auto;
 
       // 竖向两个页码
       .nut-indicator-dot {
-        width: 3px;
-        height: 12px;
+        width: scale-px(3px);
+        height: scale-px(12px);
         border-radius: $indicator-border-radius;
 
         &-active {
-          height: 6px;
+          height: scale-px(6px);
         }
       }
 
@@ -67,7 +67,7 @@
         &.nut-indicator-white {
           .nut-indicator-dot {
             &-active {
-              height: 6px;
+              height: scale-px(6px);
             }
           }
         }
@@ -136,7 +136,7 @@
 
 .nut-indicator-track.nut-indicator-white {
   &:after {
-    border: 1px solid rgba(0, 0, 0, 0.06);
+    border: scale-px(1px) solid rgba(0, 0, 0, 0.06);
     background: rgba(255, 255, 255, 0.4);
   }
 }
@@ -149,11 +149,11 @@
 
   .nut-indicator {
     &-dot {
-      margin: 0px;
+      margin: scale-px(0px);
       margin-top: $indicator-dot-margin;
 
       &-0 {
-        margin-top: 0px;
+        margin-top: scale-px(0px);
       }
 
       &-active {
@@ -178,7 +178,7 @@
   &-dot {
     &-0 {
       margin-right: $indicator-dot-margin;
-      margin-left: 0px;
+      margin-left: scale-px(0px);
     }
   }
 }
diff --git a/src/packages/infiniteloading/infiniteloading.scss b/src/packages/infiniteloading/infiniteloading.scss
index 024ffcf563..c0d9cb579a 100644
--- a/src/packages/infiniteloading/infiniteloading.scss
+++ b/src/packages/infiniteloading/infiniteloading.scss
@@ -22,7 +22,7 @@
         display: flex;
         justify-content: center;
         align-items: center;
-        margin-bottom: 4px;
+        margin-bottom: scale-px(4px);
       }
     }
   }
@@ -32,7 +32,7 @@
     align-items: center;
     justify-content: center;
     width: 100%;
-    padding-top: 6px;
+    padding-top: scale-px(6px);
     color: $infiniteloading-color;
     text-align: center;
 
@@ -43,7 +43,7 @@
       font-size: $font-size-xxs;
 
       &-icons {
-        margin-right: 8px;
+        margin-right: scale-px(8px);
       }
     }
   }
@@ -62,7 +62,7 @@
     &-tips {
       &-icons {
         margin-right: 0;
-        margin-left: 8px;
+        margin-left: scale-px(8px);
       }
     }
   }
diff --git a/src/packages/input/input.scss b/src/packages/input/input.scss
index 38fcf4928d..12a03b4353 100644
--- a/src/packages/input/input.scss
+++ b/src/packages/input/input.scss
@@ -16,12 +16,12 @@
 
   .nut-icon {
     color: $color-text-disabled;
-    width: 14px;
-    height: 14px;
-    font-size: 14px;
+    width: scale-px(14px);
+    height: scale-px(14px);
+    font-size: scale-px(14px);
   }
   &-container {
-    height: 38px;
+    height: scale-px(38px);
     padding: $input-padding;
     background-color: $input-background-color;
     border-radius: $input-border-radius;
diff --git a/src/packages/inputnumber/inputnumber.scss b/src/packages/inputnumber/inputnumber.scss
index 7fb01dcff9..73e01d4419 100644
--- a/src/packages/inputnumber/inputnumber.scss
+++ b/src/packages/inputnumber/inputnumber.scss
@@ -23,8 +23,8 @@
     height: $inputnumber-button-height;
     background-color: $inputnumber-button-background-color;
     .nut-icon {
-      --nut-icon-width: 10px;
-      --nut-icon-height: 10px;
+      --nut-icon-width: scale-px(10px);
+      --nut-icon-height: scale-px(10px);
     }
   }
 
@@ -66,12 +66,12 @@
   }
 
   &-icon-minus {
-    --nut-icon-width: 16px;
-    --nut-icon-height: 16px;
+    --nut-icon-width: scale-px(16px);
+    --nut-icon-height: scale-px(16px);
   }
 
   &-icon-plus {
-    --nut-icon-width: 16px;
-    --nut-icon-height: 16px;
+    --nut-icon-width: scale-px(16px);
+    --nut-icon-height: scale-px(16px);
   }
 }
diff --git a/src/packages/menuitem/menuitem.scss b/src/packages/menuitem/menuitem.scss
index 6277d7b808..8b50f37834 100644
--- a/src/packages/menuitem/menuitem.scss
+++ b/src/packages/menuitem/menuitem.scss
@@ -74,7 +74,7 @@
 
 .nut-menu-container-down-enter {
   opacity: 0;
-  transform: translate(0, -30px);
+  transform: translate(0, scale-px(-30px));
 }
 
 .nut-menu-container-down-enter-done {
@@ -95,7 +95,7 @@
 
 .nut-menu-container-up-enter {
   opacity: 0;
-  transform: translate(0, 30px);
+  transform: translate(0, scale-px(30px));
 }
 
 .nut-menu-container-up-enter-done {
diff --git a/src/packages/navbar/navbar.scss b/src/packages/navbar/navbar.scss
index c6809f2718..697081fbf0 100644
--- a/src/packages/navbar/navbar.scss
+++ b/src/packages/navbar/navbar.scss
@@ -12,7 +12,7 @@
   font-size: $navbar-font-size;
   color: $navbar-color;
   overflow: hidden;
-  padding: 0 16px;
+  padding: 0 scale-px(16px);
 
   &-fixed {
     position: fixed;
@@ -50,7 +50,7 @@
     color: $navbar-title-font-color;
 
     &-center {
-      max-width: 129px;
+      max-width: scale-px(129px);
       justify-content: center;
     }
   }
@@ -64,31 +64,31 @@
     display: flex;
     align-items: center;
     flex-direction: row;
-    max-width: 124px;
+    max-width: scale-px(124px);
     height: 100%;
     cursor: pointer;
     /* #ifndef harmony jd h5 weapp*/
     .nut-icon,
     .nutui-iconfont {
-      width: 20px;
-      height: 20px;
-      font-size: 20px;
+      width: scale-px(20px);
+      height: scale-px(20px);
+      font-size: scale-px(20px);
     }
 
     /* #endif */
     &-maxwidth {
       box-sizing: border-box;
-      width: calc(124px - 16px);
+      width: calc(scale-px(124px) - scale-px(16px));
     }
   }
 
   &-left {
-    padding-right: 16px;
-    gap: 16px;
+    padding-right: scale-px(16px);
+    gap: scale-px(16px);
 
     &-rtl {
       padding-right: 0;
-      padding-left: 16px;
+      padding-left: scale-px(16px);
     }
 
     &-back {
@@ -96,7 +96,7 @@
       flex-direction: row;
       align-items: center;
       justify-content: center;
-      gap: 16px;
+      gap: scale-px(16px);
     }
 
     &-hidden {
@@ -106,12 +106,12 @@
   }
 
   &-right {
-    padding-left: 16px;
+    padding-left: scale-px(16px);
     justify-content: flex-end;
-    gap: 16px;
+    gap: scale-px(16px);
 
     &-rtl {
-      padding-right: 16px;
+      padding-right: scale-px(16px);
       padding-left: 0;
     }
   }
diff --git a/src/packages/noticebar/noticebar.scss b/src/packages/noticebar/noticebar.scss
index 4c98dc203b..f7e7e78387 100644
--- a/src/packages/noticebar/noticebar.scss
+++ b/src/packages/noticebar/noticebar.scss
@@ -68,8 +68,8 @@
       margin-left: $noticebar-icon-gap;
 
       .nut-icon {
-        width: 12px;
-        height: 12px;
+        width: scale-px(12px);
+        height: scale-px(12px);
         color: $noticebar-color;
       }
     }
diff --git a/src/packages/notify/notify.scss b/src/packages/notify/notify.scss
index 9c7bf6e5a4..1b6c2d7c33 100644
--- a/src/packages/notify/notify.scss
+++ b/src/packages/notify/notify.scss
@@ -43,8 +43,8 @@
 
 .nut-notify {
   position: fixed;
-  left: 8px;
-  right: 8px;
+  left: scale-px(8px);
+  right: scale-px(8px);
   z-index: $notify-z-index;
   display: flex;
   align-items: center;
@@ -84,18 +84,18 @@
   }
 
   &-left-icon {
-    margin-right: 6px;
+    margin-right: scale-px(6px);
     .nut-icon {
-      height: 16px;
-      width: 16px;
+      height: scale-px(16px);
+      width: scale-px(16px);
     }
   }
 
   &-right-icon {
-    margin-left: 6px;
+    margin-left: scale-px(6px);
     .nut-icon {
-      height: 12px;
-      width: 12px;
+      height: scale-px(12px);
+      width: scale-px(12px);
     }
   }
 }
diff --git a/src/packages/numberkeyboard/numberkeyboard.scss b/src/packages/numberkeyboard/numberkeyboard.scss
index 82f922c5bd..c7beaccf57 100644
--- a/src/packages/numberkeyboard/numberkeyboard.scss
+++ b/src/packages/numberkeyboard/numberkeyboard.scss
@@ -41,7 +41,7 @@
 
   &-body {
     display: flex;
-    padding: 6px 0 0 6px;
+    padding: scale-px(6px) 0 0 scale-px(6px);
 
     &-keys {
       display: flex;
@@ -59,7 +59,7 @@
       flex-basis: 33%;
       /* #endif */
       box-sizing: border-box;
-      padding: 0 6px 6px 0;
+      padding: 0 scale-px(6px) scale-px(6px) 0;
       background-color: $numberkeyboard-wrapper-background-color;
 
       .key {
@@ -93,8 +93,8 @@
       .key {
         position: absolute;
         top: 0;
-        right: 6px;
-        bottom: 6px;
+        right: scale-px(6px);
+        bottom: scale-px(6px);
         left: 0;
         height: auto;
       }
@@ -123,9 +123,9 @@
     }
 
     &-body {
-      padding: 6px 6px 0 0;
+      padding: scale-px(6px) scale-px(6px) 0 0;
       &-wrapper {
-        padding: 0 0 6px 6px;
+        padding: 0 0 scale-px(6px) scale-px(6px);
         .delete {
           transform: rotate(-180deg);
         }
@@ -135,7 +135,7 @@
     &-sidebar {
       .nut-numberkeyboard-body-wrapper {
         .key {
-          left: 6px;
+          left: scale-px(6px);
           right: 0;
           &.delete {
             transform: rotate(-180deg);
diff --git a/src/packages/pagination/pagination.scss b/src/packages/pagination/pagination.scss
index 28505fbfd4..92d154dee5 100644
--- a/src/packages/pagination/pagination.scss
+++ b/src/packages/pagination/pagination.scss
@@ -8,8 +8,8 @@
 .nut-pagination-prev,
 .nut-pagination-item,
 .nut-pagination-next {
-  height: 39px;
-  min-width: 39px;
+  height: scale-px(39px);
+  min-width: scale-px(39px);
   flex-shrink: 0;
   box-sizing: border-box;
   display: flex;
@@ -53,9 +53,9 @@
 }
 
 .nut-pagination-simple {
-  height: 39px;
-  width: 124px;
-  line-height: 39px;
+  height: scale-px(39px);
+  width: scale-px(124px);
+  line-height: scale-px(39px);
   text-align: center;
   font-size: $pagination-font-size;
   color: $pagination-color;
diff --git a/src/packages/popover/popover.scss b/src/packages/popover/popover.scss
index f51fdeaa0e..d78fae486d 100644
--- a/src/packages/popover/popover.scss
+++ b/src/packages/popover/popover.scss
@@ -6,8 +6,8 @@
 
   &-arrow {
     position: absolute;
-    width: 8px;
-    height: 4px;
+    width: scale-px(8px);
+    height: scale-px(4px);
 
     .nut-icon-ArrowRadius {
       position: absolute;
@@ -15,15 +15,15 @@
     }
 
     &-top {
-      bottom: -4px;
+      bottom: scale-px(-4px);
     }
 
     &-bottom {
-      top: -4px;
+      top: scale-px(-4px);
     }
 
     &-left {
-      right: -6px;
+      right: scale-px(-6px);
       transform-origin: center top;
 
       &.nut-popover-arrow-left {
@@ -32,15 +32,15 @@
       }
 
       &.nut-popover-arrow-left-top {
-        top: 16px;
-        right: -8px;
+        top: scale-px(16px);
+        right: scale-px(-8px);
         transform: rotate(90deg) translateY(0%);
       }
 
       &.nut-popover-arrow-left-bottom {
         top: auto;
-        bottom: 16px;
-        right: -8px;
+        bottom: scale-px(16px);
+        right: scale-px(-8px);
         transform: rotate(90deg) translateY(0%);
       }
     }
@@ -49,19 +49,19 @@
       transform-origin: center top;
       &.nut-popover-arrow-right {
         top: 50%;
-        left: -6px;
+        left: scale-px(-6px);
         transform: rotate(-90deg) translateY(-50%);
       }
 
       &.nut-popover-arrow-right-top {
-        top: 16px;
-        left: -8px;
+        top: scale-px(16px);
+        left: scale-px(-8px);
         transform: rotate(-90deg) translateY(0%);
       }
 
       &.nut-popover-arrow-right-bottom {
-        bottom: 16px;
-        left: -8px;
+        bottom: scale-px(16px);
+        left: scale-px(-8px);
         transform: rotate(-90deg) translateY(0%);
       }
     }
@@ -73,7 +73,7 @@
     border-radius: $popover-border-radius;
     font-size: $popover-font-size;
     color: $popover-text-color;
-    line-height: 28px;
+    line-height: scale-px(28px);
     /* #ifndef dynamic*/
     max-height: initial;
     overflow-y: initial;
@@ -87,12 +87,12 @@
       display: flex;
       align-items: center;
       justify-content: center;
-      border-bottom: 1px solid $popover-divider-color;
+      border-bottom: scale-px(1px) solid $popover-divider-color;
       max-width: $popover-item-width;
       word-wrap: break-word;
 
       &:last-child {
-        margin-bottom: 0px;
+        margin-bottom: scale-px(0px);
         border-bottom: none;
       }
 
@@ -116,7 +116,7 @@
       }
 
       &-name {
-        width: calc(100% - 34px);
+        width: calc(100% - scale-px(34px));
         word-break: keep-all;
         flex: 1;
       }
@@ -147,8 +147,8 @@
     &-top-right {
       right: 0;
       .nut-popover-arrow-top-right {
-        right: 16px;
-        bottom: -3.5px;
+        right: scale-px(16px);
+        bottom: scale-px(-3.5px);
         transform: rotate(180deg) translateX(0%);
       }
     }
@@ -156,8 +156,8 @@
     &-top-left {
       left: 0;
       .nut-popover-arrow-top-left {
-        left: 16px;
-        bottom: -3.5px;
+        left: scale-px(16px);
+        bottom: scale-px(-3.5px);
         transform: rotate(180deg) translateX(0%);
       }
     }
@@ -172,7 +172,7 @@
     &-bottom-right {
       right: 0;
       .nut-popover-arrow-bottom-right {
-        right: 16px;
+        right: scale-px(16px);
         transform: translateX(0%);
       }
     }
@@ -180,7 +180,7 @@
     &-bottom-left {
       left: 0;
       .nut-popover-arrow-bottom-left {
-        left: 16px;
+        left: scale-px(16px);
         transform: translateX(0%);
       }
     }
@@ -230,7 +230,7 @@
     .nut-popover-item {
       &-name {
         margin-left: 0;
-        margin-right: 4px;
+        margin-right: scale-px(4px);
       }
 
       &-action-icon {
@@ -250,7 +250,7 @@
 
       .nut-popover-arrow-top-right {
         right: auto;
-        left: 16px;
+        left: scale-px(16px);
       }
     }
 
@@ -260,7 +260,7 @@
 
       .nut-popover-arrow-top-left {
         left: auto;
-        right: 16px;
+        right: scale-px(16px);
       }
     }
 
@@ -278,7 +278,7 @@
 
       .nut-popover-arrow-bottom-right {
         right: auto;
-        left: 16px;
+        left: scale-px(16px);
       }
     }
 
@@ -288,7 +288,7 @@
 
       .nut-popover-arrow-bottom-left {
         left: auto;
-        right: 16px;
+        right: scale-px(16px);
       }
     }
   }
@@ -331,5 +331,5 @@
 // Taro
 .nut-popover-content-copy {
   position: absolute;
-  top: -99999px;
+  top: scale-px(-99999px);
 }
diff --git a/src/packages/popup/popup.scss b/src/packages/popup/popup.scss
index 14d1a492e8..b330620228 100644
--- a/src/packages/popup/popup.scss
+++ b/src/packages/popup/popup.scss
@@ -82,7 +82,7 @@
     top: 50%;
     left: 50%;
     min-height: 10%;
-    max-width: 295px;
+    max-width: scale-px(295px);
     transform: translate(-50%, -50%);
 
     &.nut-popup-round {
@@ -107,7 +107,7 @@
   &-right {
     top: 0;
     right: 0;
-    width: 100px;
+    width: scale-px(100px);
     height: 100%;
 
     &.nut-popup-round {
@@ -118,7 +118,7 @@
   &-left {
     top: 0;
     left: 0;
-    width: 100px;
+    width: scale-px(100px);
     height: 100%;
 
     &.nut-popup-round {
diff --git a/src/packages/progress/progress.scss b/src/packages/progress/progress.scss
index 9b7a7685e3..5b95515a79 100644
--- a/src/packages/progress/progress.scss
+++ b/src/packages/progress/progress.scss
@@ -35,7 +35,7 @@
     display: flex;
     align-items: center;
     transition: all 0.4s;
-    margin-left: 12px;
+    margin-left: scale-px(12px);
     color: $color-text-help;
     font-family: PingFang SC;
     font-size: $progress-text-font-size;
diff --git a/src/packages/pulltorefresh/pulltorefresh.scss b/src/packages/pulltorefresh/pulltorefresh.scss
index 7a16567fcb..20ac535dd0 100644
--- a/src/packages/pulltorefresh/pulltorefresh.scss
+++ b/src/packages/pulltorefresh/pulltorefresh.scss
@@ -2,7 +2,7 @@
   &-head {
     overflow: hidden;
     position: relative;
-    font-size: 12px;
+    font-size: scale-px(12px);
 
     &-content {
       position: absolute;
@@ -18,7 +18,7 @@
       &-icons {
         width: $pulltorefresh-icon-width;
         height: $pulltorefresh-icon-height;
-        margin-bottom: 4px;
+        margin-bottom: scale-px(4px);
       }
     }
   }
diff --git a/src/packages/radio/radio.scss b/src/packages/radio/radio.scss
index ff879e9cc4..074e6812b2 100644
--- a/src/packages/radio/radio.scss
+++ b/src/packages/radio/radio.scss
@@ -37,7 +37,8 @@
     &-checked {
       color: $color-primary;
       background-color: $white;
-      box-shadow: 0px 2px 4px 0px #ff0f2333;
+      box-shadow: scale-px(0px) scale-px(2px) scale-px(4px) scale-px(0px)
+        #ff0f2333;
       border-radius: 50%;
 
       &.nut-radio-icon-disabled {
@@ -61,14 +62,14 @@
     display: inline-flex;
     /* #endif */
     align-items: center;
-    min-height: 30px;
+    min-height: scale-px(30px);
     padding: $radio-button-padding;
     font-size: $radio-button-font-size;
     background: $radio-button-background;
     border-radius: $radio-button-border-radius;
     color: $radio-label-color;
     box-sizing: border-box;
-    border: 1px solid $radio-button-background;
+    border: scale-px(1px) solid $radio-button-background;
 
     &-active {
       background: $color-primary-light-pressed;
@@ -78,14 +79,14 @@
 
     &-disabled {
       color: $color-text-disabled;
-      border: 1px solid $radio-button-background;
+      border: scale-px(1px) solid $radio-button-background;
     }
   }
 
   .nut-radio-button-active.nut-radio-button-disabled {
     background: $color-text-disabled;
     color: $white;
-    border: 1px solid $color-text-disabled;
+    border: scale-px(1px) solid $color-text-disabled;
   }
 }
 
diff --git a/src/packages/radiogroup/radiogroup.scss b/src/packages/radiogroup/radiogroup.scss
index 661a6e775e..7b89fbd7e3 100644
--- a/src/packages/radiogroup/radiogroup.scss
+++ b/src/packages/radiogroup/radiogroup.scss
@@ -23,7 +23,7 @@
       }
 
       &-button {
-        border: 1px solid $radio-button-background;
+        border: scale-px(1px) solid $radio-button-background;
       }
 
       &-button-active {
@@ -38,7 +38,7 @@
 
     .nut-radio {
       &-button {
-        border: 1px solid $white;
+        border: scale-px(1px) solid $white;
       }
 
       &-button-active {
@@ -55,7 +55,7 @@
   .nut-radio-button-active.nut-radio-button-disabled {
     background: $color-text-disabled;
     color: $white;
-    border: 1px solid $color-text-disabled;
+    border: scale-px(1px) solid $color-text-disabled;
   }
 }
 
diff --git a/src/packages/range/range.scss b/src/packages/range/range.scss
index cd9f42dcc9..06acbf9ecb 100644
--- a/src/packages/range/range.scss
+++ b/src/packages/range/range.scss
@@ -19,13 +19,13 @@
   height: $range-height;
   margin: 0 $range-margin;
   background-color: $range-inactive-color;
-  border-radius: 2px;
+  border-radius: scale-px(2px);
   flex: 1;
   cursor: pointer;
 
   &::before {
     position: absolute;
-    inset-block: -8px;
+    inset-block: scale-px(-8px);
     inset-inline: 0;
     content: '';
   }
@@ -45,7 +45,7 @@
     max-width: 100%;
     max-height: 100%;
     background: $range-active-color;
-    border-radius: 2px;
+    border-radius: scale-px(2px);
 
     &-animate {
       transition: all 0.2s;
@@ -59,7 +59,8 @@
     height: $range-button-height;
     background: $range-button-background;
     border-radius: 50%;
-    box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.15);
+    box-shadow: scale-px(0px) scale-px(1px) scale-px(2px) scale-px(0px)
+      rgba(0, 0, 0, 0.15);
     border: $range-button-border;
     outline: none;
     align-items: center;
@@ -98,9 +99,9 @@
     &-number {
       position: relative;
       width: 200%;
-      height: 24px;
-      line-height: 14px;
-      padding: 5px 0;
+      height: scale-px(24px);
+      line-height: scale-px(14px);
+      padding: scale-px(5px) 0;
       left: 50%;
       display: flex;
       align-items: center;
@@ -130,7 +131,7 @@
   &-mark {
     position: absolute;
     width: 100%;
-    height: 14px;
+    height: scale-px(14px);
     overflow: visible;
     top: 50%;
   }
@@ -138,15 +139,15 @@
   &-mark-text-wrapper {
     position: absolute;
     height: 100%;
-    top: 14px;
+    top: scale-px(14px);
     display: inline-block;
-    transform: translateX(-10px);
+    transform: translateX(scale-px(-10px));
   }
 
   &-mark-text {
     position: absolute;
-    line-height: 16px;
-    font-size: 12px;
+    line-height: scale-px(16px);
+    font-size: scale-px(12px);
     color: #999;
     text-align: center;
     word-break: keep-all;
@@ -155,11 +156,11 @@
 
   &-tick {
     position: absolute;
-    top: -20px;
-    width: 11px;
-    height: 11px;
-    left: 0px;
-    border-radius: 6px;
+    top: scale-px(-20px);
+    width: scale-px(11px);
+    height: scale-px(11px);
+    left: scale-px(0px);
+    border-radius: scale-px(6px);
     background: $range-inactive-color;
 
     &-active {
@@ -171,12 +172,12 @@
 .nut-range-vertical-container {
   height: 100%;
   flex-direction: column;
-  padding: 0px 15px;
+  padding: scale-px(0px) scale-px(15px);
 }
 
 .nut-range-vertical {
   width: $range-height;
-  margin: $range-margin 0px;
+  margin: $range-margin scale-px(0px);
 
   &-button {
     &-wrapper,
@@ -192,7 +193,7 @@
     }
 
     &-wrapper-left {
-      top: 0px;
+      top: scale-px(0px);
       left: 50%;
       /* #ifndef dynamic*/
       right: initial;
@@ -201,7 +202,7 @@
     }
 
     &-number {
-      left: 0px;
+      left: scale-px(0px);
       top: 50%;
       // transform: translate3d(100%, 0, 0);
     }
@@ -209,31 +210,31 @@
 
   &-mark {
     position: absolute;
-    width: 36px;
+    width: scale-px(36px);
     height: 100%;
-    top: 0px;
+    top: scale-px(0px);
     right: 50%;
     overflow: visible;
-    font-size: 12px;
-    padding: 0px;
+    font-size: scale-px(12px);
+    padding: scale-px(0px);
   }
 
   &-mark-hm {
-    left: -34px;
+    left: scale-px(-34px);
   }
 
   &-mark-text-wrapper {
-    // width: 20px;
-    height: 16px;
+    // width: scale-px(20px);
+    height: scale-px(16px);
     position: absolute;
     display: inline-block;
     user-select: none;
-    transform: translateY(-11px);
+    transform: translateY(scale-px(-11px));
   }
 
   &-mark-text {
     height: 100%;
-    line-height: 16px;
+    line-height: scale-px(16px);
     color: #999;
     text-align: center;
     word-break: keep-all;
@@ -241,11 +242,11 @@
 
   &-tick {
     position: absolute;
-    top: 2px;
-    left: 31px;
-    width: 10px;
-    height: 10px;
-    border-radius: 5px;
+    top: scale-px(2px);
+    left: scale-px(31px);
+    width: scale-px(10px);
+    height: scale-px(10px);
+    border-radius: scale-px(5px);
     background: $range-inactive-color;
 
     &-active {
@@ -275,14 +276,14 @@
   }
 
   &-tick {
-    right: 0px;
+    right: scale-px(0px);
     /* #ifndef dynamic*/
     left: initial;
     /* #endif */
   }
 
   &-mark-text {
-    transform: translateX(10px);
+    transform: translateX(scale-px(10px));
   }
 
   &-vertical {
@@ -316,13 +317,13 @@
 
     &-tick {
       left: auto;
-      right: 30px;
+      right: scale-px(30px);
       margin-left: 0;
-      margin-right: -0px;
+      margin-right: scale-px(-0px);
     }
 
     &-mark-text-wrapper {
-      transform: translateY(-11px);
+      transform: translateY(scale-px(-11px));
     }
   }
 }
diff --git a/src/packages/rate/rate.scss b/src/packages/rate/rate.scss
index 7737e20d80..1350254770 100644
--- a/src/packages/rate/rate.scss
+++ b/src/packages/rate/rate.scss
@@ -44,16 +44,16 @@
     &-large {
       margin-left: calc($rate-item-margin * 2);
       .nut-icon {
-        height: calc($rate-icon-size + 8px);
-        width: calc($rate-icon-size + 8px);
+        height: calc($rate-icon-size + scale-px(8px));
+        width: calc($rate-icon-size + scale-px(8px));
       }
     }
 
     &-small {
       margin-left: calc($rate-item-margin / 2);
       .nut-icon {
-        height: calc($rate-icon-size - 4px);
-        width: calc($rate-icon-size - 4px);
+        height: calc($rate-icon-size - scale-px(4px));
+        width: calc($rate-icon-size - scale-px(4px));
       }
     }
 
@@ -114,12 +114,12 @@
     }
 
     &-large {
-      font-size: calc($rate-font-size + 6px);
+      font-size: calc($rate-font-size + scale-px(6px));
       padding-left: calc($rate-item-margin * 2);
     }
 
     &-small {
-      font-size: calc($rate-font-size - 2px);
+      font-size: calc($rate-font-size - scale-px(2px));
       padding-left: calc($rate-item-margin / 2);
     }
 
@@ -146,7 +146,7 @@
     }
 
     &-small {
-      margin-right: calc($rate-item-margin - 2px);
+      margin-right: calc($rate-item-margin - scale-px(2px));
     }
 
     &:last-child {
@@ -183,7 +183,7 @@
     }
 
     &-small {
-      padding-right: calc($rate-item-margin - 2px);
+      padding-right: calc($rate-item-margin - scale-px(2px));
     }
   }
 }
diff --git a/src/packages/resultpage/resultpage.scss b/src/packages/resultpage/resultpage.scss
index 6842c0b134..5961b50466 100644
--- a/src/packages/resultpage/resultpage.scss
+++ b/src/packages/resultpage/resultpage.scss
@@ -46,7 +46,7 @@
     }
   }
   &-action {
-    margin-left: 6px;
-    margin-right: 6px;
+    margin-left: scale-px(6px);
+    margin-right: scale-px(6px);
   }
 }
diff --git a/src/packages/searchbar/searchbar.scss b/src/packages/searchbar/searchbar.scss
index cb7fe1286b..3c25023da0 100644
--- a/src/packages/searchbar/searchbar.scss
+++ b/src/packages/searchbar/searchbar.scss
@@ -25,7 +25,7 @@
     height: $searchbar-input-height;
     background: $searchbar-content-background;
     border-radius: $searchbar-content-border-radius;
-    border: 1px solid $color-primary;
+    border: scale-px(1px) solid $color-primary;
   }
 
   &-icon {
@@ -40,7 +40,7 @@
   }
 
   &-rightin {
-    font-size: 15px;
+    font-size: scale-px(15px);
     font-weight: 500;
     color: $color-primary;
 
@@ -74,8 +74,8 @@
     &.nut-searchbar-icon {
       position: relative;
       .nut-icon {
-        width: 12px;
-        height: 12px;
+        width: scale-px(12px);
+        height: scale-px(12px);
         color: var(--nutui-black-5);
         margin-right: $searchbar-inner-gap;
       }
@@ -95,27 +95,27 @@
     flex-direction: row;
     z-index: 2;
     background-color: #fff;
-    top: 9px;
-    left: 6px;
-    font-size: 12px;
-    line-height: 12px;
+    top: scale-px(9px);
+    left: scale-px(6px);
+    font-size: scale-px(12px);
+    line-height: scale-px(12px);
 
     .nut-searchbar-value {
       display: flex;
       flex-direction: row;
       align-items: center;
-      padding: 4px 8px;
+      padding: scale-px(4px) scale-px(8px);
       background-color: #f7f8fc;
-      border-radius: 4px;
-      margin-right: 2px;
+      border-radius: scale-px(4px);
+      margin-right: scale-px(2px);
     }
 
     .nut-icon {
-      width: 6px;
-      height: 6px;
-      font-size: 6px;
+      width: scale-px(6px);
+      height: scale-px(6px);
+      font-size: scale-px(6px);
       color: #c2c4cc;
-      margin-left: 4px;
+      margin-left: scale-px(4px);
     }
   }
 
@@ -130,8 +130,8 @@
     align-items: center;
 
     &.nut-icon {
-      width: 20px;
-      height: 20px;
+      width: scale-px(20px);
+      height: scale-px(20px);
     }
   }
 
@@ -193,10 +193,10 @@
   }
 
   &-focus {
-    padding: 5px $searchbar-gap;
+    padding: scale-px(5px) $searchbar-gap;
 
     .nut-searchbar-content {
-      border: 0.5px solid #ff5c67;
+      border: scale-px(0.5px) solid #ff5c67;
     }
   }
 }
diff --git a/src/packages/segmented/segmented.scss b/src/packages/segmented/segmented.scss
index b5be3bb3a7..7cd0cc192d 100644
--- a/src/packages/segmented/segmented.scss
+++ b/src/packages/segmented/segmented.scss
@@ -6,7 +6,7 @@
   display: inline-flex;
   /* #endif */
   height: $segmented-height;
-  min-width: 24px;
+  min-width: scale-px(24px);
   padding: $segmented-padding;
   align-items: center;
   border-radius: $segmented-border-radius;
@@ -32,12 +32,12 @@
 }
 
 .nut-segmented-icon {
-  height: 10px;
-  width: 10px;
+  height: scale-px(10px);
+  width: scale-px(10px);
   margin-right: $segmented-icon-margin-right;
   .nut-icon {
-    height: 10px;
-    width: 10px;
-    font-size: 10px;
+    height: scale-px(10px);
+    width: scale-px(10px);
+    font-size: scale-px(10px);
   }
 }
diff --git a/src/packages/shortpassword/shortpassword.scss b/src/packages/shortpassword/shortpassword.scss
index c2cbeb997d..75820fd35f 100644
--- a/src/packages/shortpassword/shortpassword.scss
+++ b/src/packages/shortpassword/shortpassword.scss
@@ -2,8 +2,8 @@
 
 .nut-shortpassword {
   &-popup {
-    padding: 32px 24px 28px 24px;
-    border-radius: 12px;
+    padding: scale-px(32px) scale-px(24px) scale-px(28px) scale-px(24px);
+    border-radius: scale-px(12px);
     text-align: center;
   }
 
@@ -18,15 +18,15 @@
   &-description {
     display: flex;
     justify-content: center;
-    margin-top: 12px;
-    margin-bottom: 24px;
+    margin-top: scale-px(12px);
+    margin-bottom: scale-px(24px);
     line-height: 1;
     font-size: $font-size-s;
     color: $color-text;
   }
 
   &-input {
-    padding: 0 0 10px;
+    padding: 0 0 scale-px(10px);
     text-align: center;
     position: relative;
     overflow: hidden;
@@ -34,8 +34,8 @@
     &-real {
       position: absolute;
       right: 0;
-      width: 247px;
-      height: 41px;
+      width: scale-px(247px);
+      height: scale-px(41px);
       outline: 0 none;
       border: 0;
       text-decoration: none;
@@ -43,20 +43,20 @@
     }
 
     &-site {
-      width: 247px;
-      height: 41px;
-      border-radius: 4px;
+      width: scale-px(247px);
+      height: scale-px(41px);
+      border-radius: scale-px(4px);
     }
 
     &-fake {
       top: 5%;
       width: 100%;
-      height: 41px;
+      height: scale-px(41px);
       margin: 0 auto;
       box-sizing: border-box;
       background: $shortpassword-background-color;
-      border-radius: 4px;
-      border: 1px solid $shortpassword-border-color;
+      border-radius: scale-px(4px);
+      border: scale-px(1px) solid $shortpassword-border-color;
       display: flex;
       position: absolute;
       left: 0;
@@ -68,8 +68,8 @@
         align-items: center;
 
         &-icon {
-          height: 6px;
-          width: 6px;
+          height: scale-px(6px);
+          width: scale-px(6px);
           border-radius: 50%;
           background: #000;
           display: inline-block;
@@ -79,10 +79,10 @@
   }
 
   &-message {
-    margin-top: 9px;
+    margin-top: scale-px(9px);
     display: flex;
     justify-content: space-between;
-    width: 247px;
+    width: scale-px(247px);
 
     &-error {
       line-height: 1;
@@ -98,7 +98,7 @@
       align-items: center;
 
       .nut-icon {
-        margin-right: 3px;
+        margin-right: scale-px(3px);
       }
     }
   }
@@ -106,13 +106,13 @@
   &-footer {
     display: flex;
     justify-content: space-between;
-    margin-top: 20px;
+    margin-top: scale-px(20px);
 
     &-cancel {
       background: $white;
-      border: 1px solid $color-primary;
-      border-radius: 15px;
-      padding: 8px 38px;
+      border: scale-px(1px) solid $color-primary;
+      border-radius: scale-px(15px);
+      padding: scale-px(8px) scale-px(38px);
       line-height: 1;
       font-size: $font-size-base;
       color: $color-primary;
@@ -124,8 +124,8 @@
         $color-primary 0%,
         $color-primary-stop-2 100%
       );
-      border-radius: 15px;
-      padding: 8px 38px;
+      border-radius: scale-px(15px);
+      padding: scale-px(8px) scale-px(38px);
       line-height: 1;
       font-size: $font-size-base;
       color: $color-primary-text;
diff --git a/src/packages/skeleton/skeleton.scss b/src/packages/skeleton/skeleton.scss
index d0d5c6956d..096ad44eea 100644
--- a/src/packages/skeleton/skeleton.scss
+++ b/src/packages/skeleton/skeleton.scss
@@ -1,6 +1,6 @@
 .nut-skeleton {
-  line-height: 0px;
-  font-size: 0px;
+  line-height: scale-px(0px);
+  font-size: scale-px(0px);
 
   &-content {
     position: relative;
@@ -25,7 +25,7 @@
 
     &-small {
       height: $skeleton-line-small-height;
-      margin-top: 8px;
+      margin-top: scale-px(8px);
     }
     &-small-0 {
       margin-top: 0;
diff --git a/src/packages/step/step.scss b/src/packages/step/step.scss
index df168de948..f46ec86438 100644
--- a/src/packages/step/step.scss
+++ b/src/packages/step/step.scss
@@ -86,8 +86,8 @@
   }
 
   &-title {
-    height: 14px;
-    line-height: 14px;
+    height: scale-px(14px);
+    line-height: scale-px(14px);
     font-size: $steps-base-title-font-size;
     color: $steps-base-title-color;
     overflow: hidden;
@@ -95,8 +95,8 @@
   }
 
   &-description {
-    height: 16px;
-    line-height: 16px;
+    height: scale-px(16px);
+    line-height: scale-px(16px);
     margin-top: $steps-base-description-margin-top;
     font-size: $steps-base-description-font-size;
     color: $steps-base-description-color;
diff --git a/src/packages/steps/steps.scss b/src/packages/steps/steps.scss
index 993c6a878c..1bc6fb7e29 100644
--- a/src/packages/steps/steps.scss
+++ b/src/packages/steps/steps.scss
@@ -13,8 +13,8 @@
 
         &-icon {
           .nut-icon {
-            height: 10px;
-            width: 10px;
+            height: scale-px(10px);
+            width: scale-px(10px);
           }
 
           .nut-image {
@@ -74,7 +74,7 @@
 
         &-title,
         &-description {
-          padding-left: 4px;
+          padding-left: scale-px(4px);
         }
 
         &-special {
@@ -85,7 +85,7 @@
           }
 
           .nut-step-title {
-            padding-right: 8px;
+            padding-right: scale-px(8px);
             /* #ifndef dynamic*/
             width: fit-content;
             /* #endif */
@@ -130,7 +130,7 @@
 
         &-head {
           justify-content: center;
-          margin-bottom: 6px;
+          margin-bottom: scale-px(6px);
 
           &-dot-wrap,
           &-icon-wrap,
@@ -145,15 +145,15 @@
           width: $steps-double-head-icon-size;
 
           .nut-icon {
-            height: 12px;
-            width: 12px;
+            height: scale-px(12px);
+            width: scale-px(12px);
           }
         }
 
         &-main {
           align-items: center;
           margin-left: 0;
-          margin-top: 2px;
+          margin-top: scale-px(2px);
         }
       }
 
@@ -202,8 +202,8 @@
       }
 
       &-line {
-        height: calc(100% - 4px);
-        width: 1px;
+        height: calc(100% - scale-px(4px));
+        width: scale-px(1px);
         bottom: 0;
 
         &-inner {
@@ -214,15 +214,15 @@
       &-head {
         align-items: center;
         justify-content: center;
-        height: 18px;
+        height: scale-px(18px);
 
         &-icon {
           width: $steps-vertical-head-icon-size;
           height: $steps-vertical-head-icon-size;
 
           .nut-icon {
-            height: 12px;
-            width: 12px;
+            height: scale-px(12px);
+            width: scale-px(12px);
           }
         }
       }
@@ -231,7 +231,7 @@
         flex: 1;
         min-width: 0;
         height: auto;
-        margin-left: 8px;
+        margin-left: scale-px(8px);
       }
 
       &-title {
@@ -268,23 +268,23 @@
       }
 
       &-head-dot-wrap {
-        height: calc($steps-base-head-dot-size + 8px);
+        height: calc($steps-base-head-dot-size + scale-px(8px));
       }
 
       &-head-icon-wrap {
-        height: calc($steps-vertical-head-icon-size + 8px);
+        height: calc($steps-vertical-head-icon-size + scale-px(8px));
       }
 
       &-head-text-wrap {
-        height: calc($steps-base-head-text-size + 8px);
+        height: calc($steps-base-head-text-size + scale-px(8px));
       }
     }
 
     &-icon {
       .nut-step {
         &-head {
-          width: calc($steps-vertical-head-icon-size + 1px);
-          min-width: calc($steps-vertical-head-icon-size + 1px);
+          width: calc($steps-vertical-head-icon-size + scale-px(1px));
+          min-width: calc($steps-vertical-head-icon-size + scale-px(1px));
         }
 
         &-line {
@@ -296,7 +296,7 @@
     &-dot {
       .nut-step {
         &-head {
-          width: calc($steps-base-head-dot-size + 1px);
+          width: calc($steps-base-head-dot-size + scale-px(1px));
         }
 
         &-line {
@@ -308,8 +308,8 @@
     &-text {
       .nut-step {
         &-head {
-          width: calc($steps-base-head-text-size + 1px);
-          min-width: calc($steps-base-head-text-size + 1px);
+          width: calc($steps-base-head-text-size + scale-px(1px));
+          min-width: calc($steps-base-head-text-size + scale-px(1px));
         }
 
         &-line {
diff --git a/src/packages/swipe/swipe.scss b/src/packages/swipe/swipe.scss
index 7e4c86211c..58ca3143b9 100644
--- a/src/packages/swipe/swipe.scss
+++ b/src/packages/swipe/swipe.scss
@@ -27,12 +27,12 @@
 
   &-left {
     left: 0;
-    transform: translate(-100%, 0px);
+    transform: translate(-100%, scale-px(0px));
   }
 
   &-right {
     //left: 100%;
-    right: 0px;
-    transform: translate(100%, 0px);
+    right: scale-px(0px);
+    transform: translate(100%, scale-px(0px));
   }
 }
diff --git a/src/packages/swiper/swiper.scss b/src/packages/swiper/swiper.scss
index 67223cacbf..8c9318d3eb 100644
--- a/src/packages/swiper/swiper.scss
+++ b/src/packages/swiper/swiper.scss
@@ -19,17 +19,17 @@
     flex-direction: row;
     justify-content: center;
     position: absolute;
-    height: 4px;
+    height: scale-px(4px);
     width: 100%;
     top: 89.33%;
     z-index: 10;
   }
 
   &-indicator-vertical {
-    width: 8px;
+    width: scale-px(8px);
     height: 100%;
     top: 0;
-    left: 12px;
+    left: scale-px(12px);
     flex-direction: column;
     justify-content: center;
     z-index: 1;
@@ -68,6 +68,6 @@
 
   &-indicator-vertical {
     left: auto;
-    right: 12px;
+    right: scale-px(12px);
   }
 }
diff --git a/src/packages/switch/switch.scss b/src/packages/switch/switch.scss
index 089f6688ca..be66d0cfad 100644
--- a/src/packages/switch/switch.scss
+++ b/src/packages/switch/switch.scss
@@ -56,9 +56,9 @@
     background-color: $switch-inactive-background-color;
     &-line {
       width: calc(($switch-height - $switch-border-width * 2) / 2);
-      height: 2px;
+      height: scale-px(2px);
       background: $switch-inactive-line-background-color;
-      border-radius: 2px;
+      border-radius: scale-px(2px);
     }
   }
 
@@ -78,16 +78,20 @@
       color: $switch-label-text-color;
     }
     &-open {
-      margin: 0 calc($switch-height - $switch-border-width + 3px) 0 7px;
+      margin: 0 calc($switch-height - $switch-border-width + scale-px(3px)) 0
+        scale-px(7px);
       &-rtl {
-        margin: 0 7px 0 calc($switch-height - $switch-border-width + 3px);
+        margin: 0 scale-px(7px) 0
+          calc($switch-height - $switch-border-width + scale-px(3px));
       }
     }
 
     &-close {
-      margin: 0 7px 0 calc($switch-height - $switch-border-width + 3px);
+      margin: 0 scale-px(7px) 0
+        calc($switch-height - $switch-border-width + scale-px(3px));
       &-rtl {
-        margin: 0 calc($switch-height - $switch-border-width + 3px) 0 7px;
+        margin: 0 calc($switch-height - $switch-border-width + scale-px(3px)) 0
+          scale-px(7px);
       }
     }
 
diff --git a/src/packages/tabbar/tabbar.scss b/src/packages/tabbar/tabbar.scss
index aed7942448..610fa5f874 100644
--- a/src/packages/tabbar/tabbar.scss
+++ b/src/packages/tabbar/tabbar.scss
@@ -1,7 +1,7 @@
 @import '../tabbaritem/tabbaritem.scss';
 
 .nut-tabbar {
-  border: 0px;
+  border: scale-px(0px);
   box-shadow: $tabbar-box-shadow;
   border-bottom: $tabbar-border-bottom;
   border-top: $tabbar-border-top;
@@ -13,11 +13,11 @@
     display: flex;
 
     &-3 {
-      padding: 0 16px;
+      padding: 0 scale-px(16px);
     }
 
     &-2 {
-      padding: 0 32px;
+      padding: 0 scale-px(32px);
     }
 
     &-horizontal {
@@ -26,12 +26,12 @@
         flex-direction: row;
         justify-content: center;
         .nut-icon {
-          width: 20px;
-          height: 20px;
+          width: scale-px(20px);
+          height: scale-px(20px);
         }
         .nut-tabbar-item-text {
-          margin: 0 4px 0 6px;
-          font-size: 14px;
+          margin: 0 scale-px(4px) 0 scale-px(6px);
+          font-size: scale-px(14px);
         }
         .nut-badge-sup {
           &::after {
@@ -44,8 +44,8 @@
 
   &-fixed {
     position: fixed;
-    bottom: 0px;
-    left: 0px;
+    bottom: scale-px(0px);
+    left: scale-px(0px);
   }
 }
 
@@ -58,6 +58,6 @@
 
   &-fixed {
     left: auto;
-    right: 0px;
+    right: scale-px(0px);
   }
 }
diff --git a/src/packages/tabbaritem/tabbaritem.scss b/src/packages/tabbaritem/tabbaritem.scss
index 74a2c6028d..7db36733da 100644
--- a/src/packages/tabbaritem/tabbaritem.scss
+++ b/src/packages/tabbaritem/tabbaritem.scss
@@ -5,14 +5,14 @@
   flex-direction: column;
   align-items: center;
   flex: 1;
-  padding: 6px 0 2px;
+  padding: scale-px(6px) 0 scale-px(2px);
   color: $tabbar-inactive-color;
   height: 100%;
 
   .nut-icon {
-    width: 24px;
-    height: 24px;
-    font-size: 24px;
+    width: scale-px(24px);
+    height: scale-px(24px);
+    font-size: scale-px(24px);
     /* #ifdef harmony dynamic*/
     color: $tabbar-inactive-color;
     /* #endif*/
@@ -31,9 +31,9 @@
 
   .nut-image {
     &-default {
-      width: 38px;
-      height: 38px;
-      border-radius: 38px;
+      width: scale-px(38px);
+      height: scale-px(38px);
+      border-radius: scale-px(38px);
     }
   }
 
diff --git a/src/packages/table/table.scss b/src/packages/table/table.scss
index 5391b1a82a..4bcb8ffeb9 100644
--- a/src/packages/table/table.scss
+++ b/src/packages/table/table.scss
@@ -12,7 +12,7 @@
     overflow-y: auto;
     overflow-x: hidden;
     position: relative;
-    border: 1px solid $table-border-color;
+    border: scale-px(1px) solid $table-border-color;
 
     &-sticky {
       overflow-x: auto;
@@ -101,15 +101,15 @@
 
           &-nodata {
             display: flex;
-            height: 50px;
+            height: scale-px(50px);
             align-items: center;
             justify-content: center;
           }
         }
 
         &-border {
-          border-right: 1px solid $table-border-color;
-          border-bottom: 1px solid $table-border-color;
+          border-right: scale-px(1px) solid $table-border-color;
+          border-bottom: scale-px(1px) solid $table-border-color;
         }
 
         &-alignleft,
@@ -143,9 +143,9 @@
   &-sticky-left,
   &-sticky-right {
     position: absolute;
-    top: 0px;
-    width: 8px;
-    bottom: -1px;
+    top: scale-px(0px);
+    width: scale-px(8px);
+    bottom: scale-px(-1px);
     overflow-x: hidden;
     overflow-y: hidden;
     box-shadow: none;
@@ -156,12 +156,12 @@
   }
 
   &-sticky-left {
-    left: 1px;
+    left: scale-px(1px);
     box-shadow: $table-sticky-left-shadow;
   }
 
   &-sticky-right {
-    right: 1px;
+    right: scale-px(1px);
     box-shadow: $table-sticky-right-shadow;
   }
 
@@ -186,7 +186,7 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    height: 30px;
+    height: scale-px(30px);
     padding: $table-cols-padding;
     position: relative;
     z-index: 5;
@@ -215,7 +215,7 @@
 
         &-border {
           border-right: none;
-          border-left: 1px solid $table-border-color;
+          border-left: scale-px(1px) solid $table-border-color;
         }
 
         &-alignleft,
@@ -232,13 +232,13 @@
 
   &-sticky-left {
     left: auto;
-    right: 1px;
+    right: scale-px(1px);
     box-shadow: $table-sticky-right-shadow;
   }
 
   &-sticky-right {
     right: auto;
-    left: 1px;
+    left: scale-px(1px);
     box-shadow: $table-sticky-left-shadow;
   }
   &-fixed-left-last {
diff --git a/src/packages/tabs/tabs.scss b/src/packages/tabs/tabs.scss
index 82ca0a560b..209c4cfff1 100644
--- a/src/packages/tabs/tabs.scss
+++ b/src/packages/tabs/tabs.scss
@@ -34,14 +34,14 @@
   &-left {
     justify-content: flex-start;
     .nut-tabs-titles-item {
-      padding: 0 22px;
+      padding: 0 scale-px(22px);
     }
   }
 
   &-right {
     justify-content: flex-end;
     .nut-tabs-titles-item {
-      padding: 0 22px;
+      padding: 0 scale-px(22px);
     }
   }
 
@@ -93,7 +93,7 @@
 
       .nut-icon {
         position: absolute;
-        font-size: 20px;
+        font-size: scale-px(20px);
         width: 100%;
         height: 100%;
       }
@@ -123,8 +123,8 @@
         /* #ifndef dynamic*/
         overflow: unset;
         /* #endif */
-        width: 40px;
-        height: 20px;
+        width: scale-px(40px);
+        height: scale-px(20px);
 
         .nut-icon {
           color: $tabs-titles-item-active-color;
@@ -167,14 +167,14 @@
 
   &-button {
     .nut-tabs-titles-item {
-      padding: 0 10px;
+      padding: 0 scale-px(10px);
       .nut-tabs-titles-item-text {
         flex: 1;
-        height: 28px;
+        height: scale-px(28px);
         display: flex;
         align-items: center;
         justify-content: center;
-        padding: 0 8px;
+        padding: 0 scale-px(8px);
       }
     }
     .nut-tabs-titles-item-active {
@@ -190,7 +190,7 @@
   }
 
   &-divider {
-    border-bottom: 1px solid $color-border;
+    border-bottom: scale-px(1px) solid $color-border;
 
     .nut-tabs-titles-item {
       position: relative;
@@ -201,7 +201,7 @@
         right: 0;
         top: 50%;
         height: 50%;
-        width: 1px;
+        width: scale-px(1px);
         background: $color-border;
         transform: translateY(-50%);
       }
@@ -219,12 +219,12 @@
   .nut-tabs-ellipsis {
     white-space: break-spaces;
     /* #ifdef harmony dynamic*/
-    padding-left: 12px;
+    padding-left: scale-px(12px);
     /* #endif */
     /* #ifndef harmony dynamic*/
-    padding-left: 6px;
+    padding-left: scale-px(6px);
     /* #endif */
-    width: 90px;
+    width: scale-px(90px);
     line-height: $font-size-base;
   }
 
@@ -260,14 +260,14 @@
     &-active {
       background-color: $tabs-titles-item-active-background-color;
       .nut-tabs-titles-item-line {
-        left: 10px;
+        left: scale-px(10px);
         width: $tabs-vertical-tab-line-width;
         height: $tabs-vertical-tab-line-height;
         background: $tabs-vertical-tab-line-color;
       }
 
       .nut-tabs-titles-item-smile {
-        right: -12px;
+        right: scale-px(-12px);
         bottom: -2%;
         left: auto;
         transform: rotate(320deg);
@@ -306,7 +306,7 @@
       .nut-tabs-titles-item-smile {
         left: 50%;
         right: auto;
-        bottom: -3px;
+        bottom: scale-px(-3px);
         transform: translate(-50%, 0) rotate(0deg);
       }
     }
@@ -361,7 +361,7 @@
     &-line {
       .nut-tabs-titles-item {
         padding-left: 0;
-        padding-right: 14px;
+        padding-right: scale-px(14px);
       }
     }
   }
@@ -370,11 +370,11 @@
     &-active {
       .nut-tabs-titles-item-line {
         left: auto;
-        right: 10px;
+        right: scale-px(10px);
       }
 
       .nut-tabs-titles-item-smile {
-        left: -12px;
+        left: scale-px(-12px);
         right: auto;
         transform: rotate(-320deg);
       }
diff --git a/src/packages/tag/tag.scss b/src/packages/tag/tag.scss
index 27c324b79d..c9589e8e64 100644
--- a/src/packages/tag/tag.scss
+++ b/src/packages/tag/tag.scss
@@ -12,7 +12,7 @@
 
   .nut-icon {
     vertical-align: middle;
-    margin-left: 4px;
+    margin-left: scale-px(4px);
     color: $tag-color;
   }
 
@@ -72,7 +72,7 @@
     justify-content: center;
     font-size: $tag-font-size;
     color: $tag-color;
-    margin-left: 4px;
+    margin-left: scale-px(4px);
   }
 
   &-plain {
@@ -85,6 +85,6 @@
 .nut-rtl .nut-tag {
   .nut-icon {
     margin-left: 0;
-    margin-right: 4px;
+    margin-right: scale-px(4px);
   }
 }
diff --git a/src/packages/textarea/textarea.scss b/src/packages/textarea/textarea.scss
index ed09b1816a..b8a7866dbb 100644
--- a/src/packages/textarea/textarea.scss
+++ b/src/packages/textarea/textarea.scss
@@ -13,7 +13,7 @@
   }
 
   &-error {
-    border: 0.5px solid $color-danger;
+    border: scale-px(0.5px) solid $color-danger;
     background-color: $color-danger-light;
   }
 
@@ -34,7 +34,7 @@
     display: block;
     box-sizing: border-box;
     width: 100%;
-    height: 40px;
+    height: scale-px(40px);
     min-width: 0;
     margin: 0;
     padding: 0;
@@ -49,10 +49,10 @@
     // &::after{
     //   content: '';
     //   position: absolute;
-    //   width: 2px;
-    //   height: 14px;
+    //   width: scale-px(2px);
+    //   height: scale-px(14px);
     //   background-color: red;
-    //   // left: 10px;
+    //   // left: scale-px(10px);
     //   // top: 50%;
     //   transform: translateY(-50%);
     //   z-index: 1;
@@ -87,7 +87,7 @@
   &.nut-textarea-rtl {
     &-limit {
       right: auto;
-      left: 15px;
+      left: scale-px(15px);
     }
   }
 }
diff --git a/src/packages/timedetail/timedetail.scss b/src/packages/timedetail/timedetail.scss
index 71df61245b..fe7c71715b 100644
--- a/src/packages/timedetail/timedetail.scss
+++ b/src/packages/timedetail/timedetail.scss
@@ -4,7 +4,7 @@
   flex: 1;
   min-width: 0;
   flex-wrap: wrap;
-  padding: 0 0 50px 12px;
+  padding: 0 0 scale-px(50px) scale-px(12px);
 
   &-item {
     width: $timeselect-time-width;
@@ -13,13 +13,13 @@
     text-align: center;
     margin: $timeselect-time-margin;
     background: $timeselect-time-background;
-    border-radius: 5px;
+    border-radius: scale-px(5px);
     font-size: $font-size-base;
-    border: 1px solid transparent;
+    border: scale-px(1px) solid transparent;
 
     &.active {
       background-color: $color-primary-light-pressed;
-      border: 1px solid $color-primary;
+      border: scale-px(1px) solid $color-primary;
       color: $color-primary;
       font-weight: $font-weight-bold;
     }
@@ -28,5 +28,5 @@
 
 [dir='rtl'] .nut-timedetail,
 .nut-rtl .nut-timedetail {
-  padding: 0 12px 50px 0;
+  padding: 0 scale-px(12px) scale-px(50px) 0;
 }
diff --git a/src/packages/timeselect/timeselect.scss b/src/packages/timeselect/timeselect.scss
index c9b761f350..42367ca1f0 100644
--- a/src/packages/timeselect/timeselect.scss
+++ b/src/packages/timeselect/timeselect.scss
@@ -5,7 +5,7 @@
   background-color: $color-background-overlay;
   display: flex;
   flex-direction: column;
-  height: calc(100% - 50px);
+  height: calc(100% - scale-px(50px));
 
   &-content {
     display: flex;
@@ -24,7 +24,7 @@
 }
 
 .nut-timepannel {
-  padding: 0 16px;
+  padding: 0 scale-px(16px);
   height: $timeselect-date-height;
   line-height: $timeselect-date-height;
   text-align: start;
diff --git a/src/packages/toast/toast.scss b/src/packages/toast/toast.scss
index 05e9364d10..fd60fff802 100644
--- a/src/packages/toast/toast.scss
+++ b/src/packages/toast/toast.scss
@@ -44,9 +44,9 @@
     flex-direction: column;
     justify-content: center;
     align-items: center;
-    min-width: 96px;
+    min-width: scale-px(96px);
     max-width: 60%;
-    // max-width: 224px;
+    // max-width: scale-px(224px);
     box-sizing: border-box;
     font-size: $toast-text-font-size;
     text-align: $toast-inner-text-align;
@@ -58,7 +58,7 @@
 
     &-descrption {
       max-width: 68.2%;
-      // max-width: 256px;
+      // max-width: scale-px(256px);
     }
 
     &-normal {
@@ -95,7 +95,7 @@
   &-text {
     color: #ffffff;
     text-align: $toast-inner-text-align;
-    line-height: 20px;
+    line-height: scale-px(20px);
     /* #ifdef harmony dynamic*/
     line-height: normal;
     /* #endif */
@@ -107,15 +107,15 @@
     font-size: $toast-title-font-size;
     font-weight: 600;
     text-align: $toast-inner-text-align;
-    line-height: 22px;
+    line-height: scale-px(22px);
     /* #ifdef harmony dynamic*/
     line-height: normal;
     /* #endif */
   }
 
   .nut-icon {
-    width: 24px;
-    height: 24px;
+    width: scale-px(24px);
+    height: scale-px(24px);
     color: #ffffff;
   }
 
@@ -124,12 +124,12 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    margin: 3px 0 5px;
+    margin: scale-px(3px) 0 scale-px(5px);
     color: #ffffff;
 
     &-icon {
-      width: 24px;
-      height: 24px;
+      width: scale-px(24px);
+      height: scale-px(24px);
     }
   }
 
diff --git a/src/packages/tour/tour.scss b/src/packages/tour/tour.scss
index d04045f95d..a4b845c512 100644
--- a/src/packages/tour/tour.scss
+++ b/src/packages/tour/tour.scss
@@ -3,7 +3,7 @@
 .nut-tour {
   &-mask {
     position: fixed;
-    box-shadow: 0px 0px 0px 150vh $color-mask;
+    box-shadow: scale-px(0px) scale-px(0px) scale-px(0px) 150vh $color-mask;
     border-radius: $tour-mask-border-radius;
     z-index: 999;
 
@@ -29,8 +29,8 @@
       text-align: end;
 
       &-close {
-        --nut-icon-width: 10px;
-        --nut-icon-height: 10px;
+        --nut-icon-width: scale-px(10px);
+        --nut-icon-height: scale-px(10px);
       }
     }
 
@@ -51,7 +51,7 @@
 
         &-btn {
           display: inline-block;
-          border: 1px solid $color-text-disabled;
+          border: scale-px(1px) solid $color-text-disabled;
           margin-left: $tour-content-bottom-btn-margin-left;
           padding: $tour-content-bottom-btn-padding;
           font-size: $tour-content-bottom-btn-font-size;
diff --git a/src/packages/uploader/uploader.scss b/src/packages/uploader/uploader.scss
index 259dbc7cec..09c77e0ee7 100644
--- a/src/packages/uploader/uploader.scss
+++ b/src/packages/uploader/uploader.scss
@@ -73,7 +73,7 @@
     margin-right: $uploader-preview-margin-right;
     margin-bottom: $uploader-preview-margin-bottom;
     border-radius: $uploader-image-border-radius;
-    box-shadow: 0 2px 10px 0 rgb(0 0 0 / 10%);
+    box-shadow: 0 scale-px(2px) scale-px(10px) 0 rgb(0 0 0 / 10%);
 
     &-progress {
       position: absolute;
@@ -95,34 +95,34 @@
 
       &-msg {
         color: $color-text-help;
-        font-size: 12px;
+        font-size: scale-px(12px);
       }
     }
 
     &.list {
       width: 100%;
-      margin-right: 0px;
-      margin-bottom: 0px;
-      margin-top: 10px;
-      box-shadow: 0 2px 10px 0 rgb(0 0 0 / 1%);
+      margin-right: scale-px(0px);
+      margin-bottom: scale-px(0px);
+      margin-top: scale-px(10px);
+      box-shadow: 0 scale-px(2px) scale-px(10px) 0 rgb(0 0 0 / 1%);
     }
 
     &-list {
       width: 100%;
-      height: 32px;
+      height: scale-px(32px);
       box-sizing: border-box;
       display: flex;
       align-items: center;
       justify-content: space-between;
-      padding: 0 10px;
+      padding: 0 scale-px(10px);
       background-color: $color-background-sunken;
 
       .nut-uploader-preview-img-file-name {
         display: flex;
         align-items: center;
         -webkit-line-clamp: 1;
-        padding: 2px;
-        height: 24px;
+        padding: scale-px(2px);
+        height: scale-px(24px);
         @include text-ellipsis();
       }
 
@@ -133,7 +133,7 @@
         bottom: 0;
 
         .nut-progress-outer {
-          height: 2px !important;
+          height: scale-px(2px) !important;
         }
       }
     }
@@ -161,7 +161,7 @@
         position: absolute;
         bottom: 0;
         left: 0;
-        font-size: 12px;
+        font-size: scale-px(12px);
         color: $white;
         text-align: center;
         box-sizing: border-box;
@@ -197,7 +197,7 @@
         &-name {
           display: flex;
           width: 90%;
-          font-size: 12px;
+          font-size: scale-px(12px);
           color: $color-text;
           @include moreline-ellipsis();
 
@@ -235,7 +235,7 @@
 
     &.list {
       margin-right: 0;
-      margin-left: 0px;
+      margin-left: scale-px(0px);
     }
 
     .close {
diff --git a/src/packages/virtuallist/virtuallist.scss b/src/packages/virtuallist/virtuallist.scss
index 71605201dd..b0f21ae8ba 100644
--- a/src/packages/virtuallist/virtuallist.scss
+++ b/src/packages/virtuallist/virtuallist.scss
@@ -6,8 +6,8 @@
     float: left;
     color: $color-title;
     background: $color-background-overlay;
-    padding: 10px;
-    margin-right: 20px;
+    padding: scale-px(10px);
+    margin-right: scale-px(20px);
   }
 
   &:after {
@@ -23,12 +23,12 @@
     display: block;
     color: $color-title;
     background: $color-background-overlay;
-    border-radius: 7px;
-    box-shadow: 0 1px 6px 0 rgba(237, 238, 241, 1);
-    margin-top: 20px;
-    padding: 14px 15px;
-    font-size: 13px;
-    line-height: 18px;
+    border-radius: scale-px(7px);
+    box-shadow: 0 scale-px(1px) scale-px(6px) 0 rgba(237, 238, 241, 1);
+    margin-top: scale-px(20px);
+    padding: scale-px(14px) scale-px(15px);
+    font-size: scale-px(13px);
+    line-height: scale-px(18px);
     font-family: PingFangSC;
     font-weight: 500;
   }
@@ -74,6 +74,6 @@
   li {
     float: right;
     margin-right: 0;
-    margin-left: 20px;
+    margin-left: scale-px(20px);
   }
 }
diff --git a/src/sites/mobile/main.tsx b/src/sites/mobile/main.tsx
index 148d98c441..4375a84772 100644
--- a/src/sites/mobile/main.tsx
+++ b/src/sites/mobile/main.tsx
@@ -3,6 +3,7 @@ import * as ReactDOM from 'react-dom/client'
 import App from './App'
 import '@nutui/touch-emulator' // 适配 h5 示例桌面端预览
 import { isMobile } from '@/sites/assets/util'
+import { initScaleF } from '@/utils/scale-f'
 import('../../packages/nutui.react.scss')
 
 const projectID = import.meta.env.VITE_APP_PROJECT_ID || ''
@@ -28,6 +29,7 @@ if (!isMobile && pathname.includes('demo') && !pathname.includes('jmapp')) {
 }
 
 if (rootElement != null) {
+  initScaleF()
   const root = ReactDOM.createRoot(rootElement)
   root.render(<App />)
 }
diff --git a/src/styles/variables.scss b/src/styles/variables.scss
index 81c738928e..0dbe99876f 100644
--- a/src/styles/variables.scss
+++ b/src/styles/variables.scss
@@ -1,4 +1,11 @@
 // ----------------------------------------------------
+// 缩放系数
+:root {
+  --scale-f: 1;
+}
+@function scale-px($size) {
+  @return calc(#{$size} * var(--scale-f, 1));
+}
 // 主色调 // done
 $color-primary: var(--nutui-color-primary, #ff0f23) !default;
 $color-primary-stop-1: var(--nutui-color-primary-stop-1, #ff475d) !default;
@@ -147,17 +154,17 @@ $font-family:
   sans-serif !default;
 
 // Font
-$font-size-xxxs: var(--nutui-font-size-xxxs, 9px) !default;
-$font-size-xxs: var(--nutui-font-size-xxs, 10px) !default;
-$font-size-xs: var(--nutui-font-size-xs, 11px) !default;
-$font-size-s: var(--nutui-font-size-s, 12px) !default;
-$font-size-base: var(--nutui-font-size-base, 14px) !default;
-$font-size-l: var(--nutui-font-size-l, 15px) !default;
-$font-size-icon: var(--nutui-font-size-icon, 16px) !default;
-$font-size-xl: var(--nutui-font-size-xl, 18px) !default;
-$font-size-xxl: var(--nutui-font-size-xxl, 24px) !default;
-$font-size-xxxl: var(--nutui-font-size-10, 26px) !default;
-$font-size-xxxxl: var(--nutui-font-size-11, 28px) !default;
+$font-size-xxxs: var(--nutui-font-size-xxxs, scale-px(9px)) !default;
+$font-size-xxs: var(--nutui-font-size-xxs, scale-px(10px)) !default;
+$font-size-xs: var(--nutui-font-size-xs, scale-px(11px)) !default;
+$font-size-s: var(--nutui-font-size-s, scale-px(12px)) !default;
+$font-size-base: var(--nutui-font-size-base, scale-px(14px)) !default;
+$font-size-l: var(--nutui-font-size-l, scale-px(15px)) !default;
+$font-size-icon: var(--nutui-font-size-icon, scale-px(16px)) !default;
+$font-size-xl: var(--nutui-font-size-xl, scale-px(18px)) !default;
+$font-size-xxl: var(--nutui-font-size-xxl, scale-px(24px)) !default;
+$font-size-xxxl: var(--nutui-font-size-10, scale-px(26px)) !default;
+$font-size-xxxxl: var(--nutui-font-size-11, scale-px(28px)) !default;
 
 // 字重 ok
 $font-weight-light: var(--nutui-font-weight-light, 300) !default;
@@ -169,33 +176,42 @@ $font-weight-bold: var(--nutui-font-weight-bold, 600) !default;
 $line-height-base: var(--nutui-line-height-base, 1.5) !default;
 
 // 间距 space
-$spacing-xxxs: var(--nutui-spacing-xxxs, 2px) !default;
-$spacing-xxs: var(--nutui-spacing-xxs, 4px) !default;
-$spacing-xs: var(--nutui-spacing-xs, 6px) !default;
-$spacing-s: var(--nutui-spacing-s, 7px) !default;
-$spacing-base: var(--nutui-spacing-base, 8px) !default;
-$spacing-l: var(--nutui-spacing-l, 9px) !default;
-$spacing-xl: var(--nutui-spacing-xl, 12px) !default;
-$spacing-xxl: var(--nutui-spacing-xxl, 16px) !default;
-$spacing-xxxl: var(--nutui-spacing-xxxl, 18px) !default;
+$spacing-xxxs: var(--nutui-spacing-xxxs, scale-px(2px)) !default;
+$spacing-xxs: var(--nutui-spacing-xxs, scale-px(4px)) !default;
+$spacing-xs: var(--nutui-spacing-xs, scale-px(6px)) !default;
+$spacing-s: var(--nutui-spacing-s, scale-px(7px)) !default;
+$spacing-base: var(--nutui-spacing-base, scale-px(8px)) !default;
+$spacing-l: var(--nutui-spacing-l, scale-px(9px)) !default;
+$spacing-xl: var(--nutui-spacing-xl, scale-px(12px)) !default;
+$spacing-xxl: var(--nutui-spacing-xxl, scale-px(16px)) !default;
+$spacing-xxxl: var(--nutui-spacing-xxxl, scale-px(18px)) !default;
 
 // 圆角 corners ok
 $radius-xxxs: var(
   --nutui-radius-xxxs,
   0
 ) !default; // 内容描述型的详情页面通栏结构
-$radius-xxs: var(--nutui-radius-xxs, 2px) !default; // 标签
-$radius-xs: var(--nutui-radius-xs, 4px) !default; // 单行高度20、24、28的组件
-$radius-s: var(--nutui-radius-s, 6px) !default; // 单行高度32、36的组件
-$radius-base: var(--nutui-radius-base, 8px) !default; // 单行高度40及以上的组件
-$radius-l: var(--nutui-radius-l, 8px) !default; // 入口型非通栏卡片
+$radius-xxs: var(--nutui-radius-xxs, scale-px(2px)) !default; // 标签
+$radius-xs: var(
+  --nutui-radius-xs,
+  scale-px(4px)
+) !default; // 单行高度20、24、28的组件
+$radius-s: var(
+  --nutui-radius-s,
+  scale-px(6px)
+) !default; // 单行高度32、36的组件
+$radius-base: var(
+  --nutui-radius-base,
+  scale-px(8px)
+) !default; // 单行高度40及以上的组件
+$radius-l: var(--nutui-radius-l, scale-px(8px)) !default; // 入口型非通栏卡片
 $radius-xl: var(
   --nutui-radius-xl,
-  12px
+  scale-px(12px)
 ) !default; // 结构分割、通栏卡片、临时操作层组件等场景
-$radius-xxl: var(--nutui-radius-xxl, 14px) !default; // 暂无
-$radius-xxxl: var(--nutui-radius-xxxl, 16px) !default; // 暂无
-$radius-circle: 50px !default; // 按钮、徽标等组件的胶囊形态圆角样式
+$radius-xxl: var(--nutui-radius-xxl, scale-px(14px)) !default; // 暂无
+$radius-xxxl: var(--nutui-radius-xxxl, scale-px(16px)) !default; // 暂无
+$radius-circle: scale-px(50px) !default; // 按钮、徽标等组件的胶囊形态圆角样式
 $radius-full: 50% !default; // 头像、图片等不限制尺寸规格，需要以圆形呈现
 
 // 阴影 shadows
@@ -218,9 +234,18 @@ $button-square-border-radius: var(
   0
 ) !default;
 $button-border-radius: var(--nutui-button-border-radius, $radius-s) !default;
-$button-border-width: var(--nutui-button-border-width, 0.5px) !default;
-$button-normal-padding: var(--nutui-button-normal-padding, 0px 12px) !default;
-$button-default-height: var(--nutui-button-default-height, 32px) !default;
+$button-border-width: var(
+  --nutui-button-border-width,
+  scale-px(0.5px)
+) !default;
+$button-normal-padding: var(
+  --nutui-button-normal-padding,
+  scale-px(0px) scale-px(12px)
+) !default;
+$button-default-height: var(
+  --nutui-button-default-height,
+  scale-px(32px)
+) !default;
 $button-default-color: var(--nutui-button-default-color, $color-title) !default;
 $button-default-background-color: var(
   --nutui-button-default-background-color,
@@ -238,29 +263,41 @@ $button-default-disabled-color: var(
   --nutui-button-default-disabled-color,
   $color-text-help
 ) !default;
-$button-default-padding: var(--nutui-button-default-padding, 0px 12px) !default;
+$button-default-padding: var(
+  --nutui-button-default-padding,
+  scale-px(0px) scale-px(12px)
+) !default;
 $button-default-font-size: var(
   --nutui-button-default-font-size,
   $font-size-base
 ) !default;
 
-$button-xlarge-height: var(--nutui-button-xlarge-height, 48px) !default;
-$button-xlarge-padding: var(--nutui-button-xlarge-padding, 0px 24px) !default;
+$button-xlarge-height: var(
+  --nutui-button-xlarge-height,
+  scale-px(48px)
+) !default;
+$button-xlarge-padding: var(
+  --nutui-button-xlarge-padding,
+  scale-px(0px) scale-px(24px)
+) !default;
 $button-xlarge-font-size: var(
   --nutui-button-xlarge-font-size,
   $font-size-xl
 ) !default;
 $button-xlarge-text-icon-margin: var(
   --nutui-button-xlarge-text-icon-margin,
-  6px
+  scale-px(6px)
 ) !default;
 $button-xlarge-border-radius: var(
   --nutui-button-xlarge-border-radius,
   $radius-base
 ) !default;
 
-$button-large-height: var(--nutui-button-large-height, 40px) !default;
-$button-large-padding: var(--nutui-button-large-padding, 0px 16px) !default;
+$button-large-height: var(--nutui-button-large-height, scale-px(40px)) !default;
+$button-large-padding: var(
+  --nutui-button-large-padding,
+  scale-px(0px) scale-px(16px)
+) !default;
 $button-large-font-size: var(
   --nutui-button-large-font-size,
   $font-size-l
@@ -274,15 +311,21 @@ $button-small-font-size: var(
   --nutui-button-small-font-size,
   $font-size-s
 ) !default;
-$button-small-padding: var(--nutui-button-small-padding, 0px 8px) !default;
-$button-small-height: var(--nutui-button-small-height, 28px) !default;
+$button-small-padding: var(
+  --nutui-button-small-padding,
+  scale-px(0px) scale-px(8px)
+) !default;
+$button-small-height: var(--nutui-button-small-height, scale-px(28px)) !default;
 $button-small-border-radius: var(
   --nutui-button-small-border-radius,
   $radius-s
 ) !default;
 
-$button-mini-padding: var(--nutui-button-mini-padding, 0px 8px) !default;
-$button-mini-height: var(--nutui-button-mini-height, 24px) !default;
+$button-mini-padding: var(
+  --nutui-button-mini-padding,
+  scale-px(0px) scale-px(8px)
+) !default;
+$button-mini-height: var(--nutui-button-mini-height, scale-px(24px)) !default;
 $button-mini-font-size: var(
   --nutui-button-mini-font-size,
   $font-size-xs
@@ -379,7 +422,10 @@ $button-danger-disabled: var(
   $color-danger-disabled
 ) !default;
 
-$button-text-icon-margin: var(--nutui-button-text-icon-margin, 4px) !default;
+$button-text-icon-margin: var(
+  --nutui-button-text-icon-margin,
+  scale-px(4px)
+) !default;
 
 // cell（✅）
 $cell-title-color: var(--nutui-cell-title-color, $color-title) !default;
@@ -400,14 +446,17 @@ $cell-extra-font-size: var(
   $font-size-base
 ) !default;
 $cell-extra-color: var(--nutui-cell-extra-color, $color-text) !default;
-$cell-border-radius: var(--nutui-cell-border-radius, 6px) !default;
-$cell-padding: var(--nutui-cell-padding, 13px 16px) !default;
-$cell-line-height: var(--nutui-cell-line-height, 20px) !default;
-$cell-divider-right: var(--nutui-cell-divider-right, 16px) !default;
-$cell-divider-left: var(--nutui-cell-divider-left, 16px) !default;
+$cell-border-radius: var(--nutui-cell-border-radius, scale-px(6px)) !default;
+$cell-padding: var(
+  --nutui-cell-padding,
+  scale-px(13px) scale-px(16px)
+) !default;
+$cell-line-height: var(--nutui-cell-line-height, scale-px(20px)) !default;
+$cell-divider-right: var(--nutui-cell-divider-right, scale-px(16px)) !default;
+$cell-divider-left: var(--nutui-cell-divider-left, scale-px(16px)) !default;
 $cell-divider-border-bottom: var(
   --nutui-cell-divider-border-bottom,
-  1px solid $color-border
+  scale-px(1px) solid $color-border
 ) !default;
 $cell-background-color: var(
   --nutui-cell-background-color,
@@ -415,13 +464,13 @@ $cell-background-color: var(
 ) !default;
 $cell-box-shadow: var(
   --nutui-cell-box-shadow,
-  0px 1px 7px 0px rgba(237, 238, 241, 1)
+  scale-px(0px) scale-px(1px) scale-px(7px) scale-px(0px) rgba(237, 238, 241, 1)
 ) !default;
 
 // cell-group（✅）
 $cell-group-title-padding: var(
   --nutui-cell-group-title-padding,
-  0 10px
+  0 scale-px(10px)
 ) !default;
 $cell-group-title-color: var(
   --nutui-cell-group-title-color,
@@ -433,11 +482,11 @@ $cell-group-title-font-size: var(
 ) !default;
 $cell-group-title-line-height: var(
   --nutui-cell-group-title-line-height,
-  20px
+  scale-px(20px)
 ) !default;
 $cell-group-description-padding: var(
   --nutui-cell-group-description-padding,
-  0 10px
+  0 scale-px(10px)
 ) !default;
 $cell-group-description-color: var(
   --nutui-cell-group-description-color,
@@ -449,16 +498,19 @@ $cell-group-description-font-size: var(
 ) !default;
 $cell-group-description-line-height: var(
   --nutui-cell-group-description-line-height,
-  16px
+  scale-px(16px)
 ) !default;
 $cell-group-background-color: var(
   --nutui-cell-group-background-color,
   $color-background-overlay
 ) !default;
-$cell-group-wrap-margin: var(--nutui-cell-group-wrap-margin, 10px) !default;
+$cell-group-wrap-margin: var(
+  --nutui-cell-group-wrap-margin,
+  scale-px(10px)
+) !default;
 
 // divider（✅）
-$divider-margin: var(--nutui-divider-margin, 16px 0) !default;
+$divider-margin: var(--nutui-divider-margin, scale-px(16px) 0) !default;
 $divider-text-font-size: var(
   --nutui-divider-text-font-size,
   $font-size-base
@@ -468,25 +520,40 @@ $divider-border-color: var(
   $color-border
 ) !default;
 $divider-text-color: var(--nutui-divider-text-color, $color-text) !default;
-$divider-line-height: var(--nutui-divider-line-height, 1px) !default;
-$divider-spacing: var(--nutui-divider-spacing, 8px) !default;
+$divider-line-height: var(--nutui-divider-line-height, scale-px(1px)) !default;
+$divider-spacing: var(--nutui-divider-spacing, scale-px(8px)) !default;
 $divider-side-width: var(--nutui-divider-side-width, 10%) !default;
-$divider-vertical-height: var(--nutui-divider-vertical-height, 12px) !default;
-$divider-vertical-margin: var(--nutui-divider-vertical-margin, 0 8px) !default;
+$divider-vertical-height: var(
+  --nutui-divider-vertical-height,
+  scale-px(12px)
+) !default;
+$divider-vertical-margin: var(
+  --nutui-divider-vertical-margin,
+  0 scale-px(8px)
+) !default;
 
 // icon（✅）
 
-$icon-height: var(--nutui-icon-height, 20px) !default;
-$icon-width: var(--nutui-icon-width, 20px) !default;
-$icon-line-height: var(--nutui-icon-line-height, 20px) !default;
+$icon-height: var(--nutui-icon-height, scale-px(20px)) !default;
+$icon-width: var(--nutui-icon-width, scale-px(20px)) !default;
+$icon-line-height: var(--nutui-icon-line-height, scale-px(20px)) !default;
 
 // uploader（✅）
-$uploader-image-width: var(--nutui-uploader-image-width, 100px) !default;
-$uploader-image-height: var(--nutui-uploader-image-height, 100px) !default;
-$uploader-image-border: var(--nutui-uploader-image-border, 0px) !default;
+$uploader-image-width: var(
+  --nutui-uploader-image-width,
+  scale-px(100px)
+) !default;
+$uploader-image-height: var(
+  --nutui-uploader-image-height,
+  scale-px(100px)
+) !default;
+$uploader-image-border: var(
+  --nutui-uploader-image-border,
+  scale-px(0px)
+) !default;
 $uploader-image-border-radius: var(
   --nutui-uploader-image-border-radius,
-  4px
+  scale-px(4px)
 ) !default;
 $uploader-background: var(
   --nutui-uploader-background,
@@ -506,11 +573,11 @@ $uploader-image-disabled: var(
 ) !default;
 $uploader-image-icon-margin-bottom: var(
   --nutui-uploader-image-icon-margin-bottom,
-  6px
+  scale-px(6px)
 ) !default;
 $uploader-image-icon-tip-font-size: var(
   --nutui-uploader-image-icon-tip-font-size,
-  12px
+  scale-px(12px)
 ) !default;
 $uploader-preview-progress-background: var(
   --nutui-uploader-preview-progress-background,
@@ -518,15 +585,15 @@ $uploader-preview-progress-background: var(
 ) !default;
 $uploader-preview-margin-right: var(
   --nutui-uploader-preview-margin-right,
-  10px
+  scale-px(10px)
 ) !default;
 $uploader-preview-margin-bottom: var(
   --nutui-uploader-preview-margin-bottom,
-  10px
+  scale-px(10px)
 ) !default;
 $uploader-preview-tips-height: var(
   --nutui-uploader-preview-tips-height,
-  24px
+  scale-px(24px)
 ) !default;
 $uploader-preview-tips-background: var(
   --nutui-uploader-preview-tips-background,
@@ -534,15 +601,15 @@ $uploader-preview-tips-background: var(
 ) !default;
 $uploader-preview-tips-padding: var(
   --nutui-uploader-preview-tips-padding,
-  0 5px
+  0 scale-px(5px)
 ) !default;
 $uploader-preview-close-right: var(
   --nutui-uploader-preview-close-right,
-  0px
+  scale-px(0px)
 ) !default;
 $uploader-preview-close-top: var(
   --nutui-uploader-preview-close-top,
-  0px
+  scale-px(0px)
 ) !default;
 
 // picker（✅）
@@ -564,7 +631,7 @@ $picker-title-ok-font-size: var(
 ) !default;
 
 // picker-view（✅）
-$picker-item-height: var(--nutui-picker-item-height, 36px) !default;
+$picker-item-height: var(--nutui-picker-item-height, scale-px(36px)) !default;
 $picker-list-height: calc($picker-item-height * 7) !default;
 $picker-item-text-color: var(
   --nutui-picker-item-text-color,
@@ -576,7 +643,7 @@ $picker-item-text-font-size: var(
 ) !default;
 $picker-item-active-line-border: var(
   --nutui-picker-item-active-line-border,
-  1px solid $color-border
+  scale-px(1px) solid $color-border
 ) !default;
 $picker-mask-background: var(
   --picker-mask-background,
@@ -588,7 +655,7 @@ $picker-mask-background: var(
 $input-border-bottom: var(--nutui-input-border-bottom, $color-border) !default;
 $input-border-bottom-width: var(
   --nutui-input-border-bottom-width,
-  0px
+  scale-px(0px)
 ) !default;
 // $input-disabled-color: var(
 //   --nutui-input-disabled-color,
@@ -602,10 +669,10 @@ $input-background-color: var(
   --nutui-input-background-color,
   $color-background-overlay
 ) !default;
-$input-padding: var(--nutui-input-padding, 12px) !default;
+$input-padding: var(--nutui-input-padding, scale-px(12px)) !default;
 
 // textarea（✅）
-$textarea-padding: var(--nutui-textarea-padding, 12px) !default;
+$textarea-padding: var(--nutui-textarea-padding, scale-px(12px)) !default;
 $textarea-text-color: var(--nutui-textarea-text-color, $color-title) !default;
 $textarea-text-curror-color: var(
   --nutui-textarea-text-curror-color,
@@ -613,12 +680,18 @@ $textarea-text-curror-color: var(
 ) !default;
 $textarea-text-line-height: var(
   --nutui-textarea-text-line-height,
-  20px
+  scale-px(20px)
 ) !default;
 
 // inputnumber（✅）
-$inputnumber-input-width: var(--nutui-inputnumber-input-width, 26px) !default;
-$inputnumber-input-height: var(--nutui-inputnumber-input-height, 20px) !default;
+$inputnumber-input-width: var(
+  --nutui-inputnumber-input-width,
+  scale-px(26px)
+) !default;
+$inputnumber-input-height: var(
+  --nutui-inputnumber-input-height,
+  scale-px(20px)
+) !default;
 $inputnumber-input-background-color: var(
   --nutui-inputnumber-input-background-color,
   $color-background
@@ -634,13 +707,19 @@ $inputnumber-input-font-size: var(
 $inputnumber-input-border: var(--nutui-inputnumber-input-border, 0) !default;
 $inputnumber-input-border-radius: var(
   --nutui-inputnumber-input-border-radius,
-  4px
+  scale-px(4px)
+) !default;
+$inputnumber-input-margin: var(
+  --nutui-inputnumber-input-margin,
+  scale-px(0px)
+) !default;
+$inputnumber-button-width: var(
+  --nutui-inputnumber-button-width,
+  scale-px(20px)
 ) !default;
-$inputnumber-input-margin: var(--nutui-inputnumber-input-margin, 0px) !default;
-$inputnumber-button-width: var(--nutui-inputnumber-button-width, 20px) !default;
 $inputnumber-button-height: var(
   --nutui-inputnumber-button-height,
-  20px
+  scale-px(20px)
 ) !default;
 $inputnumber-button-background-color: var(
   --nutui-inputnumber-button-background-color,
@@ -650,7 +729,10 @@ $inputnumber-icon-color: var(
   --nutui-inputnumber-icon-color,
   $color-text
 ) !default;
-$inputnumber-icon-size: var(--nutui-inputnumber-icon-size, 8px) !default;
+$inputnumber-icon-size: var(
+  --nutui-inputnumber-icon-size,
+  scale-px(8px)
+) !default;
 $inputnumber-disabled-color: var(
   --nutui-inputnumber-disabled-color,
   $color-text-disabled
@@ -676,7 +758,7 @@ $actionsheet-item-border-bottom: var(
 ) !default;
 $actionsheet-item-line-height: var(
   --nutui-actionsheet-item-line-height,
-  24px
+  scale-px(24px)
 ) !default;
 $actionsheet-item-color: var(
   --nutui-actionsheet-item-color,
@@ -705,7 +787,7 @@ $shortpassword-forget: var(
 //numberkeyboard（✅）
 $numberkeyboard-padding: var(
   --nutui-numberkeyboard-padding,
-  0 0 22px 0
+  0 0 scale-px(22px) 0
 ) !default;
 $numberkeyboard-background-color: var(
   --nutui-numberkeyboard-background-color,
@@ -717,7 +799,7 @@ $numberkeyboard-wrapper-background-color: var(
 ) !default;
 $numberkeyboard-header-close-padding: var(
   --nutui-numberkeyboard-header-close-padding,
-  0 16px
+  0 scale-px(16px)
 ) !default;
 $numberkeyboard-header-close-color: var(
   --nutui-numberkeyboard-header-close-color,
@@ -725,7 +807,7 @@ $numberkeyboard-header-close-color: var(
 ) !default;
 $numberkeyboard-header-close-font-size: var(
   --nutui-numberkeyboard-header-close-font-size,
-  14px
+  scale-px(14px)
 ) !default;
 $numberkeyboard-header-close-background-color: var(
   --nutui-numberkeyboard-header-close-background-color,
@@ -741,7 +823,7 @@ $numberkeyboard-key-active-background-color: var(
 ) !default;
 $numberkeyboard-key-height: var(
   --nutui-numberkeyboard-key-height,
-  48px
+  scale-px(48px)
 ) !default;
 $numberkeyboard-key-line-height: var(
   --nutui-numberkeyboard-key-line-height,
@@ -749,7 +831,7 @@ $numberkeyboard-key-line-height: var(
 ) !default;
 $numberkeyboard-key-border-radius: var(
   --nutui-numberkeyboard-key-border-radius,
-  8px
+  scale-px(8px)
 ) !default;
 $numberkeyboard-key-border: var(
   --nutui-numberkeyboard-key-border,
@@ -784,14 +866,17 @@ $coutdown-font-weight: var(
   --nutui-countdown-font-weight,
   $font-weight
 ) !default;
-$countdown-height: var(--nutui-countdown-height, 16px) !default;
-$countdown-width: var(--nutui-countdown-width, 16px) !default;
+$countdown-height: var(--nutui-countdown-height, scale-px(16px)) !default;
+$countdown-width: var(--nutui-countdown-width, scale-px(16px)) !default;
 $countdown-number-padding: var(--nutui-countdown-number-padding, 0 0) !default;
 $countdown-number-border-radius: var(
   --nutui-countdown-number-border-radius,
   $radius-xxs
 ) !default;
-$countdown-number-margin: var(--nutui-countdown-number-margin, 0 1px) !default;
+$countdown-number-margin: var(
+  --nutui-countdown-number-margin,
+  0 scale-px(1px)
+) !default;
 $countdown-number-color: var(
   --nutui-countdown-number-color,
   $color-primary
@@ -830,49 +915,76 @@ $price-line-color: var(
 ) !default;
 $price-symbol-padding-right: var(
   --nutui-price-symbol-padding-right,
-  0px
+  scale-px(0px)
 ) !default;
 
 //xlarge price（✅）
-$price-symbol-xlarge-size: var(--nutui-price-symbol-xlarge-size, 12px) !default;
+$price-symbol-xlarge-size: var(
+  --nutui-price-symbol-xlarge-size,
+  scale-px(12px)
+) !default;
 $price-integer-xlarge-size: var(
   --nutui-price-integer-xlarge-size,
-  24px
+  scale-px(24px)
 ) !default;
 $price-decimal-xlarge-size: var(
   --nutui-price-decimal-xlarge-size,
-  12px
+  scale-px(12px)
 ) !default;
 
 //large price（✅）
-$price-symbol-large-size: var(--nutui-price-symbol-large-size, 12px) !default;
-$price-integer-large-size: var(--nutui-price-integer-large-size, 18px) !default;
-$price-decimal-large-size: var(--nutui-price-decimal-large-size, 12px) !default;
+$price-symbol-large-size: var(
+  --nutui-price-symbol-large-size,
+  scale-px(12px)
+) !default;
+$price-integer-large-size: var(
+  --nutui-price-integer-large-size,
+  scale-px(18px)
+) !default;
+$price-decimal-large-size: var(
+  --nutui-price-decimal-large-size,
+  scale-px(12px)
+) !default;
 
 //normal price（✅）
-$price-symbol-normal-size: var(--nutui-price-symbol-normal-size, 12px) !default;
+$price-symbol-normal-size: var(
+  --nutui-price-symbol-normal-size,
+  scale-px(12px)
+) !default;
 $price-integer-normal-size: var(
   --nutui-price-integer-normal-size,
-  16px
+  scale-px(16px)
 ) !default;
 $price-decimal-normal-size: var(
   --nutui-price-decimal-normal-size,
-  12px
+  scale-px(12px)
 ) !default;
 
 // small price（✅）
-$price-symbol-small-size: var(--nutui-price-symbol-small-size, 12px) !default;
-$price-integer-small-size: var(--nutui-price-integer-small-size, 12px) !default;
-$price-decimal-small-size: var(--nutui-price-decimal-small-size, 12px) !default;
+$price-symbol-small-size: var(
+  --nutui-price-symbol-small-size,
+  scale-px(12px)
+) !default;
+$price-integer-small-size: var(
+  --nutui-price-integer-small-size,
+  scale-px(12px)
+) !default;
+$price-decimal-small-size: var(
+  --nutui-price-decimal-small-size,
+  scale-px(12px)
+) !default;
 
 //avatar（✅）
-$avatar-square: var(--nutui-avatar-square, 5px) !default;
-$avatar-large-width: var(--nutui-avatar-large-width, 60px) !default;
-$avatar-large-height: var(--nutui-avatar-large-height, 60px) !default;
-$avatar-small-width: var(--nutui-avatar-small-width, 32px) !default;
-$avatar-small-height: var(--nutui-avatar-small-height, 32px) !default;
-$avatar-normal-width: var(--nutui-avatar-normal-width, 40px) !default;
-$avatar-normal-height: var(--nutui-avatar-normal-height, 40px) !default;
+$avatar-square: var(--nutui-avatar-square, scale-px(5px)) !default;
+$avatar-large-width: var(--nutui-avatar-large-width, scale-px(60px)) !default;
+$avatar-large-height: var(--nutui-avatar-large-height, scale-px(60px)) !default;
+$avatar-small-width: var(--nutui-avatar-small-width, scale-px(32px)) !default;
+$avatar-small-height: var(--nutui-avatar-small-height, scale-px(32px)) !default;
+$avatar-normal-width: var(--nutui-avatar-normal-width, scale-px(40px)) !default;
+$avatar-normal-height: var(
+  --nutui-avatar-normal-height,
+  scale-px(40px)
+) !default;
 
 //switch（✅）
 $switch-active-background-color: var(
@@ -895,14 +1007,14 @@ $switch-inactive-line-background-color: var(
   --nutui-switch-inactive-line-background-color,
   #ffffff
 ) !default;
-$switch-width: var(--nutui-switch-width, 46px) !default;
-$switch-height: var(--nutui-switch-height, 28px) !default;
-$switch-line-height: var(--nutui-switch-line-height, 28px) !default;
+$switch-width: var(--nutui-switch-width, scale-px(46px)) !default;
+$switch-height: var(--nutui-switch-height, scale-px(28px)) !default;
+$switch-line-height: var(--nutui-switch-line-height, scale-px(28px)) !default;
 $switch-border-radius: var(
   --nutui-switch-border-radius,
   $radius-circle
 ) !default;
-$switch-border-width: var(--nutui-switch-border-width, 2px) !default;
+$switch-border-width: var(--nutui-switch-border-width, scale-px(2px)) !default;
 $switch-inside-border-radius: var(
   --nutui-switch-inside-border-radius,
   $radius-full
@@ -910,15 +1022,15 @@ $switch-inside-border-radius: var(
 /* #ifdef harmony */
 $switch-inside-box-shadow: var(
   --nutui-switch-inside-box-shadow,
-  0px 2px 6px 0px rgba(0, 0, 0, 0.1)
+  scale-px(0px) scale-px(2px) scale-px(6px) scale-px(0px) rgba(0, 0, 0, 0.1)
 ) !default;
 /* #endif */
 /* #ifndef harmony */
 $switch-inside-box-shadow: var(
   --nutui-switch-inside-box-shadow,
-  0px 2px 1px 0px rgba(0, 0, 0, 0.06),
-  0px 2px 6px 0px rgba(0, 0, 0, 0.1),
-  0px 0px 0px 1px rgba(0, 0, 0, 0.02)
+  scale-px(0px) scale-px(2px) scale-px(1px) scale-px(0px) rgba(0, 0, 0, 0.06),
+  scale-px(0px) scale-px(2px) scale-px(6px) scale-px(0px) rgba(0, 0, 0, 0.1),
+  scale-px(0px) scale-px(0px) scale-px(0px) scale-px(1px) rgba(0, 0, 0, 0.02)
 ) !default;
 /* #endif */
 $switch-label-text-color: var(
@@ -936,10 +1048,19 @@ $switch-inactive-disabled-label-text-color: var(
 
 // toast（✅）
 $toast-inner-text-align: var(--nutui-toast-inner-text-align, center) !default;
-$toast-title-font-size: var(--nutui-toast-title-font-size, 16px) !default;
-$toast-text-font-size: var(--nutui-toast-text-font-size, 14px) !default;
+$toast-title-font-size: var(
+  --nutui-toast-title-font-size,
+  scale-px(16px)
+) !default;
+$toast-text-font-size: var(
+  --nutui-toast-text-font-size,
+  scale-px(14px)
+) !default;
 $toast-font-color: var(--nutui-toast-font-color, $white) !default;
-$toast-inner-padding: var(--nutui-toast-inner-padding, 13px 16px) !default;
+$toast-inner-padding: var(
+  --nutui-toast-inner-padding,
+  scale-px(13px) scale-px(16px)
+) !default;
 $toast-inner-bg-color: var(--nutui-toast-inner-bg-color, $color-mask) !default;
 $toast-inner-border-radius: var(
   --nutui-toast-inner-border-radius,
@@ -948,36 +1069,45 @@ $toast-inner-border-radius: var(
 $toast-inner-top: var(--nutui-toast-inner-top, 50%) !default;
 
 //tour（✅）
-$tour-mask-border-radius: var(--nutui-tour-mask-border-radius, 10px) !default;
-$tour-content-min-width: var(--nutui-tour-content-min-width, 200px) !default;
-$tour-content-padding: var(--nutui-tour-content-padding, 10px 12px) !default;
+$tour-mask-border-radius: var(
+  --nutui-tour-mask-border-radius,
+  scale-px(10px)
+) !default;
+$tour-content-min-width: var(
+  --nutui-tour-content-min-width,
+  scale-px(200px)
+) !default;
+$tour-content-padding: var(
+  --nutui-tour-content-padding,
+  scale-px(10px) scale-px(12px)
+) !default;
 $tour-content-inner-margin: var(
   --nutui-tour-content-inner-margin,
-  10px 0px
+  scale-px(10px) scale-px(0px)
 ) !default;
 $tour-content-inner-font-size: var(
   --nutui-tour-content-inner-font-size,
-  14px
+  scale-px(14px)
 ) !default;
 $tour-content-bottom-margin-top: var(
   --nutui-tour-content-bottom-margin-top,
-  10px
+  scale-px(10px)
 ) !default;
 $tour-content-bottom-btn-margin-left: var(
   --nutui-tour-content-bottom-btn-margin-left,
-  4px
+  scale-px(4px)
 ) !default;
 $tour-content-bottom-btn-padding: var(
   --nutui-tour-content-bottom-btn-padding,
-  2px 4px
+  scale-px(2px) scale-px(4px)
 ) !default;
 $tour-content-bottom-btn-font-size: var(
   --nutui-tour-content-bottom-btn-font-size,
-  12px
+  scale-px(12px)
 ) !default;
 $tour-content-bottom-btn-border-radius: var(
   --nutui-tour-content-bottom-btn-border-radius,
-  4px
+  scale-px(4px)
 ) !default;
 
 // calendar（✅）
@@ -1017,29 +1147,35 @@ $calendar-sub-title-font-size: var(
   --nutui-calendar-sub-title-font-size,
   $font-size-base
 ) !default;
-$calendar-header-height: var(--nutui-calendar-header-height, 24px) !default;
+$calendar-header-height: var(
+  --nutui-calendar-header-height,
+  scale-px(24px)
+) !default;
 $calendar-day-width: var(--nutui-calendar-day-width, 14.28%) !default;
-$calendar-day-height: var(--nutui-calendar-day-height, 60px) !default;
+$calendar-day-height: var(--nutui-calendar-day-height, scale-px(60px)) !default;
 $calendar-day-font-weight: var(
   --nutui-calendar-day-font-weight,
   $font-weight-bold
 ) !default;
 $calendar-day-active-border-radius: var(
   --nutui-calendar-day-active-border-radius,
-  4px
+  scale-px(4px)
 ) !default;
 
 //hoverbutton
 $hoverbutton-spacing: var(--nutui-hoverbutton-spacing, $spacing-base) !default;
 $hoverbutton-position-bottom: var(
   --nutui-hoverbutton-position-bottom,
-  60px
+  scale-px(60px)
 ) !default;
 $hoverbutton-position-right: var(
   --nutui-hoverbutton-position-right,
   $spacing-base
 ) !default;
-$hoverbutton-item-size: var(--nutui-hoverbutton-item-size, 40px) !default;
+$hoverbutton-item-size: var(
+  --nutui-hoverbutton-item-size,
+  scale-px(40px)
+) !default;
 $hoverbutton-item-border-color: var(
   --nutui-hoverbutton-item-border-color,
   rgba(0, 0, 0, 0.12)
@@ -1077,8 +1213,8 @@ $overlay-animation-duration: var(
 ) !default;
 //popup（✅）
 $popup-border-radius: var(--nutui-popup-border-radius, $radius-xl) !default;
-$popup-icon-size: var(--nutui-popup-icon-size, 20px) !default;
-$popup-title-padding: var(--nutui-popup-title-padding, 16px) !default;
+$popup-icon-size: var(--nutui-popup-icon-size, scale-px(20px)) !default;
+$popup-title-padding: var(--nutui-popup-title-padding, scale-px(16px)) !default;
 $popup-title-font-size: var(
   --nutui-popup-title-font-size,
   $font-size-xl
@@ -1095,17 +1231,23 @@ $popup-description-spacing: var(
   --nutui-popup-description-spacing,
   $spacing-base
 ) !default;
-$popup-title-height: var(--nutui-popup-title-height, 50px) !default;
+$popup-title-height: var(--nutui-popup-title-height, scale-px(50px)) !default;
 $popup-title-border-bottom: var(--nutui-popup-title-border-bottom, 0) !default;
 $popup-animation-duration: var(--nutui-popup-animation-duration, 0.3s) !default;
 
 // Notify（✅）
-$notify-height: var(--nutui-notify-height, 40px) !default;
-$notify-padding: var(--nutui-notify-padding, 0px 12px) !default;
-$notify-border-radius: var(--nutui-notify-border-radius, 8px) !default;
+$notify-height: var(--nutui-notify-height, scale-px(40px)) !default;
+$notify-padding: var(
+  --nutui-notify-padding,
+  scale-px(0px) scale-px(12px)
+) !default;
+$notify-border-radius: var(
+  --nutui-notify-border-radius,
+  scale-px(8px)
+) !default;
 $notify-box-shadow: var(
   --nutui-notify-box-shadow,
-  0px 4px 12px 0px rgba(0, 0, 0, 0.06)
+  scale-px(0px) scale-px(4px) scale-px(12px) scale-px(0px) rgba(0, 0, 0, 0.06)
 ) !default;
 $notify-z-index: var(--nutui-notify-z-index, 1000) !default;
 $notify-text-color: var(--nutui-notify-text-color, $color-title) !default;
@@ -1113,18 +1255,18 @@ $notify-font-size: var(--nutui-notify-font-size, $font-size-base) !default;
 $notify-background-color: var(--nutui-notify-background-color, $white) !default;
 
 // rate（✅）
-$rate-item-margin: var(--nutui-rate-item-margin, 4px) !default;
+$rate-item-margin: var(--nutui-rate-item-margin, scale-px(4px)) !default;
 $rate-icon-color: var(--nutui-rate-icon-color, $color-primary-icon) !default;
 $rate-icon-inactive-color: var(
   --nutui-rate-icon-inactive-color,
   $color-primary-icon-disabled
 ) !default;
-$rate-icon-size: var(--nutui-rate-icon-size, 12px) !default;
+$rate-icon-size: var(--nutui-rate-icon-size, scale-px(12px)) !default;
 $rate-font-color: var(--nutui-rate-font-color, $color-primary-icon) !default;
-$rate-font-size: var(--nutui-rate-font-size, 12px) !default;
+$rate-font-size: var(--nutui-rate-font-size, scale-px(12px)) !default;
 
 // tabbar（✅）
-$tabbar-height: var(--nutui-tabbar-height, 46px) !default;
+$tabbar-height: var(--nutui-tabbar-height, scale-px(46px)) !default;
 $tabbar-active-color: var(--nutui-tabbar-active-color, $color-primary) !default;
 $tabbar-inactive-color: var(
   --nutui-tabbar-inactive-color,
@@ -1145,14 +1287,23 @@ $tabbar-text-large-font-weight: var(
   --nutui-tabbar-text-large-font-weight,
   $font-weight
 ) !default;
-$tabbar-text-line-height: var(--nutui-tabbar-text-line-height, 20px) !default;
-$tabbar-text-margin-top: var(--nutui-tabbar-text-margin-top, 4px) !default;
+$tabbar-text-line-height: var(
+  --nutui-tabbar-text-line-height,
+  scale-px(20px)
+) !default;
+$tabbar-text-margin-top: var(
+  --nutui-tabbar-text-margin-top,
+  scale-px(4px)
+) !default;
 
 //pulltorefresh
-$pulltorefresh-icon-width: var(--nutui-pulltorefresh-icon-width, 36px) !default;
+$pulltorefresh-icon-width: var(
+  --nutui-pulltorefresh-icon-width,
+  scale-px(36px)
+) !default;
 $pulltorefresh-icon-height: var(
   --nutui-pulltorefresh-icon-height,
-  26px
+  scale-px(26px)
 ) !default;
 $pulltorefresh-color-primary: var(
   --nutui-pulltorefresh-color-primary,
@@ -1166,13 +1317,13 @@ $infiniteloading-color: var(
 ) !default;
 $infiniteloading-icon-size: var(
   --nutui-infiniteloading-icon-size,
-  24px
+  scale-px(24px)
 ) !default;
 
 //range（✅）
 $range-color: var(--nutui-range-color, $color-title) !default;
-$range-height: var(--nutui-range-height, 4px) !default;
-$range-margin: var(--nutui-range-margin, 15px) !default;
+$range-height: var(--nutui-range-height, scale-px(4px)) !default;
+$range-margin: var(--nutui-range-margin, scale-px(15px)) !default;
 $range-inactive-color: var(
   --nutui-range-inactive-color,
   $color-primary-light-pressed
@@ -1182,15 +1333,15 @@ $range-button-background: var(
   --nutui-range-button-background,
   $color-primary-text
 ) !default;
-$range-button-width: var(--nutui-range-button-width, 24px) !default;
-$range-button-height: var(--nutui-range-button-height, 24px) !default;
+$range-button-width: var(--nutui-range-button-width, scale-px(24px)) !default;
+$range-button-height: var(--nutui-range-button-height, scale-px(24px)) !default;
 $range-button-border: var(
   --nutui-range-button-border,
-  1px solid $color-primary
+  scale-px(1px) solid $color-primary
 ) !default;
 
 //swiper（✅）
-$swiper-indicator-bottom: var(--nutui-swiper-indicator-bottom, 12px);
+$swiper-indicator-bottom: var(--nutui-swiper-indicator-bottom, scale-px(12px));
 
 //address
 $address-tab-line-background: linear-gradient(
@@ -1201,7 +1352,10 @@ $address-tab-line-background: linear-gradient(
 
 //steps（✅）
 $steps-background-color: var(--nutui-steps-background-color, $white) !default;
-$steps-base-head-height: var(--nutui-steps-base-head-height, 14px) !default;
+$steps-base-head-height: var(
+  --nutui-steps-base-head-height,
+  scale-px(14px)
+) !default;
 $steps-base-head-background-color: var(
   --nutui-steps-base-head-background-color,
   $color-background
@@ -1209,7 +1363,7 @@ $steps-base-head-background-color: var(
 $steps-base-head-border: var(--nutui-steps-base-head-border, none) !default;
 $steps-base-head-text-size: var(
   --nutui-steps-base-head-text-size,
-  12px
+  scale-px(12px)
 ) !default;
 $steps-base-head-size: var(
   --nutui-steps-base-icon-size,
@@ -1219,24 +1373,30 @@ $steps-base-head-color: var(
   --nutui-steps-base-head-color,
   $color-text
 ) !default;
-$steps-base-head-dot-size: var(--nutui-steps-base-head-dot-size, 6px) !default;
+$steps-base-head-dot-size: var(
+  --nutui-steps-base-head-dot-size,
+  scale-px(6px)
+) !default;
 $steps-base-head-dot-background-color: var(
   --nutui-steps-base-head-dot-background-color,
   $color-text-disabled
 ) !default;
 $steps-base-head-icon-size: var(
   --nutui-steps-base-head-icon-size,
-  16px
+  scale-px(16px)
 ) !default;
 $steps-double-head-icon-size: var(
   --nutui-steps-base-head-icon-size-right,
-  20px
+  scale-px(20px)
 ) !default;
 $steps-vertical-head-icon-size: var(
   --nutui-steps-vertical-item-icon-size,
-  20px
+  scale-px(20px)
+) !default;
+$steps-base-line-height: var(
+  --nutui-steps-base-line-height,
+  scale-px(1px)
 ) !default;
-$steps-base-line-height: var(--nutui-steps-base-line-height, 1px) !default;
 $steps-base-line-background: var(
   --nutui-steps-base-line-background,
   $color-border
@@ -1251,7 +1411,7 @@ $steps-base-title-color: var(
 ) !default;
 $steps-base-description-margin-top: var(
   --nutui-steps-base-title-margin-bottom,
-  2px
+  scale-px(2px)
 ) !default;
 $steps-base-description-font-size: var(
   --nutui-steps-base-description-font-size,
@@ -1344,23 +1504,23 @@ $steps-enhanced-finish-head-text-color: var(
 ) !default;
 $steps-horizontal-item-padding-right: var(
   --nutui-steps-horizontal-item-padding-right,
-  28px
+  scale-px(28px)
 ) !default;
 $steps-horizontal-item-line-padding: var(
   --nutui-steps-horizontal-item-line-padding,
-  0 8px
+  0 scale-px(8px)
 ) !default;
 $steps-horizontal-item-special-padding-right: var(
   --nutui-steps-horizontal-item-special-padding-right,
-  22px
+  scale-px(22px)
 ) !default;
 $steps-horizontal-item-special-3-padding-right: var(
   --nutui-steps-horizontal-item-special-3-padding-right,
-  9px
+  scale-px(9px)
 ) !default;
 $steps-vertical-item-padding-bottom: var(
   --nutui-steps-vertical-item-padding-bottom,
-  13px
+  scale-px(13px)
 ) !default;
 $steps-vertical-title-font-size: var(
   --nutui-steps-vertical-title-font-size,
@@ -1368,11 +1528,11 @@ $steps-vertical-title-font-size: var(
 ) !default;
 $steps-vertical-title-margin-bottom: var(
   --nutui-steps-vertical-title-margin-bottom,
-  4px
+  scale-px(4px)
 ) !default;
 $steps-vertical-line-height: var(
   --nutui-steps-vertical-line-height,
-  18px
+  scale-px(18px)
 ) !default;
 $steps-vertical-description-font-size: var(
   --nutui-steps-vertical-description-font-size,
@@ -1380,15 +1540,15 @@ $steps-vertical-description-font-size: var(
 ) !default;
 $steps-vertical-description-margin: var(
   --nutui-steps-vertical-description-margin,
-  0 0 1px
+  0 0 scale-px(1px)
 ) !default;
 
 // dialog（✅）
-$dialog-min-width: var(--nutui-dialog-min-width, 240px) !default;
-$dialog-width: var(--nutui-dialog-width, 295px) !default;
-$dialog-padding: var(--nutui-dialog-padding, 24px) !default;
-$dialog-max-height: var(--nutui-dialog-max-height, 420px) !default;
-$dialog-min-height: var(--nutui-dialog-min-height, 124px) !default;
+$dialog-min-width: var(--nutui-dialog-min-width, scale-px(240px)) !default;
+$dialog-width: var(--nutui-dialog-width, scale-px(295px)) !default;
+$dialog-padding: var(--nutui-dialog-padding, scale-px(24px)) !default;
+$dialog-max-height: var(--nutui-dialog-max-height, scale-px(420px)) !default;
+$dialog-min-height: var(--nutui-dialog-min-height, scale-px(124px)) !default;
 $dialog-border-radius: var(--nutui-dialog-border-radius, $radius-xl) !default;
 $dialog-background: var(
   --nutui-dialog-background,
@@ -1396,16 +1556,19 @@ $dialog-background: var(
 ) !default;
 $dialog-title-margin-bottom: var(
   --nutui-dialog-title-margin-bottom,
-  8px
+  scale-px(8px)
+) !default;
+$dialog-content-margin: var(
+  --nutui-dialog-content-margin,
+  0 0 scale-px(20px) 0
 ) !default;
-$dialog-content-margin: var(--nutui-dialog-content-margin, 0 0 20px 0) !default;
 $dialog-content-max-height: var(
   --nutui-dialog-content-max-height,
-  268px
+  scale-px(268px)
 ) !default;
 $dialog-content-line-height: var(
   --nutui-dialog-content-line-height,
-  20px
+  scale-px(20px)
 ) !default;
 $dialog-content-text-align: var(
   --nutui-dialog-content-text-align,
@@ -1413,15 +1576,15 @@ $dialog-content-text-align: var(
 ) !default;
 $dialog-footer-button-border: var(
   --nutui-dialog-footer-button-border,
-  6px
+  scale-px(6px)
 ) !default;
 $dialog-footer-button-min-width: var(
   --nutui-dialog-footer-button-min-width,
-  117px
+  scale-px(117px)
 ) !default;
 $dialog-footer-cancel-margin-right: var(
   --nutui-dialog-footer-cancel-margin-right,
-  12px
+  scale-px(12px)
 ) !default;
 $dialog-footer-cancel-bg: var(
   --nutui-dialog-footer-cancel-bg,
@@ -1429,24 +1592,27 @@ $dialog-footer-cancel-bg: var(
 );
 $dialog-footer-ok-max-width: var(
   --nutui-dialog-footer-ok-max-width,
-  128px
+  scale-px(128px)
 ) !default;
 $dialog-footer-badge-height: var(
   --nutui-dialog-footer-badge-height,
-  14px
+  scale-px(14px)
 ) !default;
 $dialog-footer-badge-fontsize: var(
   --nutui-dialog-footer-badge-fontsize,
-  10px
+  scale-px(10px)
 ) !default;
 $dialog-footer-badge-padding: var(
   --nutui-dialog-footer-badge-padding,
-  0 3px
+  0 scale-px(3px)
+) !default;
+$dialog-footer-badge-top: var(
+  --nutui-dialog-footer-badge-top,
+  scale-px(-8px)
 ) !default;
-$dialog-footer-badge-top: var(--nutui-dialog-footer-badge-top, -8px) !default;
 $dialog-footer-badge-border-radius: var(
   --nutui-dialog-footer-badge-border-radius,
-  2px 2px 0px 2px
+  scale-px(2px) scale-px(2px) scale-px(0px) scale-px(2px)
 ) !default;
 $dialog-footer-badge-bg-ok: var(
   --nutui-dialog-footer-badge-bg-ok,
@@ -1474,18 +1640,18 @@ $dialog-header-font-weight: var(
 ) !default;
 $dialog-vertical-footer-ok-margin-top: var(
   --nutui-dialog-vertical-footer-ok-margin-top,
-  16px
+  scale-px(16px)
 ) !default;
 $dialog-close-color: var(--nutui-dialog-close-color, #ffffff) !default;
-$dialog-close-width: var(--nutui-dialog-close-width, 16px) !default;
-$dialog-close-height: var(--nutui-dialog-close-height, 16px) !default;
+$dialog-close-width: var(--nutui-dialog-close-width, scale-px(16px)) !default;
+$dialog-close-height: var(--nutui-dialog-close-height, scale-px(16px)) !default;
 $dialog-bottom-close-icon-size: var(
   --nutui-dialog-bottom-close-icon-size,
-  24px
+  scale-px(24px)
 ) !default;
-$dialog-close-top: var(--nutui-dialog-close-top, 16px) !default;
-$dialog-close-left: var(--nutui-dialog-close-left, 16px) !default;
-$dialog-close-right: var(--nutui-dialog-close-right, 16px) !default;
+$dialog-close-top: var(--nutui-dialog-close-top, scale-px(16px)) !default;
+$dialog-close-left: var(--nutui-dialog-close-left, scale-px(16px)) !default;
+$dialog-close-right: var(--nutui-dialog-close-right, scale-px(16px)) !default;
 
 // checkbox（✅）
 $checkbox-label-disable-color: var(
@@ -1517,15 +1683,15 @@ $checkbox-button-color: $color-text;
 $checkbox-button-background: $color-background;
 $checkbox-button-padding: var(
   --nutui-checkbox-button-padding,
-  5px 18px
+  scale-px(5px) scale-px(18px)
 ) !default;
 $checkbox-button-border-radius: var(
   --nutui-checkbox-button-border-radius,
-  15px
+  scale-px(15px)
 ) !default;
 $checkbox-button-active-border: var(
   --nutui-checkbox-button-active-border,
-  1px solid $color-primary
+  scale-px(1px) solid $color-primary
 ) !default;
 $checkbox-button-disabled-active-color: var(
   --nutui-checkbox-button-disabled-active-color,
@@ -1537,12 +1703,15 @@ $checkbox-list-background-color: var(
 ) !default;
 $checkbox-list-item-border: var(
   --nutui-checkbox-list-item-border,
-  1px solid $color-border
+  scale-px(1px) solid $color-border
+) !default;
+$checkbox-list-padding: var(
+  --nutui-checkbox-list-padding,
+  0 0 0 scale-px(12px)
 ) !default;
-$checkbox-list-padding: var(--nutui-checkbox-list-padding, 0 0 0 12px) !default;
 $checkbox-list-item-padding: var(
   --nutui-checkbox-list-item-padding,
-  12px 12px 12px 0
+  scale-px(12px) scale-px(12px) scale-px(12px) 0
 ) !default;
 
 //radio（✅）
@@ -1559,16 +1728,22 @@ $radio-label-font-size: var(
   --nutui-radio-label-font-size,
   $font-size-s
 ) !default;
-$radio-label-margin-left: var(--nutui-radio-label-margin-left, 4px) !default;
+$radio-label-margin-left: var(
+  --nutui-radio-label-margin-left,
+  scale-px(4px)
+) !default;
 $radio-button-font-size: var(
   --nutui-radio-button-font-size,
   $font-size-s
 ) !default;
 $radio-button-color: $color-text;
-$radio-button-padding: var(--nutui-radio-button-padding, 5px 18px) !default;
+$radio-button-padding: var(
+  --nutui-radio-button-padding,
+  scale-px(5px) scale-px(18px)
+) !default;
 $radio-button-border-radius: var(
   --nutui-radio-button-border-radius,
-  15px
+  scale-px(15px)
 ) !default;
 $radio-button-background: var(
   --nutui-radio-button-background,
@@ -1576,20 +1751,23 @@ $radio-button-background: var(
 ) !default;
 $radio-button-active-border: var(
   --nutui-radio-button-active-border,
-  1px solid $color-primary
+  scale-px(1px) solid $color-primary
 ) !default;
 $radio-button-disabled-active-color: var(
   --nutui-radio-button-disabled-active-color,
   $white
 ) !default;
-$radiogroup-radio-margin: var(--nutui-radiogroup-radio-margin, 20px) !default;
+$radiogroup-radio-margin: var(
+  --nutui-radiogroup-radio-margin,
+  scale-px(20px)
+) !default;
 $radiogroup-radio-margin-bottom: var(
   --nutui-radiogroup-radio-margin-bottom,
-  5px
+  scale-px(5px)
 ) !default;
 $radiogroup-radio-label-margin: var(
   --nutui-radiogroup-radio-label-margin,
-  0 5px
+  0 scale-px(5px)
 ) !default;
 
 // signature（✅）
@@ -1597,7 +1775,10 @@ $signature-border-color: var(
   --nutui-signature-border-color,
   $color-border
 ) !default;
-$signature-border-width: var(--nutui-signature-border-width, 1px) !default;
+$signature-border-width: var(
+  --nutui-signature-border-width,
+  scale-px(1px)
+) !default;
 $signature-height: var(--nutui-signature-height, 10rem) !default;
 $signature-background-color: var(
   --nutui-signature-background-color,
@@ -1625,42 +1806,60 @@ $fixednav-item-active-color: var(
 ) !default;
 
 // NoticeBar（✅）
-$noticebar-height: var(--nutui-noticebar-height, 36px) !default;
+$noticebar-height: var(--nutui-noticebar-height, scale-px(36px)) !default;
 $noticebar-background: var(
   --nutui-noticebar-background,
   rgba(251, 248, 220, 1)
 ) !default;
 $noticebar-color: var(--nutui-noticebar-color, #d9500b) !default;
 $noticebar-font-size: var(--nutui-noticebar-font-size, $font-size-s) !default;
-$noticebar-line-height: var(--nutui-noticebar-line-height, 24px) !default;
-$noticebar-box-padding: var(--nutui-noticebar-box-padding, 0 16px) !default;
+$noticebar-line-height: var(
+  --nutui-noticebar-line-height,
+  scale-px(24px)
+) !default;
+$noticebar-box-padding: var(
+  --nutui-noticebar-box-padding,
+  0 scale-px(16px)
+) !default;
 $noticebar-border-radius: var(--nutui-noticebar-border-radius, 0) !default;
 $noticebar-wrap-padding: var(
   --nutui-noticebar-wrapable-padding,
-  8px 16px
+  scale-px(8px) scale-px(16px)
 ) !default;
-$noticebar-icon-gap: var(--nutui-noticebar-icon-gap, 4px) !default;
+$noticebar-icon-gap: var(--nutui-noticebar-icon-gap, scale-px(4px)) !default;
 $noticebar-left-icon-width: var(
   --nutui-noticebar-left-icon-width,
-  16px
+  scale-px(16px)
 ) !default;
 $noticebar-right-icon-width: var(
   --nutui-noticebar-right-icon-width,
-  16px
+  scale-px(16px)
 ) !default;
 
 // TimeSelect（✅）
-$timeselect-date-width: var(--nutui-timeselect-date-width, 140px) !default;
-$timeselect-date-height: var(--nutui-timeselect-date-height, 40px) !default;
+$timeselect-date-width: var(
+  --nutui-timeselect-date-width,
+  scale-px(140px)
+) !default;
+$timeselect-date-height: var(
+  --nutui-timeselect-date-height,
+  scale-px(40px)
+) !default;
 $timeselect-date-active-color: var(
   --nutui-timeselect-date-active-color,
   $color-title
 ) !default;
-$timeselect-time-width: var(--nutui-timeselect-time-width, 100px) !default;
-$timeselect-time-height: var(--nutui-timeselect-time-height, 50px) !default;
+$timeselect-time-width: var(
+  --nutui-timeselect-time-width,
+  scale-px(100px)
+) !default;
+$timeselect-time-height: var(
+  --nutui-timeselect-time-height,
+  scale-px(50px)
+) !default;
 $timeselect-time-margin: var(
   --nutui-timeselect-time-margin,
-  0 10px 10px 0
+  0 scale-px(10px) scale-px(10px) 0
 ) !default;
 $timeselect-time-background: var(
   --nutui-timeselect-time-background,
@@ -1668,12 +1867,12 @@ $timeselect-time-background: var(
 ) !default;
 
 //tag（✅）
-$tag-padding: var(--nutui-tag-padding, 0px 2px) !default;
+$tag-padding: var(--nutui-tag-padding, scale-px(0px) scale-px(2px)) !default;
 $tag-font-size: var(--nutui-tag-font-size, $font-size-xxs) !default;
-$tag-border-radius: var(--nutui-tag-border-radius, 2px) !default;
-$tag-height: var(--nutui-tag-height, 14px) !default;
+$tag-border-radius: var(--nutui-tag-border-radius, scale-px(2px)) !default;
+$tag-height: var(--nutui-tag-height, scale-px(14px)) !default;
 $tag-color: var(--nutui-tag-color, #ffffff) !default;
-$tag-border-width: var(--nutui-tag-border-width, 1px) !default;
+$tag-border-width: var(--nutui-tag-border-width, scale-px(1px)) !default;
 $tag-background-color: var(--nutui-tag-background-color, $color-title) !default;
 $tag-primary-background-color: var(
   --nutui-tag-primary-background-color,
@@ -1695,14 +1894,17 @@ $tag-warning-background-color: var(
   --nutui-tag-warning-background-color,
   $color-warning
 ) !default;
-$tag-round-border-radius: var(--nutui-tag-round-border-radius, 8px) !default;
+$tag-round-border-radius: var(
+  --nutui-tag-round-border-radius,
+  scale-px(8px)
+) !default;
 $tag-mark-border-radius: var(
   --nutui-tag-mark-border-radius,
-  0 8px 8px 0
+  0 scale-px(8px) scale-px(8px) 0
 ) !default;
 
 //badge（✅）
-$badge-height: var(--nutui-badge-height, 14px) !default;
+$badge-height: var(--nutui-badge-height, scale-px(14px)) !default;
 $badge-background-color: var(
   --nutui-badge-background-color,
   $color-primary
@@ -1715,26 +1917,38 @@ $badge-color: var(--nutui-badge-color, $color-primary-text) !default;
 $badge-font-size: var(--nutui-badge-font-size, $font-size-xxxs) !default;
 $badge-border: var(
   --nutui-badge-border,
-  1px solid $color-primary-text
+  scale-px(1px) solid $color-primary-text
 ) !default;
 $badge-border-radius: var(--nutui-badge-border-radius, $badge-height) !default;
-$badge-min-width: var(--nutui-badge-min-width, 6px) !default;
-$badge-padding: var(--nutui-badge-padding, 1px 4px) !default;
-$badge-icon-padding: var(--nutui-badge-icon-padding, 2px) !default;
-$badge-icon-size: var(--nutui-badge-icon-size, 10px) !default;
+$badge-min-width: var(--nutui-badge-min-width, scale-px(6px)) !default;
+$badge-padding: var(
+  --nutui-badge-padding,
+  scale-px(1px) scale-px(4px)
+) !default;
+$badge-icon-padding: var(--nutui-badge-icon-padding, scale-px(2px)) !default;
+$badge-icon-size: var(--nutui-badge-icon-size, scale-px(10px)) !default;
 $badge-content-transform: var(
   --nutui-badge-content-transform,
   translate(50%, -50%)
 ) !default;
 $badge-z-index: var(--nutui-badge-z-index, 1) !default;
-$badge-dot-width: var(--nutui-badge-dot-width, 6px) !default;
-$badge-dot-small-width: var(--nutui-badge-dot-small-width, 4px) !default;
-$badge-dot-large-width: var(--nutui-badge-dot-large-width, 8px) !default;
-$badge-dot-border: var(--nutui-badge-dot-border, 1px solid $color-primary-text);
+$badge-dot-width: var(--nutui-badge-dot-width, scale-px(6px)) !default;
+$badge-dot-small-width: var(
+  --nutui-badge-dot-small-width,
+  scale-px(4px)
+) !default;
+$badge-dot-large-width: var(
+  --nutui-badge-dot-large-width,
+  scale-px(8px)
+) !default;
+$badge-dot-border: var(
+  --nutui-badge-dot-border,
+  scale-px(1px) solid $color-primary-text
+);
 $badge-outline-color: var(--nutui-badge-outline-color, $color-primary) !default;
 $badge-outline-border: var(
   --nutui-badge-outline-border,
-  1px solid $color-primary
+  scale-px(1px) solid $color-primary
 );
 
 //popover（✅）
@@ -1753,11 +1967,11 @@ $popover-divider-color: var(
   --nutui-popover-divider-color,
   $color-border
 ) !default;
-$popover-padding: var(--nutui-popover-padding, 8px) !default;
-$popover-item-width: var(--nutui-popover-item-width, 160px) !default;
+$popover-padding: var(--nutui-popover-padding, scale-px(8px)) !default;
+$popover-item-width: var(--nutui-popover-item-width, scale-px(160px)) !default;
 
 //progress（✅）
-$progress-height: var(--nutui-progress-height, 10px) !default;
+$progress-height: var(--nutui-progress-height, scale-px(10px)) !default;
 $progress-color: var(
   --nutui-progress-color,
   $color-primary-gradient-1
@@ -1766,7 +1980,10 @@ $progress-background: var(
   --nutui-progress-background,
   $color-background
 ) !default;
-$progress-border-radius: var(--nutui-progress-border-radius, 12px) !default;
+$progress-border-radius: var(
+  --nutui-progress-border-radius,
+  scale-px(12px)
+) !default;
 $progress-text-color: var(
   --nutui-progress-text-color,
   $color-text-help
@@ -1775,19 +1992,25 @@ $progress-text-background: var(
   --nutui-progress-text-background,
   $color-primary-gradient-1
 ) !default;
-$progress-text-padding: var(--nutui-progress-text-padding, 0 5px) !default;
-$progress-text-font-size: var(--nutui-progress-text-font-size, 13px) !default;
+$progress-text-padding: var(
+  --nutui-progress-text-padding,
+  0 scale-px(5px)
+) !default;
+$progress-text-font-size: var(
+  --nutui-progress-text-font-size,
+  scale-px(13px)
+) !default;
 $progress-text-position-top: var(
   --nutui-progress-text-position-top,
-  -4px
+  scale-px(-4px)
 ) !default;
 $progress-text-position-bottom: var(
   --nutui-progress-text-position-bottom,
-  -4px
+  scale-px(-4px)
 ) !default;
 $progress-text-border-radius: var(
   --nutui-progress-text-border-radius,
-  5px
+  scale-px(5px)
 ) !default;
 
 //pagination（✅）
@@ -1812,18 +2035,24 @@ $pagination-disable-background-color: var(
 ) !default;
 $pagination-item-border-width: var(
   --nutui-pagination-item-border-width,
-  1px
+  scale-px(1px)
 ) !default;
 $pagination-item-border-radius: var(
   --nutui-pagination-item-border-radius,
-  2px
+  scale-px(2px)
 ) !default;
 $pagination-prev-next-padding: var(
   --nutui-pagination-prev-next-padding,
-  0 12px
+  0 scale-px(12px)
+) !default;
+$pagination-lite-width: var(
+  --nutui-pagination-lite-width,
+  scale-px(40px)
+) !default;
+$pagination-lite-height: var(
+  --nutui-pagination-lite-height,
+  scale-px(20px)
 ) !default;
-$pagination-lite-width: var(--nutui-pagination-lite-width, 40px) !default;
-$pagination-lite-height: var(--nutui-pagination-lite-height, 20px) !default;
 $pagination-lite-radius: var(
   --nutui-pagination-lite-radius,
   $radius-xs
@@ -1838,19 +2067,19 @@ $pagination-lite-active-background-color: var(
 ) !default;
 
 // tabs（✅）
-$tabs-titles-height: var(--nutui-tabs-titles-height, 44px) !default;
+$tabs-titles-height: var(--nutui-tabs-titles-height, scale-px(44px)) !default;
 $tabs-titles-background-color: var(
   --nutui-tabs-titles-background-color,
   $color-background
 ) !default;
-$tabs-titles-gap: var(--nutui-tabs-titles-gap, 12px) !default;
+$tabs-titles-gap: var(--nutui-tabs-titles-gap, scale-px(12px)) !default;
 $tabs-titles-font-size: var(
   --nutui-tabs-titles-font-size,
   $font-size-base
 ) !default;
 $tabs-titles-item-min-width: var(
   --nutui-tabs-titles-item-min-width,
-  50px
+  scale-px(50px)
 ) !default;
 $tabs-titles-item-color: var(
   --nutui-tabs-titles-item-color,
@@ -1872,13 +2101,16 @@ $tabs-titles-item-active-background-color: var(
   --nutui-tabs-titles-item-active-background-color,
   $color-background-overlay
 ) !default;
-$tabs-tab-line-width: var(--nutui-tabs-tab-line-width, 12px) !default;
-$tabs-tab-line-height: var(--nutui-tabs-tab-line-height, 2px) !default;
+$tabs-tab-line-width: var(--nutui-tabs-tab-line-width, scale-px(12px)) !default;
+$tabs-tab-line-height: var(
+  --nutui-tabs-tab-line-height,
+  scale-px(2px)
+) !default;
 $tabs-tab-line-color: var(--nutui-tabs-tab-line-color, $color-primary) !default;
 $tabs-tab-line-bottom: var(--nutui-tabs-line-bottom, 15%) !default;
 $tabs-tab-line-border-radius: var(
   --nutui-tabs-line-border-radius,
-  2px
+  scale-px(2px)
 ) !default;
 $tabs-tab-line-opacity: var(--nutui-tabs-tab-line-opacity, 1) !default;
 $tabs-tab-button-border-radius: var(
@@ -1891,15 +2123,15 @@ $tabs-tab-button-active-background-color: var(
 ) !default;
 $tabs-tab-button-active-border: var(
   --nutui-tabs-button-active-border,
-  1px solid $color-primary
+  scale-px(1px) solid $color-primary
 ) !default;
 $tabs-vertical-titles-width: var(
   --nutui-tabs-vertical-titles-width,
-  100px
+  scale-px(100px)
 ) !default;
 $tabs-vertical-titles-item-height: var(
   --nutui-tabs-vertical-titles-item-height,
-  40px
+  scale-px(40px)
 ) !default;
 $tabs-vertical-tab-line-color: var(
   --nutui-tabs-vertical-tab-line-color,
@@ -1911,17 +2143,20 @@ $tabs-vertical-tab-line-color: var(
 ) !default;
 $tabs-vertical-tab-line-width: var(
   --nutui-tabs-vertical-tab-line-width,
-  3px
+  scale-px(3px)
 ) !default;
 $tabs-vertical-tab-line-height: var(
   --nutui-tabs-vertical-tab-line-height,
-  12px
+  scale-px(12px)
 ) !default;
 $tabs-titles-item-smile-bottom: var(
   --nutui-tabs-titles-item-smile-bottom,
   -10%
 ) !default;
-$tabs-tabpane-padding: var(--nutui-tabs-tabpane-padding, 24px 20px) !default;
+$tabs-tabpane-padding: var(
+  --nutui-tabs-tabpane-padding,
+  scale-px(24px) scale-px(20px)
+) !default;
 $tabs-tabpane-background-color: var(
   --nutui-tabs-tabpane-background-color,
   #fff
@@ -1929,10 +2164,10 @@ $tabs-tabpane-background-color: var(
 // indicator（✅）
 $indicator-color: var(--nutui-indicator-color, $color-primary) !default;
 $indicator-dot-color: var(--nutui-indicator-dot-color, $color-border) !default;
-$indicator-dot-size: var(--nutui-indicator-dot-size, 3px) !default;
+$indicator-dot-size: var(--nutui-indicator-dot-size, scale-px(3px)) !default;
 $indicator-dot-active-size: var(
   --nutui-indicator-dot-active-size,
-  6px
+  scale-px(6px)
 ) !default;
 $indicator-border-radius: var(
   --nutui-indicator-border-radius,
@@ -1946,21 +2181,30 @@ $menu-scroll-fixed-z-index: var(
   --nutui-menu-scroll-fixed-z-index,
   $mask-z-index
 ) !default;
-$menu-bar-line-height: var(--nutui-menu-bar-line-height, 48px) !default;
+$menu-bar-line-height: var(
+  --nutui-menu-bar-line-height,
+  scale-px(48px)
+) !default;
 $menu-bar-box-shadow: var(
   --nutui-menu-bar-box-shadow,
-  0 2px 12px rgba(89, 89, 89, 0.12)
+  0 scale-px(2px) scale-px(12px) rgba(89, 89, 89, 0.12)
 ) !default;
 $menu-bar-opened-z-index: var(--nutui-menu-bar-opened-z-index, 1000) !default;
-$menu-title-padding: var(--nutui-menu-title-padding, 0 8px) !default;
+$menu-title-padding: var(--nutui-menu-title-padding, 0 scale-px(8px)) !default;
 $menu-title-font-size: var(
   --nutui-menu-title-font-size,
   $font-size-base
 ) !default;
 $menu-title-color: var(--nutui-menu-title-color, $color-title) !default;
 $menu-container-z-index: var(--nutui-menu-container-z-index, 1000) !default;
-$menu-content-padding: var(--nutui-menu-content-padding, 12px 24px) !default;
-$menu-content-max-height: var(--nutui-menu-content-max-height, 214px) !default;
+$menu-content-padding: var(
+  --nutui-menu-content-padding,
+  scale-px(12px) scale-px(24px)
+) !default;
+$menu-content-max-height: var(
+  --nutui-menu-content-max-height,
+  scale-px(214px)
+) !default;
 $menu-content-background-color: var(
   --nutui-menu-content-background-color,
   $color-background-overlay
@@ -1977,8 +2221,11 @@ $menu-item-disabled-color: var(
   --nutui-menu-item-disabled-color,
   $color-text-disabled
 ) !default;
-$menu-item-padding: var(--nutui-menu-item-padding, 12px 0) !default;
-$menu-item-icon-margin: var(--nutui-menu-item-icon-margin, 8px) !default;
+$menu-item-padding: var(--nutui-menu-item-padding, scale-px(12px) 0) !default;
+$menu-item-icon-margin: var(
+  --nutui-menu-item-icon-margin,
+  scale-px(8px)
+) !default;
 
 // collapse（✅）
 $collapse-item-border-bottom: var(
@@ -1987,9 +2234,12 @@ $collapse-item-border-bottom: var(
 ) !default;
 $collapse-item-header-border-bottom: var(
   --nutui-collapse-item-header-border-bottom,
-  1px solid $color-border
+  scale-px(1px) solid $color-border
+) !default;
+$collapse-item-padding: var(
+  --nutui-collapse-item-padding,
+  scale-px(13px) scale-px(26px)
 ) !default;
-$collapse-item-padding: var(--nutui-collapse-item-padding, 13px 26px) !default;
 $collapse-item-color: var(--nutui-collapse-item-color, $color-title) !default;
 $collapse-item-disabled-color: var(
   --nutui-collapse-item-disabled-color,
@@ -2001,7 +2251,7 @@ $collapse-item-font-size: var(
 ) !default;
 $collapse-item-line-height: var(
   --nutui-collapse-item-line-height,
-  24px
+  scale-px(24px)
 ) !default;
 $collapse-item-extra-color: var(
   --nutui-collapse-item-extra-color,
@@ -2009,7 +2259,7 @@ $collapse-item-extra-color: var(
 ) !default;
 $collapse-wrapper-content-padding: var(
   --nutui-collapse-wrapper-content-padding,
-  12px 26px
+  scale-px(12px) scale-px(26px)
 ) !default;
 $collapse-wrapper-content-color: var(
   --nutui-collapse-wrapper-content-color,
@@ -2030,14 +2280,17 @@ $collapse-wrapper-content-background-color: var(
 
 // searchbar（✅）
 $searchbar-width: var(--nutui-searchbar-width, 100%) !default;
-$searchbar-padding: var(--nutui-searchbar-padding, 1px 8px) !default;
+$searchbar-padding: var(
+  --nutui-searchbar-padding,
+  scale-px(1px) scale-px(8px)
+) !default;
 $searchbar-background: var(
   --nutui-searchbar-background,
   $color-background-sunken
 ) !default;
 $searchbar-color: var(--nutui-searchbar-color, $color-title) !default;
-$searchbar-gap: var(--nutui-searchbar-gap, 12px) !default;
-$searchbar-inner-gap: var(--nutui-searchbar-inner-gap, 8px) !default;
+$searchbar-gap: var(--nutui-searchbar-gap, scale-px(12px)) !default;
+$searchbar-inner-gap: var(--nutui-searchbar-inner-gap, scale-px(8px)) !default;
 $searchbar-font-size: var(
   --nutui-searchbar-font-size,
   $font-size-base
@@ -2048,17 +2301,20 @@ $searchbar-content-background: var(
 ) !default;
 $searchbar-content-border-radius: var(
   --nutui-searchbar-content-border-radius,
-  8px
+  scale-px(8px)
 ) !default;
 $searchbar-content-round-border-radius: var(
   --nutui-searchbar-content-round-border-radius,
-  19px
+  scale-px(19px)
+) !default;
+$searchbar-icon-size: var(--nutui-searchbar-icon-size, scale-px(20px)) !default;
+$searchbar-input-height: var(
+  --nutui-searchbar-input-height,
+  scale-px(38px)
 ) !default;
-$searchbar-icon-size: var(--nutui-searchbar-icon-size, 20px) !default;
-$searchbar-input-height: var(--nutui-searchbar-input-height, 38px) !default;
 $searchbar-input-padding: var(
   --nutui-searchbar-input-padding,
-  0 0 0 8px
+  0 0 0 scale-px(8px)
 ) !default;
 $searchbar-input-text-color: var(
   --nutui-searchbar-input-text-color,
@@ -2074,14 +2330,14 @@ $searchbar-input-text-align: var(
 ) !default;
 
 // segmented
-$segmented-height: var(--nutui-segmented-height, 24px) !default;
+$segmented-height: var(--nutui-segmented-height, scale-px(24px)) !default;
 $segmented-padding: var(--nutui-segmented-padding, $spacing-xxxs) !default;
 $segmented-border-radius: var(--nutui-segmented-radius, $radius-xs) !default;
 $segmented-background: var(
   --nutui-segmented-background,
   $color-mask-part
 ) !default;
-$segmented-item-height: var(--nutui-segmented-height, 20px) !default;
+$segmented-item-height: var(--nutui-segmented-height, scale-px(20px)) !default;
 $segmented-item-padding: var(
   --nutui-segmented-item-padding,
   0 $spacing-xs
@@ -2105,17 +2361,26 @@ $segmented-icon-margin-right: var(
 ) !default;
 
 // empty（✅）
-$empty-padding: var(--nutui-empty-padding, 32px 40px) !default;
-$empty-image-size: var(--nutui-empty-image-size, 160px) !default;
-$empty-image-small-size: var(--nutui-empty-image-small-size, 120px) !default;
-$empty-title-margin-top: var(--nutui-empty-title-margin-top, 0px) !default;
+$empty-padding: var(
+  --nutui-empty-padding,
+  scale-px(32px) scale-px(40px)
+) !default;
+$empty-image-size: var(--nutui-empty-image-size, scale-px(160px)) !default;
+$empty-image-small-size: var(
+  --nutui-empty-image-small-size,
+  scale-px(120px)
+) !default;
+$empty-title-margin-top: var(
+  --nutui-empty-title-margin-top,
+  scale-px(0px)
+) !default;
 $empty-background-color: var(
   --nutui-empty-background-color,
   $color-background-overlay
 ) !default;
 $empty-title-margin-bottom: var(
   --nutui-empty-title-margin-bottom,
-  12px
+  scale-px(12px)
 ) !default;
 $empty-title-line-height: var(
   --nutui-empty-title-line-height,
@@ -2128,32 +2393,50 @@ $empty-description-line-height: var(
 
 // cascader（✅）
 $cascader-font-size: var(--nutui-cascader-font-size, $font-size-base) !default;
-$cascader-pane-height: var(--nutui-cascader-pane-height, 342px) !default;
-$cascader-pane-paddingTop: var(--nutui-cascader-pane-paddingTop, 10px) !default;
+$cascader-pane-height: var(
+  --nutui-cascader-pane-height,
+  scale-px(342px)
+) !default;
+$cascader-pane-paddingTop: var(
+  --nutui-cascader-pane-paddingTop,
+  scale-px(10px)
+) !default;
 $cascader-icon-checklist-marginLeft: var(
   --nutui-cascader-icon-checklist-marginLeft,
-  10px
+  scale-px(10px)
 ) !default;
 $cascader-tabs-item-padding: var(
   --nutui-cascader-tabs-item-padding,
-  0 10px
+  0 scale-px(10px)
 ) !default;
 $cascader-bar-padding: var(
   --nutui-cascader-bar-padding,
-  24px 20px 17px
+  scale-px(24px) scale-px(20px) scale-px(17px)
 ) !default;
 $cascader-bar-font-size: var(
   --nutui-cascader-bar-font-size,
   $font-size-xl
 ) !default;
-$cascader-bar-line-height: var(--nutui-cascader-bar-line-height, 20px) !default;
+$cascader-bar-line-height: var(
+  --nutui-cascader-bar-line-height,
+  scale-px(20px)
+) !default;
 $cascader-bar-color: var(--nutui-cascader-bar-color, $color-title) !default;
-$cascader-item-height: var(--nutui-cascader-item-height, 40px) !default;
-$cascader-item-padding: var(--nutui-cascader-item-padding, 10px 20px) !default;
-$cascader-item-margin: var(--nutui-cascader-item-margin, 0px) !default;
+$cascader-item-height: var(
+  --nutui-cascader-item-height,
+  scale-px(40px)
+) !default;
+$cascader-item-padding: var(
+  --nutui-cascader-item-padding,
+  scale-px(10px) scale-px(20px)
+) !default;
+$cascader-item-margin: var(
+  --nutui-cascader-item-margin,
+  scale-px(0px)
+) !default;
 $cascader-item-border-bottom: var(
   --nutui-cascader-item-border-bottom,
-  0px solid $color-border
+  scale-px(0px) solid $color-border
 ) !default;
 $cascader-item-color: var(--nutui-cascader-item-color, $color-title) !default;
 $cascader-item-font-size: var(
@@ -2182,10 +2465,13 @@ $form-item-label-font-size: var(
   --nutui-form-item-label-font-size,
   $font-size-s
 ) !default;
-$form-item-label-width: var(--nutui-form-item-label-width, 90px) !default;
+$form-item-label-width: var(
+  --nutui-form-item-label-width,
+  scale-px(90px)
+) !default;
 $form-item-label-margin-right: var(
   --nutui-form-item-label-margin-right,
-  10px
+  scale-px(10px)
 ) !default;
 $form-item-label-text-align: var(
   --nutui-form-item-label-text-align,
@@ -2193,7 +2479,7 @@ $form-item-label-text-align: var(
 ) !default;
 $form-item-required-margin-right: var(
   --nutui-form-item-required-margin-right,
-  4px
+  scale-px(4px)
 ) !default;
 $form-item-body-font-size: var(
   --nutui-form-item-body-font-size,
@@ -2221,15 +2507,15 @@ $skeleton-background: var(
 $skeleton-line-width: var(--nutui-skeleton-line-width, 100%) !default;
 $skeleton-line-small-height: var(
   --nutui-skeleton-line-small-height,
-  16px
+  scale-px(16px)
 ) !default;
 $skeleton-line-normal-height: var(
   --nutui-skeleton-line-normal-height,
-  24px
+  scale-px(24px)
 ) !default;
 $skeleton-line-large-height: var(
   --nutui-skeleton-line-large-height,
-  32px
+  scale-px(32px)
 ) !default;
 $skeleton-line-border-radius: var(
   --nutui-skeleton-line-border-radius,
@@ -2237,10 +2523,10 @@ $skeleton-line-border-radius: var(
 ) !default;
 
 // card（✅）
-$card-border-radius: var(--nutui-card-border-radius, 4px) !default;
+$card-border-radius: var(--nutui-card-border-radius, scale-px(4px)) !default;
 
 // grid（✅）
-$grid-border-width: var(--nutui-grid-border-width, 0px) !default;
+$grid-border-width: var(--nutui-grid-border-width, scale-px(0px)) !default;
 $grid-border-color: var(--nutui-grid-border-color, $color-border) !default;
 $grid-item-border-radius: var(
   --nutui-grid-item-border-radius,
@@ -2248,13 +2534,16 @@ $grid-item-border-radius: var(
 ) !default;
 $grid-item-content-padding: var(
   --nutui-grid-item-content-padding,
-  16px 8px
+  scale-px(16px) scale-px(8px)
 ) !default;
 $grid-item-content-bg-color: var(
   --nutui-grid-item-content-bg-color,
   var(--nutui-gray-1)
 ) !default;
-$grid-item-text-margin: var(--nutui-grid-item-text-margin, 8px) !default;
+$grid-item-text-margin: var(
+  --nutui-grid-item-text-margin,
+  scale-px(8px)
+) !default;
 $grid-item-text-color: var(--nutui-grid-item-text-color, $color-title) !default;
 $grid-item-text-font-size: var(
   --nutui-grid-item-text-font-size,
@@ -2263,7 +2552,7 @@ $grid-item-text-font-size: var(
 
 // table（✅）
 $table-border-color: var(--nutui-table-border-color, $color-border) !default;
-$table-cols-padding: var(--nutui-table-cols-padding, 10px) !default;
+$table-cols-padding: var(--nutui-table-cols-padding, scale-px(10px)) !default;
 $table-tr-even-bg-color: var(
   --nutui-table-tr-even-bg-color,
   $color-background
@@ -2271,17 +2560,20 @@ $table-tr-even-bg-color: var(
 $table-tr-odd-bg-color: var(--nutui-table-tr-odd-bg-color, $white) !default;
 $table-sticky-left-shadow: var(
   --nutui-table-sticky-left-shadow,
-  4px 0 8px 0 rgba(0, 0, 0, 0.1)
+  scale-px(4px) 0 scale-px(8px) 0 rgba(0, 0, 0, 0.1)
 ) !default;
 $table-sticky-right-shadow: var(
   --nutui-table-sticky-right-shadow,
-  -4px 0 8px 0 rgba(0, 0, 0, 0.1)
+  scale-px(-4px) 0 scale-px(8px) 0 rgba(0, 0, 0, 0.1)
 ) !default;
 
 // navbar（✅）
 $navbar-width: var(--nutui-navbar-width, 100%) !default;
-$navbar-height: var(--nutui-navbar-height, 44px) !default;
-$navbar-margin-bottom: var(--nutui-navbar-margin-bottom, 20px) !default;
+$navbar-height: var(--nutui-navbar-height, scale-px(44px)) !default;
+$navbar-margin-bottom: var(
+  --nutui-navbar-margin-bottom,
+  scale-px(20px)
+) !default;
 $navbar-background: var(--nutui-navbar-background, $white) !default;
 $navbar-box-shadow: var(--nutui-navbar-box-shadow, none) !default;
 $navbar-color: var(--nutui-navbar-color, $color-title) !default;
@@ -2305,9 +2597,12 @@ $sidebar-background-color: var(
   $color-background
 ) !default;
 $sidebar-border-radius: var(--nutui-sidebar-border-radius, 0) !default;
-$sidebar-width: var(--nutui-sidebar-width, 104px) !default;
-$sidebar-max-width: var(--nutui-sidebar-max-width, 128px) !default;
-$sidebar-title-height: var(--nutui-sidebar-title-height, 52px) !default;
+$sidebar-width: var(--nutui-sidebar-width, scale-px(104px)) !default;
+$sidebar-max-width: var(--nutui-sidebar-max-width, scale-px(128px)) !default;
+$sidebar-title-height: var(
+  --nutui-sidebar-title-height,
+  scale-px(52px)
+) !default;
 $sidebar-inactive-font-size: var(
   --nutui-sidebar-inactive-font-size,
   $font-size-base
@@ -2325,7 +2620,10 @@ $sidebar-active-color: var(
   $color-primary
 ) !default;
 $sidebar-item-background: var(--nutui-sidebar-item-background, $white) !default;
-$sidebar-item-padding: var(--nutui-sidebar-item-padding, 24px 20px) !default;
+$sidebar-item-padding: var(
+  --nutui-sidebar-item-padding,
+  scale-px(24px) scale-px(20px)
+) !default;
 
 // elevator（✅）
 $elevator-list-bg-color: var(--nutui-elevator-list-bg-color, $white) !default;
@@ -2336,11 +2634,11 @@ $elevator-list-font-size: var(
 $elevator-list-color: var(--nutui-elevator-list-color, $color-title) !default;
 $elevator-list-item-padding: var(
   --nutui-elevator-list-item-padding,
-  0 36px 0 20px
+  0 scale-px(36px) 0 scale-px(20px)
 ) !default;
 $elevator-list-item-name-height: var(
   --nutui-elevator-list-item-name-height,
-  34px
+  scale-px(34px)
 ) !default;
 
 $elevator-list-item-code-font-size: var(
@@ -2357,19 +2655,19 @@ $elevator-list-item-code-font-weight: var(
 ) !default;
 $elevator-list-item-code-height: var(
   --nutui-elevator-list-item-code-height,
-  34px
+  scale-px(34px)
 ) !default;
 $elevator-list-item-code-width: var(
   --nutui-elevator-list-item-code-width,
-  34px
+  scale-px(34px)
 ) !default;
 $elevator-list-item-code-border-bottom: var(
   --nutui-elevator-list-item-code-border-bottom,
-  1px solid $color-border
+  scale-px(1px) solid $color-border
 ) !default;
 
-$elevator-list-item-code-current-box-shadow: 0 3px 3px 1px
-  rgba(240, 240, 240, 1) !default;
+$elevator-list-item-code-current-box-shadow: 0 scale-px(3px) scale-px(3px)
+  scale-px(1px) rgba(240, 240, 240, 1) !default;
 $elevator-list-item-code-current-bg-color: var(
   --nutui-elevator-list-item-code-current-bg-color,
   $color-text-disabled
@@ -2380,15 +2678,15 @@ $elevator-list-item-code-current-border-radius: var(
 ) !default;
 $elevator-list-item-code-current-width: var(
   --nutui-elevator-list-item-code-current-width,
-  45px
+  scale-px(45px)
 ) !default;
 $elevator-list-item-code-current-height: var(
   --nutui-elevator-list-item-code-current-height,
-  45px
+  scale-px(45px)
 ) !default;
 $elevator-list-item-code-current-right: var(
   --nutui-elevator-list-item-code-current-right,
-  60px
+  scale-px(60px)
 ) !default;
 $elevator-list-item-code-current-top: var(
   --nutui-elevator-list-item-code-current-top,
@@ -2398,7 +2696,7 @@ $elevator-list-item-code-current-color: var(
   --nutui-elevator-list-item-code-current-color,
   $white
 ) !default;
-$elevator-bars-right: var(--nutui-elevator-bars-right, 16px) !default;
+$elevator-bars-right: var(--nutui-elevator-bars-right, scale-px(16px)) !default;
 $elevator-bars-top: var(--nutui-elevator-bars-top, 50%) !default;
 $elevator-bars-transform: var(
   --nutui-elevator-bars-transform,
@@ -2427,17 +2725,20 @@ $elevator-list-fixed-bg-color: var(
 ) !default;
 $elevator-list-fixed-box-shadow: var(
   --nutui-elevator-list-fixed-box-shadow,
-  0 0 10px #eee
+  0 0 scale-px(10px) #eee
 ) !default;
 
 // list（✅）
-$list-item-margin: var(--nutui-list-item-margin, 0 0 10px 0) !default;
+$list-item-margin: var(--nutui-list-item-margin, 0 0 scale-px(10px) 0) !default;
 
 //addresslist
 $addresslist-bg: var(--nutui-addresslist-bg, #fff) !default;
 $addresslist-border: var(--nutui-addresslist-border, #f0f0f0) !default;
 $addresslist-font-color: var(--nutui-addresslist-font-color, #333333) !default;
-$addresslist-font-size: var(--nutui-addresslist-font-size, 16px) !default;
+$addresslist-font-size: var(
+  --nutui-addresslist-font-size,
+  scale-px(16px)
+) !default;
 $addresslist-mask-bg: var(
   --nutui-addresslist-mask-bg,
   rgba(0, 0, 0, 0.4)
@@ -2448,7 +2749,7 @@ $addresslist-addr-font-color: var(
 ) !default;
 $addresslist-addr-font-size: var(
   --nutui-addresslist-addr-font-size,
-  12px
+  scale-px(12px)
 ) !default;
 $addresslist-set-bg: var(--nutui-addresslist-set-bg, #f5a623) !default;
 $addresslist-del-bg: var(--nutui-addresslist-del-bg, #e1251b) !default;
@@ -2492,14 +2793,23 @@ $watermark-z-index: var(
 ) !default;
 
 // TrendArrow
-$trendarrow-font-size: var(--nutui-trendarrow-font-size, 14px) !default;
-$trendarrow-icon-margin: var(--nutui-trendarrow-icon-margin, 4px) !default;
+$trendarrow-font-size: var(
+  --nutui-trendarrow-font-size,
+  scale-px(14px)
+) !default;
+$trendarrow-icon-margin: var(
+  --nutui-trendarrow-icon-margin,
+  scale-px(4px)
+) !default;
 
 // animatingnumbers（✅）
 $countup-width: var(--nutui-countup-width, auto) !default;
-$countup-height: var(--nutui-countup-height, 32px) !default;
-$countup-base-size: var(--nutui-countup-base-size, 18px) !default;
-$countup-border-radius: var(--nutui-countup-border-radius, 4px) !default;
+$countup-height: var(--nutui-countup-height, scale-px(32px)) !default;
+$countup-base-size: var(--nutui-countup-base-size, scale-px(18px)) !default;
+$countup-border-radius: var(
+  --nutui-countup-border-radius,
+  scale-px(4px)
+) !default;
 $countup-lr-margin: var(--nutui-countup-lr-margin, 0) !default;
 $countup-bg-color: var(--nutui-countup-bg-color, inherit) !default;
 $countup-color: var(--nutui-countup-color, $color-title) !default;
@@ -2520,21 +2830,30 @@ $row-content-light-background-color: var(
 ) !default;
 $row-content-border-radius: var(
   --nutui-row-content-border-radius,
-  6px
+  scale-px(6px)
+) !default;
+$row-content-height: var(--nutui-row-content-height, scale-px(50px)) !default;
+$row-content-line-height: var(
+  --nutui-row-content-line-height,
+  scale-px(40px)
 ) !default;
-$row-content-height: var(--nutui-row-content-height, 50px) !default;
-$row-content-line-height: var(--nutui-row-content-line-height, 40px) !default;
 $col-default-margin-bottom: var(
   --nutui-col-default-margin-bottom,
-  15px
+  scale-px(15px)
 ) !default;
 
 // TrendArrow
-$trendarrow-font-size: var(--nutui-trendarrow-font-size, 14px) !default;
-$trendarrow-icon-margin: var(--nutui-trendarrow-icon-margin, 4px) !default;
+$trendarrow-font-size: var(
+  --nutui-trendarrow-font-size,
+  scale-px(14px)
+) !default;
+$trendarrow-icon-margin: var(
+  --nutui-trendarrow-icon-margin,
+  scale-px(4px)
+) !default;
 
 // Space
-$space-gap: var(--nutui-space-gap, 8px) !default;
+$space-gap: var(--nutui-space-gap, scale-px(8px)) !default;
 
 // loading
 $loading-icon-color: var(--nutui-loading-icon-color, $color-text-help) !default;
@@ -2547,15 +2866,18 @@ $loading-lottie-background: var(
 ) !default;
 
 // ResultPage
-$resultpage-width: var(--nutui-resultpage-width, 240px) !default;
-$resultpage-icon-size: var(--nutui-resultpage-icon-size, 36px) !default;
+$resultpage-width: var(--nutui-resultpage-width, scale-px(240px)) !default;
+$resultpage-icon-size: var(
+  --nutui-resultpage-icon-size,
+  scale-px(36px)
+) !default;
 $resultpage-icon-margin-bottom: var(
   --nutui-resultpage-icon-margin-bottom,
-  12px
+  scale-px(12px)
 ) !default;
 $resultpage-title-margin-bottom: var(
   --nutui-resultpage-title-margin-bottom,
-  12px
+  scale-px(12px)
 ) !default;
 $resultpage-title-font-size: var(
   --nutui-resultpage-title-font-size,
@@ -2575,9 +2897,9 @@ $resultpage-description-color: var(
 ) !default;
 $resultpage-description-line-height: var(
   --nutui-resultpage-description-line-height,
-  20px
+  scale-px(20px)
 ) !default;
 $resultpage-actions-margin-top: var(
   --nutui-resultpage-actions-margin-top,
-  16px
+  scale-px(16px)
 ) !default;
diff --git a/src/utils/index.taro.ts b/src/utils/index.taro.ts
index dba3cac020..6c90276045 100644
--- a/src/utils/index.taro.ts
+++ b/src/utils/index.taro.ts
@@ -26,6 +26,7 @@ export * from './taro/px-transform'
 export * from './raf'
 export * from './render'
 export * from './rubberband'
+export * from './scale-f.taro'
 export * from './sleep'
 export * from './supports-passive'
 export * from './to-array'
diff --git a/src/utils/index.ts b/src/utils/index.ts
index 0cf6130d54..ca3ea7f91a 100644
--- a/src/utils/index.ts
+++ b/src/utils/index.ts
@@ -20,6 +20,7 @@ export * from './px-check'
 export * from './raf'
 export * from './render'
 export * from './rubberband'
+export * from './scale-f'
 export * from './sleep'
 export * from './supports-passive'
 export * from './to-array'
diff --git a/src/utils/scale-f.taro.ts b/src/utils/scale-f.taro.ts
new file mode 100644
index 0000000000..35a15c9678
--- /dev/null
+++ b/src/utils/scale-f.taro.ts
@@ -0,0 +1,20 @@
+export let scale = 1
+
+export async function getScaleF() {
+  return 1
+}
+
+export function setScaleF() {
+  scale = 1
+  return scale
+}
+
+export async function refreshScaleF() {
+  scale = 1
+  return scale
+}
+
+export function initScaleF() {
+  scale = 1
+  return () => {}
+}
diff --git a/src/utils/scale-f.ts b/src/utils/scale-f.ts
new file mode 100644
index 0000000000..9c2dcbcec3
--- /dev/null
+++ b/src/utils/scale-f.ts
@@ -0,0 +1,110 @@
+import { canUseDom } from './can-use-dom'
+
+type NativeScaleResponse = {
+  status?: string
+  data?: {
+    scale?: number | string
+  }
+}
+
+type NativeCaller = (
+  plugin: string,
+  method: string,
+  params: string,
+  extra: string
+) => Promise<NativeScaleResponse>
+
+declare global {
+  interface Window {
+    jmfe?: {
+      callNative?: NativeCaller
+    }
+  }
+}
+
+export let scale = 1
+
+// 站外兜底规则：按屏宽计算缩放系数。
+function getScaleByViewport() {
+  if (!canUseDom) return 1
+  const deviceWidth = window.innerWidth
+
+  if (!deviceWidth) return 1
+
+  if (deviceWidth >= 600) {
+    return 1.2
+  }
+
+  if (deviceWidth >= 375 && deviceWidth < 600) {
+    const ratio = deviceWidth / 375
+    return ratio >= 1.17 ? 1.17 : ratio
+  }
+
+  return 1
+}
+
+// 站内场景：优先走原生能力获取缩放系数。
+async function getScaleByNative() {
+  if (!canUseDom || !window.jmfe?.callNative) return null
+
+  try {
+    const res = await window.jmfe.callNative(
+      'DongScreenAdapterPlugin',
+      'getScale',
+      JSON.stringify({}),
+      ''
+    )
+    if (res?.status === '0' && res.data?.scale !== undefined) {
+      const parsed = Number(res.data.scale)
+      if (Number.isFinite(parsed) && parsed > 0) {
+        return parsed
+      }
+    }
+  } catch (error) {
+    // ignore native failures and fallback to viewport rule
+  }
+
+  return null
+}
+
+// 统一对外获取缩放系数：站内优先，失败时走站外规则。
+export async function getScaleF() {
+  const nativeScale = await getScaleByNative()
+  if (nativeScale) return nativeScale
+  return getScaleByViewport()
+}
+
+// 同步设置当前缩放值，并写入 CSS 变量 --scale-f。
+export function setScaleF(nextScale: number) {
+  const validScale = Number.isFinite(nextScale) && nextScale > 0 ? nextScale : 1
+  scale = validScale
+  if (canUseDom) {
+    document.documentElement.style.setProperty('--scale-f', `${validScale}`)
+  }
+  return scale
+}
+
+// 刷新缩放值，仅在值变化时更新，避免重复写样式。
+export async function refreshScaleF() {
+  const nextScale = await getScaleF()
+  if (!scale || nextScale !== scale) {
+    setScaleF(nextScale)
+  }
+  return scale
+}
+
+// 初始化缩放监听：首次执行一次，并在窗口 resize 时自动刷新。
+export function initScaleF() {
+  if (!canUseDom) return () => {}
+
+  const handler = () => {
+    refreshScaleF()
+  }
+
+  handler()
+  window.addEventListener('resize', handler)
+
+  return () => {
+    window.removeEventListener('resize', handler)
+  }
+}

From 402c19cd8847ab6460ecfcc60868ef76e5521be6 Mon Sep 17 00:00:00 2001
From: songchenglin3 <353833373@qq.com>
Date: Thu, 7 May 2026 20:12:14 +0800
Subject: [PATCH 03/18] =?UTF-8?q?feat:=20=E5=A2=9E=E5=8A=A0=E8=80=81?=
 =?UTF-8?q?=E5=B9=B4=E7=89=88\=E5=A4=A7=E5=AD=97=E7=89=88=E5=A4=84?=
 =?UTF-8?q?=E7=90=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/packages/address/address.scss             |  10 +-
 src/packages/audio/audio.scss                 |   2 +-
 src/packages/calendar/calendar.scss           |   2 +-
 src/packages/calendarcard/calendarcard.scss   |   2 +-
 src/packages/card/card.scss                   |   4 +-
 src/packages/checkbox/checkbox.scss           |   4 +-
 src/packages/fixednav/fixednav.scss           |  58 +++---
 .../hoverbuttonitem/hoverbuttonitem.scss      |   6 +-
 src/packages/input/input.scss                 |   2 +-
 src/packages/navbar/navbar.scss               |   2 +-
 src/packages/pulltorefresh/pulltorefresh.scss |   2 +-
 src/packages/range/range.scss                 |   4 +-
 src/packages/rate/rate.scss                   |   4 +-
 src/packages/searchbar/searchbar.scss         |   6 +-
 src/packages/segmented/segmented.scss         |   2 +-
 src/packages/skeleton/skeleton.scss           |   2 +-
 src/packages/tabbar/tabbar.scss               |   2 +-
 src/packages/tabbaritem/tabbaritem.scss       |   2 +-
 src/packages/tabs/tabs.scss                   |   2 +-
 src/packages/uploader/uploader.scss           |   6 +-
 src/packages/virtuallist/virtuallist.scss     |   2 +-
 src/sites/assets/styles/highlight.scss        |   2 +-
 src/styles/variables.scss                     | 113 ++++++------
 src/utils/index.taro.ts                       |   1 -
 src/utils/scale-f.taro.ts                     |  20 ---
 src/utils/scale-f.ts                          | 167 ++++++++++++++++--
 26 files changed, 272 insertions(+), 157 deletions(-)
 delete mode 100644 src/utils/scale-f.taro.ts

diff --git a/src/packages/address/address.scss b/src/packages/address/address.scss
index 1f9b2d11ef..521b988cca 100644
--- a/src/packages/address/address.scss
+++ b/src/packages/address/address.scss
@@ -41,7 +41,7 @@
       text-align: center;
       background: $button-primary-background-color;
       border-radius: scale-px(21px);
-      font-size: scale-px(15px);
+      font-size: $font-size-l;
       color: $color-primary-text;
     }
   }
@@ -49,7 +49,7 @@
 
 .nut-address {
   &-title {
-    font-size: scale-px(14px);
+    font-size: $font-size-base;
     font-weight: 500;
     padding: scale-px(16px) scale-px(16px) scale-px(12px) scale-px(16px);
   }
@@ -64,7 +64,7 @@
       align-items: center;
       width: scale-px(63px);
       height: scale-px(28px);
-      font-size: scale-px(12px);
+      font-size: $font-size-s;
       border-radius: scale-px(4px);
       margin-bottom: scale-px(7px);
       /* #ifdef harmony dynamic*/
@@ -97,7 +97,7 @@
     align-items: center;
     border-bottom: scale-px(1px) solid $color-border;
     &-item {
-      font-size: scale-px(12px);
+      font-size: $font-size-s;
       display: inline-block;
       height: scale-px(28px);
       line-height: scale-px(28px);
@@ -147,7 +147,7 @@
         align-items: center;
         width: scale-px(16px);
         height: scale-px(16px);
-        font-size: scale-px(10px);
+        font-size: $font-size-xxs;
         border-radius: scale-px(16px);
         margin-bottom: scale-px(2px);
         color: $color-text-help;
diff --git a/src/packages/audio/audio.scss b/src/packages/audio/audio.scss
index efd4939a90..a9c643ade6 100644
--- a/src/packages/audio/audio.scss
+++ b/src/packages/audio/audio.scss
@@ -49,7 +49,7 @@
 
     .time {
       min-width: scale-px(50px);
-      font-size: scale-px(12px);
+      font-size: $font-size-s;
       text-align: center;
     }
 
diff --git a/src/packages/calendar/calendar.scss b/src/packages/calendar/calendar.scss
index ab41cff0ed..0f8e728459 100644
--- a/src/packages/calendar/calendar.scss
+++ b/src/packages/calendar/calendar.scss
@@ -138,7 +138,7 @@
       position: absolute;
       bottom: scale-px(5px);
       width: 100%;
-      font-size: scale-px(12px);
+      font-size: $font-size-s;
       line-height: scale-px(14px);
     }
 
diff --git a/src/packages/calendarcard/calendarcard.scss b/src/packages/calendarcard/calendarcard.scss
index 6f94b3f943..a2cfafc5af 100644
--- a/src/packages/calendarcard/calendarcard.scss
+++ b/src/packages/calendarcard/calendarcard.scss
@@ -60,7 +60,7 @@
       justify-content: center;
       width: 100%;
       height: scale-px(12px);
-      font-size: scale-px(12px);
+      font-size: $font-size-s;
       line-height: scale-px(12px);
     }
 
diff --git a/src/packages/card/card.scss b/src/packages/card/card.scss
index faa2081ec8..eb6cb1000f 100644
--- a/src/packages/card/card.scss
+++ b/src/packages/card/card.scss
@@ -28,7 +28,7 @@
     &-title {
       @include moreline-ellipsis();
       line-height: 1.5;
-      font-size: scale-px(14px);
+      font-size: $font-size-base;
       color: $color-title;
     }
 
@@ -71,7 +71,7 @@
       &-name {
         line-height: 1.5;
         color: $color-text;
-        font-size: scale-px(12px);
+        font-size: $font-size-s;
         padding-top: scale-px(4px);
       }
     }
diff --git a/src/packages/checkbox/checkbox.scss b/src/packages/checkbox/checkbox.scss
index 491d8cd40e..441eea8bc3 100644
--- a/src/packages/checkbox/checkbox.scss
+++ b/src/packages/checkbox/checkbox.scss
@@ -11,7 +11,7 @@
   }
 
   &-icon-wrap {
-    font-size: scale-px(0px);
+    font-size: 0px;
     line-height: scale-px(0px);
     border-radius: 50%;
     box-shadow: scale-px(0px) scale-px(2px) scale-px(4px) scale-px(0px)
@@ -126,7 +126,7 @@
 
     .nut-icon {
       position: absolute;
-      font-size: scale-px(12px);
+      font-size: $font-size-s;
       width: scale-px(12px);
       height: scale-px(12px);
 
diff --git a/src/packages/fixednav/fixednav.scss b/src/packages/fixednav/fixednav.scss
index de82c6d945..b24e615092 100644
--- a/src/packages/fixednav/fixednav.scss
+++ b/src/packages/fixednav/fixednav.scss
@@ -5,7 +5,7 @@
   position: fixed;
   z-index: $fixednav-index;
   display: inline-block;
-  height: scale-px(5scale-px(0px));
+  height: scale-px(50px);
 
   &.active {
     .nut-fixednav-btn {
@@ -29,7 +29,7 @@
     box-sizing: border-box;
     position: absolute;
     z-index: $fixednav-index;
-    width: scale-px(7scale-px(0px));
+    width: scale-px(70px);
     height: 100%;
     background: $fixednav-button-background;
     box-shadow: scale-px(0px) scale-px(2px) scale-px(4px) scale-px(0px)
@@ -39,8 +39,8 @@
     justify-content: center;
 
     .text {
-      width: scale-px(2scale-px(4px));
-      line-height: scale-px(1scale-px(3px));
+      width: scale-px(24px);
+      line-height: scale-px(13px);
       font-size: $font-size-s;
       color: #fff;
       flex-shrink: 0;
@@ -71,18 +71,18 @@
       flex-direction: column;
       justify-content: center;
       align-items: center;
-      min-width: scale-px(5scale-px(0px));
+      min-width: scale-px(50px);
       flex-shrink: 0;
       color: $fixednav-color;
 
       .nut-fixednav-list-text {
-        font-size: scale-px(1scale-px(0px));
+        font-size: $font-size-xxs;
       }
     }
 
     &-image {
-      width: scale-px(2scale-px(0px));
-      height: scale-px(2scale-px(0px));
+      width: scale-px(20px);
+      height: scale-px(20px);
       margin-bottom: scale-px(2px);
     }
   }
@@ -91,8 +91,7 @@
     right: 0;
     .nut-fixednav-btn {
       right: 0;
-      border-radius: scale-px(4scale-px(5px)) scale-px(0px) scale-px(0px)
-        scale-px(4scale-px(5px));
+      border-radius: scale-px(45px) 0 0 scale-px(45px);
       .nut-icon {
         margin-right: scale-px(5px);
         transform: rotate(0deg);
@@ -101,11 +100,10 @@
     .nut-fixednav-list {
       right: 0;
       transform: translateX(100%);
-      border-radius: scale-px(2scale-px(5px)) scale-px(0px) scale-px(0px)
-        scale-px(2scale-px(5px));
+      border-radius: scale-px(25px) 0 0 scale-px(25px);
       padding: {
-        left: scale-px(2scale-px(0px));
-        right: scale-px(8scale-px(0px));
+        left: scale-px(20px);
+        right: scale-px(80px);
       }
     }
   }
@@ -115,7 +113,7 @@
     .nut-fixednav-btn {
       flex-direction: row-reverse;
       left: 0;
-      border-radius: 0 scale-px(4scale-px(5px)) scale-px(4scale-px(5px)) 0;
+      border-radius: 0 scale-px(45px) scale-px(45px) 0;
       .nut-icon {
         margin-left: scale-px(5px);
         transform: rotate(180deg);
@@ -125,11 +123,10 @@
     .nut-fixednav-list {
       transform: translateX(-100%);
       left: 0;
-      border-radius: scale-px(0px) scale-px(2scale-px(5px))
-        scale-px(2scale-px(5px)) scale-px(0px);
+      border-radius: 0 scale-px(25px) scale-px(25px) 0;
       padding: {
-        left: scale-px(8scale-px(0px));
-        right: scale-px(2scale-px(0px));
+        left: scale-px(80px);
+        right: scale-px(20px);
       }
     }
   }
@@ -155,8 +152,7 @@
   &-btn {
     right: auto;
     left: 0;
-    border-radius: scale-px(0px) scale-px(4scale-px(5px))
-      scale-px(4scale-px(5px)) scale-px(0px);
+    border-radius: scale-px(0px) scale-px(45px) scale-px(45px) scale-px(0px);
     .nut-icon {
       margin-right: scale-px(0px);
       margin-left: scale-px(5px);
@@ -168,14 +164,13 @@
     right: auto;
     left: 0;
     transform: translateX(-100%);
-    border-radius: scale-px(0px) scale-px(2scale-px(5px))
-      scale-px(2scale-px(5px)) scale-px(0px);
-    box-shadow: scale-px(-scale-px(2px)) scale-px(2px) scale-px(8px)
-      scale-px(0px) rgba(0, 0, 0, 0.2);
+    border-radius: scale-px(0px) scale-px(25px) scale-px(25px) scale-px(0px);
+    box-shadow: scale-px(-2px) scale-px(2px) scale-px(8px) scale-px(0px)
+      rgba(0, 0, 0, 0.2);
 
     padding: {
-      right: scale-px(2scale-px(0px));
-      left: scale-px(8scale-px(0px));
+      right: scale-px(20px);
+      left: scale-px(80px);
     }
 
     &-item {
@@ -193,7 +188,7 @@
     .nut-fixednav-btn {
       left: auto;
       right: 0;
-      border-radius: scale-px(4scale-px(5px)) 0 0 scale-px(4scale-px(5px));
+      border-radius: scale-px(45px) 0 0 scale-px(45px);
 
       .nut-icon {
         transform: rotate(0deg);
@@ -206,12 +201,11 @@
       transform: translateX(100%);
       right: auto;
       left: auto;
-      border-radius: scale-px(2scale-px(5px)) scale-px(0px) scale-px(0px)
-        scale-px(2scale-px(5px));
+      border-radius: scale-px(25px) scale-px(0px) scale-px(0px) scale-px(25px);
 
       padding: {
-        right: scale-px(8scale-px(0px));
-        left: scale-px(2scale-px(0px));
+        right: scale-px(80px);
+        left: scale-px(20px);
       }
     }
   }
diff --git a/src/packages/hoverbuttonitem/hoverbuttonitem.scss b/src/packages/hoverbuttonitem/hoverbuttonitem.scss
index d82329a36b..16c7dc9327 100644
--- a/src/packages/hoverbuttonitem/hoverbuttonitem.scss
+++ b/src/packages/hoverbuttonitem/hoverbuttonitem.scss
@@ -28,7 +28,7 @@
         display: block;
         width: scale-px(14px);
         height: scale-px(14px);
-        font-size: scale-px(14px);
+        font-size: $font-size-base;
       }
     }
   }
@@ -44,7 +44,7 @@
       display: block;
       width: scale-px(20px);
       height: scale-px(20px);
-      font-size: scale-px(20px);
+      font-size: scale-font-px(20px);
     }
   }
 
@@ -59,7 +59,7 @@
   }
 
   &-text {
-    font-size: scale-px(10px);
+    font-size: $font-size-xxs;
     margin-top: scale-px(5px);
     line-height: scale-px(9px);
   }
diff --git a/src/packages/input/input.scss b/src/packages/input/input.scss
index 12a03b4353..b24aac76c1 100644
--- a/src/packages/input/input.scss
+++ b/src/packages/input/input.scss
@@ -18,7 +18,7 @@
     color: $color-text-disabled;
     width: scale-px(14px);
     height: scale-px(14px);
-    font-size: scale-px(14px);
+    font-size: $font-size-base;
   }
   &-container {
     height: scale-px(38px);
diff --git a/src/packages/navbar/navbar.scss b/src/packages/navbar/navbar.scss
index 697081fbf0..5e5b0c90be 100644
--- a/src/packages/navbar/navbar.scss
+++ b/src/packages/navbar/navbar.scss
@@ -72,7 +72,7 @@
     .nutui-iconfont {
       width: scale-px(20px);
       height: scale-px(20px);
-      font-size: scale-px(20px);
+      font-size: scale-font-px(20px);
     }
 
     /* #endif */
diff --git a/src/packages/pulltorefresh/pulltorefresh.scss b/src/packages/pulltorefresh/pulltorefresh.scss
index 20ac535dd0..5d79d9e4b3 100644
--- a/src/packages/pulltorefresh/pulltorefresh.scss
+++ b/src/packages/pulltorefresh/pulltorefresh.scss
@@ -2,7 +2,7 @@
   &-head {
     overflow: hidden;
     position: relative;
-    font-size: scale-px(12px);
+    font-size: $font-size-s;
 
     &-content {
       position: absolute;
diff --git a/src/packages/range/range.scss b/src/packages/range/range.scss
index 06acbf9ecb..3b1c8c58a9 100644
--- a/src/packages/range/range.scss
+++ b/src/packages/range/range.scss
@@ -147,7 +147,7 @@
   &-mark-text {
     position: absolute;
     line-height: scale-px(16px);
-    font-size: scale-px(12px);
+    font-size: $font-size-s;
     color: #999;
     text-align: center;
     word-break: keep-all;
@@ -215,7 +215,7 @@
     top: scale-px(0px);
     right: 50%;
     overflow: visible;
-    font-size: scale-px(12px);
+    font-size: $font-size-s;
     padding: scale-px(0px);
   }
 
diff --git a/src/packages/rate/rate.scss b/src/packages/rate/rate.scss
index 1350254770..09d9e606f8 100644
--- a/src/packages/rate/rate.scss
+++ b/src/packages/rate/rate.scss
@@ -114,12 +114,12 @@
     }
 
     &-large {
-      font-size: calc($rate-font-size + scale-px(6px));
+      font-size: calc($rate-font-size + scale-font-px(6px));
       padding-left: calc($rate-item-margin * 2);
     }
 
     &-small {
-      font-size: calc($rate-font-size - scale-px(2px));
+      font-size: calc($rate-font-size - scale-font-px(2px));
       padding-left: calc($rate-item-margin / 2);
     }
 
diff --git a/src/packages/searchbar/searchbar.scss b/src/packages/searchbar/searchbar.scss
index 3c25023da0..41edc2e56f 100644
--- a/src/packages/searchbar/searchbar.scss
+++ b/src/packages/searchbar/searchbar.scss
@@ -40,7 +40,7 @@
   }
 
   &-rightin {
-    font-size: scale-px(15px);
+    font-size: $font-size-l;
     font-weight: 500;
     color: $color-primary;
 
@@ -97,7 +97,7 @@
     background-color: #fff;
     top: scale-px(9px);
     left: scale-px(6px);
-    font-size: scale-px(12px);
+    font-size: $font-size-s;
     line-height: scale-px(12px);
 
     .nut-searchbar-value {
@@ -113,7 +113,7 @@
     .nut-icon {
       width: scale-px(6px);
       height: scale-px(6px);
-      font-size: scale-px(6px);
+      font-size: scale-font-px(6px);
       color: #c2c4cc;
       margin-left: scale-px(4px);
     }
diff --git a/src/packages/segmented/segmented.scss b/src/packages/segmented/segmented.scss
index 7cd0cc192d..4791272752 100644
--- a/src/packages/segmented/segmented.scss
+++ b/src/packages/segmented/segmented.scss
@@ -38,6 +38,6 @@
   .nut-icon {
     height: scale-px(10px);
     width: scale-px(10px);
-    font-size: scale-px(10px);
+    font-size: $font-size-xxs;
   }
 }
diff --git a/src/packages/skeleton/skeleton.scss b/src/packages/skeleton/skeleton.scss
index 096ad44eea..df0eada700 100644
--- a/src/packages/skeleton/skeleton.scss
+++ b/src/packages/skeleton/skeleton.scss
@@ -1,6 +1,6 @@
 .nut-skeleton {
   line-height: scale-px(0px);
-  font-size: scale-px(0px);
+  font-size: 0px;
 
   &-content {
     position: relative;
diff --git a/src/packages/tabbar/tabbar.scss b/src/packages/tabbar/tabbar.scss
index 610fa5f874..3babd41045 100644
--- a/src/packages/tabbar/tabbar.scss
+++ b/src/packages/tabbar/tabbar.scss
@@ -31,7 +31,7 @@
         }
         .nut-tabbar-item-text {
           margin: 0 scale-px(4px) 0 scale-px(6px);
-          font-size: scale-px(14px);
+          font-size: $font-size-base;
         }
         .nut-badge-sup {
           &::after {
diff --git a/src/packages/tabbaritem/tabbaritem.scss b/src/packages/tabbaritem/tabbaritem.scss
index 7db36733da..fc20e64d0e 100644
--- a/src/packages/tabbaritem/tabbaritem.scss
+++ b/src/packages/tabbaritem/tabbaritem.scss
@@ -12,7 +12,7 @@
   .nut-icon {
     width: scale-px(24px);
     height: scale-px(24px);
-    font-size: scale-px(24px);
+    font-size: $font-size-xxl;
     /* #ifdef harmony dynamic*/
     color: $tabbar-inactive-color;
     /* #endif*/
diff --git a/src/packages/tabs/tabs.scss b/src/packages/tabs/tabs.scss
index 209c4cfff1..6fe817bc63 100644
--- a/src/packages/tabs/tabs.scss
+++ b/src/packages/tabs/tabs.scss
@@ -93,7 +93,7 @@
 
       .nut-icon {
         position: absolute;
-        font-size: scale-px(20px);
+        font-size: scale-font-px(20px);
         width: 100%;
         height: 100%;
       }
diff --git a/src/packages/uploader/uploader.scss b/src/packages/uploader/uploader.scss
index 09c77e0ee7..f1a39b1c7d 100644
--- a/src/packages/uploader/uploader.scss
+++ b/src/packages/uploader/uploader.scss
@@ -95,7 +95,7 @@
 
       &-msg {
         color: $color-text-help;
-        font-size: scale-px(12px);
+        font-size: $font-size-s;
       }
     }
 
@@ -161,7 +161,7 @@
         position: absolute;
         bottom: 0;
         left: 0;
-        font-size: scale-px(12px);
+        font-size: $font-size-s;
         color: $white;
         text-align: center;
         box-sizing: border-box;
@@ -197,7 +197,7 @@
         &-name {
           display: flex;
           width: 90%;
-          font-size: scale-px(12px);
+          font-size: $font-size-s;
           color: $color-text;
           @include moreline-ellipsis();
 
diff --git a/src/packages/virtuallist/virtuallist.scss b/src/packages/virtuallist/virtuallist.scss
index b0f21ae8ba..818dfc7c55 100644
--- a/src/packages/virtuallist/virtuallist.scss
+++ b/src/packages/virtuallist/virtuallist.scss
@@ -27,7 +27,7 @@
     box-shadow: 0 scale-px(1px) scale-px(6px) 0 rgba(237, 238, 241, 1);
     margin-top: scale-px(20px);
     padding: scale-px(14px) scale-px(15px);
-    font-size: scale-px(13px);
+    font-size: scale-font-px(13px);
     line-height: scale-px(18px);
     font-family: PingFangSC;
     font-weight: 500;
diff --git a/src/sites/assets/styles/highlight.scss b/src/sites/assets/styles/highlight.scss
index e558825a1b..11df75e2fd 100644
--- a/src/sites/assets/styles/highlight.scss
+++ b/src/sites/assets/styles/highlight.scss
@@ -5,7 +5,7 @@ code {
   overflow-x: auto;
   color: $nutui-doc-code-color;
   font-weight: 400;
-  font-size: 13px;
+  font-size: scale-font-px(13px);
   font-family: $nutui-doc-code-font-family;
   line-height: 1.8;
   white-space: pre-wrap;
diff --git a/src/styles/variables.scss b/src/styles/variables.scss
index 0dbe99876f..b4fb98f526 100644
--- a/src/styles/variables.scss
+++ b/src/styles/variables.scss
@@ -2,10 +2,18 @@
 // 缩放系数
 :root {
   --scale-f: 1;
+  --scale-font: var(--scale-f, 1);
+  --scale-icon: var(--scale-f, 1);
 }
 @function scale-px($size) {
   @return calc(#{$size} * var(--scale-f, 1));
 }
+@function scale-font-px($size) {
+  @return calc(#{$size} * var(--scale-font, var(--scale-f, 1)));
+}
+@function scale-icon-px($size) {
+  @return calc(#{$size} * var(--scale-icon, var(--scale-f, 1)));
+}
 // 主色调 // done
 $color-primary: var(--nutui-color-primary, #ff0f23) !default;
 $color-primary-stop-1: var(--nutui-color-primary-stop-1, #ff475d) !default;
@@ -154,17 +162,17 @@ $font-family:
   sans-serif !default;
 
 // Font
-$font-size-xxxs: var(--nutui-font-size-xxxs, scale-px(9px)) !default;
-$font-size-xxs: var(--nutui-font-size-xxs, scale-px(10px)) !default;
-$font-size-xs: var(--nutui-font-size-xs, scale-px(11px)) !default;
-$font-size-s: var(--nutui-font-size-s, scale-px(12px)) !default;
-$font-size-base: var(--nutui-font-size-base, scale-px(14px)) !default;
-$font-size-l: var(--nutui-font-size-l, scale-px(15px)) !default;
-$font-size-icon: var(--nutui-font-size-icon, scale-px(16px)) !default;
-$font-size-xl: var(--nutui-font-size-xl, scale-px(18px)) !default;
-$font-size-xxl: var(--nutui-font-size-xxl, scale-px(24px)) !default;
-$font-size-xxxl: var(--nutui-font-size-10, scale-px(26px)) !default;
-$font-size-xxxxl: var(--nutui-font-size-11, scale-px(28px)) !default;
+$font-size-xxxs: var(--nutui-font-size-xxxs, scale-font-px(9px)) !default;
+$font-size-xxs: var(--nutui-font-size-xxs, scale-font-px(10px)) !default;
+$font-size-xs: var(--nutui-font-size-xs, scale-font-px(11px)) !default;
+$font-size-s: var(--nutui-font-size-s, scale-font-px(12px)) !default;
+$font-size-base: var(--nutui-font-size-base, scale-font-px(14px)) !default;
+$font-size-l: var(--nutui-font-size-l, scale-font-px(15px)) !default;
+$font-size-icon: var(--nutui-font-size-icon, scale-icon-px(16px)) !default;
+$font-size-xl: var(--nutui-font-size-xl, scale-font-px(18px)) !default;
+$font-size-xxl: var(--nutui-font-size-xxl, scale-font-px(24px)) !default;
+$font-size-xxxl: var(--nutui-font-size-10, scale-font-px(26px)) !default;
+$font-size-xxxxl: var(--nutui-font-size-11, scale-font-px(28px)) !default;
 
 // 字重 ok
 $font-weight-light: var(--nutui-font-weight-light, 300) !default;
@@ -534,9 +542,9 @@ $divider-vertical-margin: var(
 
 // icon（✅）
 
-$icon-height: var(--nutui-icon-height, scale-px(20px)) !default;
-$icon-width: var(--nutui-icon-width, scale-px(20px)) !default;
-$icon-line-height: var(--nutui-icon-line-height, scale-px(20px)) !default;
+$icon-height: var(--nutui-icon-height, scale-icon-px(20px)) !default;
+$icon-width: var(--nutui-icon-width, scale-icon-px(20px)) !default;
+$icon-line-height: var(--nutui-icon-line-height, scale-icon-px(20px)) !default;
 
 // uploader（✅）
 $uploader-image-width: var(
@@ -577,7 +585,7 @@ $uploader-image-icon-margin-bottom: var(
 ) !default;
 $uploader-image-icon-tip-font-size: var(
   --nutui-uploader-image-icon-tip-font-size,
-  scale-px(12px)
+  $font-size-s
 ) !default;
 $uploader-preview-progress-background: var(
   --nutui-uploader-preview-progress-background,
@@ -807,7 +815,7 @@ $numberkeyboard-header-close-color: var(
 ) !default;
 $numberkeyboard-header-close-font-size: var(
   --nutui-numberkeyboard-header-close-font-size,
-  scale-px(14px)
+  $font-size-base
 ) !default;
 $numberkeyboard-header-close-background-color: var(
   --nutui-numberkeyboard-header-close-background-color,
@@ -921,57 +929,57 @@ $price-symbol-padding-right: var(
 //xlarge price（✅）
 $price-symbol-xlarge-size: var(
   --nutui-price-symbol-xlarge-size,
-  scale-px(12px)
+  $font-size-s
 ) !default;
 $price-integer-xlarge-size: var(
   --nutui-price-integer-xlarge-size,
-  scale-px(24px)
+  $font-size-xxl
 ) !default;
 $price-decimal-xlarge-size: var(
   --nutui-price-decimal-xlarge-size,
-  scale-px(12px)
+  $font-size-s
 ) !default;
 
 //large price（✅）
 $price-symbol-large-size: var(
   --nutui-price-symbol-large-size,
-  scale-px(12px)
+  $font-size-s
 ) !default;
 $price-integer-large-size: var(
   --nutui-price-integer-large-size,
-  scale-px(18px)
+  $font-size-xl
 ) !default;
 $price-decimal-large-size: var(
   --nutui-price-decimal-large-size,
-  scale-px(12px)
+  $font-size-s
 ) !default;
 
 //normal price（✅）
 $price-symbol-normal-size: var(
   --nutui-price-symbol-normal-size,
-  scale-px(12px)
+  $font-size-s
 ) !default;
 $price-integer-normal-size: var(
   --nutui-price-integer-normal-size,
-  scale-px(16px)
+  scale-font-px(16px)
 ) !default;
 $price-decimal-normal-size: var(
   --nutui-price-decimal-normal-size,
-  scale-px(12px)
+  $font-size-s
 ) !default;
 
 // small price（✅）
 $price-symbol-small-size: var(
   --nutui-price-symbol-small-size,
-  scale-px(12px)
+  $font-size-s
 ) !default;
 $price-integer-small-size: var(
   --nutui-price-integer-small-size,
-  scale-px(12px)
+  $font-size-s
 ) !default;
 $price-decimal-small-size: var(
   --nutui-price-decimal-small-size,
-  scale-px(12px)
+  $font-size-s
 ) !default;
 
 //avatar（✅）
@@ -1050,11 +1058,11 @@ $switch-inactive-disabled-label-text-color: var(
 $toast-inner-text-align: var(--nutui-toast-inner-text-align, center) !default;
 $toast-title-font-size: var(
   --nutui-toast-title-font-size,
-  scale-px(16px)
+  scale-font-px(16px)
 ) !default;
 $toast-text-font-size: var(
   --nutui-toast-text-font-size,
-  scale-px(14px)
+  $font-size-base
 ) !default;
 $toast-font-color: var(--nutui-toast-font-color, $white) !default;
 $toast-inner-padding: var(
@@ -1087,7 +1095,7 @@ $tour-content-inner-margin: var(
 ) !default;
 $tour-content-inner-font-size: var(
   --nutui-tour-content-inner-font-size,
-  scale-px(14px)
+  $font-size-base
 ) !default;
 $tour-content-bottom-margin-top: var(
   --nutui-tour-content-bottom-margin-top,
@@ -1103,7 +1111,7 @@ $tour-content-bottom-btn-padding: var(
 ) !default;
 $tour-content-bottom-btn-font-size: var(
   --nutui-tour-content-bottom-btn-font-size,
-  scale-px(12px)
+  $font-size-s
 ) !default;
 $tour-content-bottom-btn-border-radius: var(
   --nutui-tour-content-bottom-btn-border-radius,
@@ -1174,7 +1182,7 @@ $hoverbutton-position-right: var(
 ) !default;
 $hoverbutton-item-size: var(
   --nutui-hoverbutton-item-size,
-  scale-px(40px)
+  scale-font-px(40px)
 ) !default;
 $hoverbutton-item-border-color: var(
   --nutui-hoverbutton-item-border-color,
@@ -1261,9 +1269,9 @@ $rate-icon-inactive-color: var(
   --nutui-rate-icon-inactive-color,
   $color-primary-icon-disabled
 ) !default;
-$rate-icon-size: var(--nutui-rate-icon-size, scale-px(12px)) !default;
+$rate-icon-size: var(--nutui-rate-icon-size, scale-font-px(12px)) !default;
 $rate-font-color: var(--nutui-rate-font-color, $color-primary-icon) !default;
-$rate-font-size: var(--nutui-rate-font-size, scale-px(12px)) !default;
+$rate-font-size: var(--nutui-rate-font-size, $font-size-s) !default;
 
 // tabbar（✅）
 $tabbar-height: var(--nutui-tabbar-height, scale-px(46px)) !default;
@@ -1317,7 +1325,7 @@ $infiniteloading-color: var(
 ) !default;
 $infiniteloading-icon-size: var(
   --nutui-infiniteloading-icon-size,
-  scale-px(24px)
+  $font-size-xxl
 ) !default;
 
 //range（✅）
@@ -1363,7 +1371,7 @@ $steps-base-head-background-color: var(
 $steps-base-head-border: var(--nutui-steps-base-head-border, none) !default;
 $steps-base-head-text-size: var(
   --nutui-steps-base-head-text-size,
-  scale-px(12px)
+  $font-size-s
 ) !default;
 $steps-base-head-size: var(
   --nutui-steps-base-icon-size,
@@ -1375,7 +1383,7 @@ $steps-base-head-color: var(
 ) !default;
 $steps-base-head-dot-size: var(
   --nutui-steps-base-head-dot-size,
-  scale-px(6px)
+  scale-font-px(6px)
 ) !default;
 $steps-base-head-dot-background-color: var(
   --nutui-steps-base-head-dot-background-color,
@@ -1383,15 +1391,15 @@ $steps-base-head-dot-background-color: var(
 ) !default;
 $steps-base-head-icon-size: var(
   --nutui-steps-base-head-icon-size,
-  scale-px(16px)
+  scale-font-px(16px)
 ) !default;
 $steps-double-head-icon-size: var(
   --nutui-steps-base-head-icon-size-right,
-  scale-px(20px)
+  scale-font-px(20px)
 ) !default;
 $steps-vertical-head-icon-size: var(
   --nutui-steps-vertical-item-icon-size,
-  scale-px(20px)
+  scale-font-px(20px)
 ) !default;
 $steps-base-line-height: var(
   --nutui-steps-base-line-height,
@@ -1643,11 +1651,11 @@ $dialog-vertical-footer-ok-margin-top: var(
   scale-px(16px)
 ) !default;
 $dialog-close-color: var(--nutui-dialog-close-color, #ffffff) !default;
-$dialog-close-width: var(--nutui-dialog-close-width, scale-px(16px)) !default;
+$dialog-close-width: var(--nutui-dialog-close-width, $font-size-icon) !default;
 $dialog-close-height: var(--nutui-dialog-close-height, scale-px(16px)) !default;
 $dialog-bottom-close-icon-size: var(
   --nutui-dialog-bottom-close-icon-size,
-  scale-px(24px)
+  $font-size-xxl
 ) !default;
 $dialog-close-top: var(--nutui-dialog-close-top, scale-px(16px)) !default;
 $dialog-close-left: var(--nutui-dialog-close-left, scale-px(16px)) !default;
@@ -1926,7 +1934,7 @@ $badge-padding: var(
   scale-px(1px) scale-px(4px)
 ) !default;
 $badge-icon-padding: var(--nutui-badge-icon-padding, scale-px(2px)) !default;
-$badge-icon-size: var(--nutui-badge-icon-size, scale-px(10px)) !default;
+$badge-icon-size: var(--nutui-badge-icon-size, $font-size-xxs) !default;
 $badge-content-transform: var(
   --nutui-badge-content-transform,
   translate(50%, -50%)
@@ -1998,7 +2006,7 @@ $progress-text-padding: var(
 ) !default;
 $progress-text-font-size: var(
   --nutui-progress-text-font-size,
-  scale-px(13px)
+  scale-font-px(13px)
 ) !default;
 $progress-text-position-top: var(
   --nutui-progress-text-position-top,
@@ -2307,7 +2315,10 @@ $searchbar-content-round-border-radius: var(
   --nutui-searchbar-content-round-border-radius,
   scale-px(19px)
 ) !default;
-$searchbar-icon-size: var(--nutui-searchbar-icon-size, scale-px(20px)) !default;
+$searchbar-icon-size: var(
+  --nutui-searchbar-icon-size,
+  scale-font-px(20px)
+) !default;
 $searchbar-input-height: var(
   --nutui-searchbar-input-height,
   scale-px(38px)
@@ -2737,7 +2748,7 @@ $addresslist-border: var(--nutui-addresslist-border, #f0f0f0) !default;
 $addresslist-font-color: var(--nutui-addresslist-font-color, #333333) !default;
 $addresslist-font-size: var(
   --nutui-addresslist-font-size,
-  scale-px(16px)
+  scale-font-px(16px)
 ) !default;
 $addresslist-mask-bg: var(
   --nutui-addresslist-mask-bg,
@@ -2749,7 +2760,7 @@ $addresslist-addr-font-color: var(
 ) !default;
 $addresslist-addr-font-size: var(
   --nutui-addresslist-addr-font-size,
-  scale-px(12px)
+  $font-size-s
 ) !default;
 $addresslist-set-bg: var(--nutui-addresslist-set-bg, #f5a623) !default;
 $addresslist-del-bg: var(--nutui-addresslist-del-bg, #e1251b) !default;
@@ -2795,7 +2806,7 @@ $watermark-z-index: var(
 // TrendArrow
 $trendarrow-font-size: var(
   --nutui-trendarrow-font-size,
-  scale-px(14px)
+  $font-size-base
 ) !default;
 $trendarrow-icon-margin: var(
   --nutui-trendarrow-icon-margin,
@@ -2805,7 +2816,7 @@ $trendarrow-icon-margin: var(
 // animatingnumbers（✅）
 $countup-width: var(--nutui-countup-width, auto) !default;
 $countup-height: var(--nutui-countup-height, scale-px(32px)) !default;
-$countup-base-size: var(--nutui-countup-base-size, scale-px(18px)) !default;
+$countup-base-size: var(--nutui-countup-base-size, $font-size-xl) !default;
 $countup-border-radius: var(
   --nutui-countup-border-radius,
   scale-px(4px)
@@ -2845,7 +2856,7 @@ $col-default-margin-bottom: var(
 // TrendArrow
 $trendarrow-font-size: var(
   --nutui-trendarrow-font-size,
-  scale-px(14px)
+  $font-size-base
 ) !default;
 $trendarrow-icon-margin: var(
   --nutui-trendarrow-icon-margin,
diff --git a/src/utils/index.taro.ts b/src/utils/index.taro.ts
index 6c90276045..dba3cac020 100644
--- a/src/utils/index.taro.ts
+++ b/src/utils/index.taro.ts
@@ -26,7 +26,6 @@ export * from './taro/px-transform'
 export * from './raf'
 export * from './render'
 export * from './rubberband'
-export * from './scale-f.taro'
 export * from './sleep'
 export * from './supports-passive'
 export * from './to-array'
diff --git a/src/utils/scale-f.taro.ts b/src/utils/scale-f.taro.ts
deleted file mode 100644
index 35a15c9678..0000000000
--- a/src/utils/scale-f.taro.ts
+++ /dev/null
@@ -1,20 +0,0 @@
-export let scale = 1
-
-export async function getScaleF() {
-  return 1
-}
-
-export function setScaleF() {
-  scale = 1
-  return scale
-}
-
-export async function refreshScaleF() {
-  scale = 1
-  return scale
-}
-
-export function initScaleF() {
-  scale = 1
-  return () => {}
-}
diff --git a/src/utils/scale-f.ts b/src/utils/scale-f.ts
index 9c2dcbcec3..7bbf721481 100644
--- a/src/utils/scale-f.ts
+++ b/src/utils/scale-f.ts
@@ -1,5 +1,10 @@
+/**
+ * 响应式缩放系数（--scale-f）：结合京东站内原生桥与站外视口规则，
+ * 写入根节点 CSS 变量，供布局/字号/icon 等按比例换算（见 calcByProfile）。
+ */
 import { canUseDom } from './can-use-dom'
 
+/** 原生 DongScreenAdapterPlugin.getScale 的典型返回结构 */
 type NativeScaleResponse = {
   status?: string
   data?: {
@@ -7,6 +12,7 @@ type NativeScaleResponse = {
   }
 }
 
+/** jmfe 通用 callNative 签名 */
 type NativeCaller = (
   plugin: string,
   method: string,
@@ -14,6 +20,7 @@ type NativeCaller = (
   extra: string
 ) => Promise<NativeScaleResponse>
 
+/** 站内容器的 jmfe 桥接方法（可选） */
 declare global {
   interface Window {
     jmfe?: {
@@ -22,17 +29,102 @@ declare global {
   }
 }
 
-export let scale = 1
+/** 当前基准缩放（来自原生或视口计算） */
+let scale = 1
+
+/** 字体档位：标准、大字、老年 */
+export type ScaleProfile = 'standard' | 'large' | 'elderly'
+/** 不同场景可选用不同放大比例（layout 等默认可不额外放大） */
+export type ScaleScene = 'layout' | 'font' | 'icon' | 'lego'
+export type ScaleDevice = 'phone' | 'pad'
+
+/** 视口大于等于该宽度时按平板处理 */
+const PAD_BREAKPOINT = 600
+/** 平板默认整体缩放倍数 */
+const PAD_SCALE = 1.2
+/** 大字模式下仅 font 场景的相对倍率 */
+const LARGE_FONT_RATIO = 1.15
+/** 老年模式下 font/icon/lego 场景的相对倍率 */
+const ELDERLY_RATIO = 1.3
+
+/** 全局当前档位，与 scale 共同参与 calcByProfile */
+let profile: ScaleProfile = 'standard'
+
+/** 仅 large / elderly 有效，其余一律视为 standard */
+function normalizeProfile(nextProfile?: ScaleProfile) {
+  if (nextProfile === 'large' || nextProfile === 'elderly') return nextProfile
+  return 'standard'
+}
+
+/** 计算 CSS 变量要使用的场景缩放（基准 scale × 场景倍率） */
+function getCssSceneScale(scene: ScaleScene, baseScale: number) {
+  return baseScale * getSceneRatio(scene, profile)
+}
+
+/** 将缩放值同步到 :root 的 --scale-f / --scale-font / --scale-icon */
+function applyScaleCssVars(nextScale: number) {
+  if (!canUseDom) return
+  const rootStyle = document.documentElement.style
+  rootStyle.setProperty('--scale-f', formatScaleValue(nextScale))
+  rootStyle.setProperty(
+    '--scale-font',
+    formatScaleValue(getCssSceneScale('font', nextScale))
+  )
+  rootStyle.setProperty(
+    '--scale-icon',
+    formatScaleValue(getCssSceneScale('icon', nextScale))
+  )
+}
+
+/** >1 保留两位小数字符串；否则取整，与 CSS 消费端约定一致 */
+function formatScaleValue(nextScale: number) {
+  if (nextScale > 1) {
+    return (Math.round(nextScale * 100) / 100).toFixed(2)
+  }
+  return `${Math.round(nextScale)}`
+}
+
+/** 根据屏宽粗略区分 phone / pad */
+function getCurrentDevice(): ScaleDevice {
+  if (!canUseDom) return 'phone'
+  return window.innerWidth >= PAD_BREAKPOINT ? 'pad' : 'phone'
+}
+
+/** 在 profile 与 scene 维度上叠加额外倍率（与全局 scale 相乘） */
+function getSceneRatio(scene: ScaleScene, currentProfile: ScaleProfile) {
+  if (
+    currentProfile === 'elderly' &&
+    (scene === 'font' || scene === 'icon' || scene === 'lego')
+  ) {
+    return ELDERLY_RATIO
+  }
+  if (currentProfile === 'large' && scene === 'font') {
+    return LARGE_FONT_RATIO
+  }
+  return 1
+}
 
-// 站外兜底规则：按屏宽计算缩放系数。
+/** 输出 px 等单位时的取整规则：缩放>1 或强制时保留两位小数精度 */
+function roundByScaleRule(
+  value: number,
+  baseScale: number,
+  forceKeepTwoDecimals = false
+) {
+  if (forceKeepTwoDecimals || baseScale > 1) {
+    return Math.round(value * 100) / 100
+  }
+  return Math.round(value)
+}
+
+/** 无原生桥时按屏宽推算 scale（含平板与 375 基准窄屏区间） */
 function getScaleByViewport() {
   if (!canUseDom) return 1
   const deviceWidth = window.innerWidth
 
   if (!deviceWidth) return 1
 
-  if (deviceWidth >= 600) {
-    return 1.2
+  if (deviceWidth >= PAD_BREAKPOINT) {
+    return PAD_SCALE
   }
 
   if (deviceWidth >= 375 && deviceWidth < 600) {
@@ -43,7 +135,7 @@ function getScaleByViewport() {
   return 1
 }
 
-// 站内场景：优先走原生能力获取缩放系数。
+/** 通过 jmfe.callNative 拉取 DongScreenAdapterPlugin；失败返回 null */
 async function getScaleByNative() {
   if (!canUseDom || !window.jmfe?.callNative) return null
 
@@ -60,32 +152,33 @@ async function getScaleByNative() {
         return parsed
       }
     }
-  } catch (error) {
-    // ignore native failures and fallback to viewport rule
+  } catch {
+    /* 原生异常时由 getScaleF 回退到视口规则 */
   }
 
   return null
 }
 
-// 统一对外获取缩放系数：站内优先，失败时走站外规则。
-export async function getScaleF() {
+/** 统一获取缩放：站内原生优先，失败则用视口规则 */
+async function getScaleF() {
   const nativeScale = await getScaleByNative()
   if (nativeScale) return nativeScale
   return getScaleByViewport()
 }
 
-// 同步设置当前缩放值，并写入 CSS 变量 --scale-f。
-export function setScaleF(nextScale: number) {
+/** 校验后更新内存中的 scale，并写入 --scale-f */
+function setScaleF(nextScale: number) {
   const validScale = Number.isFinite(nextScale) && nextScale > 0 ? nextScale : 1
   scale = validScale
-  if (canUseDom) {
-    document.documentElement.style.setProperty('--scale-f', `${validScale}`)
-  }
+  applyScaleCssVars(validScale)
   return scale
 }
 
-// 刷新缩放值，仅在值变化时更新，避免重复写样式。
-export async function refreshScaleF() {
+/** 重新拉取缩放；可选同时切换 profile，避免与当前值相同时重复写 DOM */
+async function refreshScaleF(nextProfile?: ScaleProfile) {
+  if (nextProfile) {
+    setScaleProfile(nextProfile)
+  }
   const nextScale = await getScaleF()
   if (!scale || nextScale !== scale) {
     setScaleF(nextScale)
@@ -93,9 +186,10 @@ export async function refreshScaleF() {
   return scale
 }
 
-// 初始化缩放监听：首次执行一次，并在窗口 resize 时自动刷新。
-export function initScaleF() {
+/** 首次计算缩放并订阅 resize；返回卸载函数（SSR 下为空函数） */
+export function initScaleF(nextProfile?: ScaleProfile) {
   if (!canUseDom) return () => {}
+  setScaleProfile(nextProfile)
 
   const handler = () => {
     refreshScaleF()
@@ -108,3 +202,40 @@ export function initScaleF() {
     window.removeEventListener('resize', handler)
   }
 }
+
+/** 更新全局 profile，并在当前 scale 下重刷 CSS 变量 */
+function setScaleProfile(nextProfile?: ScaleProfile) {
+  profile = normalizeProfile(nextProfile)
+  // profile 切换后需要重新应用当前缩放值。
+  setScaleF(scale)
+  return profile
+}
+
+/** calcByProfile 的可选覆盖项：临时指定档位、场景、scale 或设备 */
+type CalcByProfileOptions = {
+  profile?: ScaleProfile
+  scene?: ScaleScene
+  scale?: number
+  device?: ScaleDevice
+}
+
+/**
+ * 按档位与场景将设计稿基准值换算为实际数值：base × 场景倍率 × 当前 scale，再按规则取整。
+ */
+export function calcByProfile(
+  baseValue: number,
+  options: CalcByProfileOptions = {}
+) {
+  const currentProfile = normalizeProfile(options.profile ?? profile)
+  const scene = options.scene ?? 'layout'
+  const currentScale =
+    Number.isFinite(options.scale) && Number(options.scale) > 0
+      ? Number(options.scale)
+      : scale
+  const device = options.device ?? getCurrentDevice()
+  const ratio = getSceneRatio(scene, currentProfile)
+  const rawValue = baseValue * ratio * currentScale
+  const forceKeepTwoDecimals =
+    scene === 'font' && currentProfile === 'large' && device === 'pad'
+  return roundByScaleRule(rawValue, currentScale, forceKeepTwoDecimals)
+}

From 1a35d9b813786676d21d0220a22ef1383c734246 Mon Sep 17 00:00:00 2001
From: songchenglin3 <353833373@qq.com>
Date: Fri, 8 May 2026 10:10:50 +0800
Subject: [PATCH 04/18] =?UTF-8?q?fix:=200px=20=E4=B8=8D=E8=BD=AC=E6=8D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/packages/address/address.scss           |  2 +-
 src/packages/audio/audio.scss               |  2 +-
 src/packages/calendar/calendar.scss         |  8 +-
 src/packages/checkbox/checkbox.scss         |  8 +-
 src/packages/collapseitem/collapseitem.scss |  2 +-
 src/packages/divider/divider.scss           |  2 +-
 src/packages/fixednav/fixednav.scss         | 18 ++---
 src/packages/indicator/indicator.scss       |  8 +-
 src/packages/popover/popover.scss           |  2 +-
 src/packages/radio/radio.scss               |  3 +-
 src/packages/range/range.scss               | 19 +++--
 src/packages/skeleton/skeleton.scss         |  2 +-
 src/packages/swipe/swipe.scss               |  6 +-
 src/packages/tabbar/tabbar.scss             |  8 +-
 src/packages/table/table.scss               |  2 +-
 src/packages/tour/tour.scss                 |  2 +-
 src/packages/uploader/uploader.scss         |  6 +-
 src/styles/variables.scss                   | 82 ++++++++-------------
 18 files changed, 79 insertions(+), 103 deletions(-)

diff --git a/src/packages/address/address.scss b/src/packages/address/address.scss
index 521b988cca..5c341c91fc 100644
--- a/src/packages/address/address.scss
+++ b/src/packages/address/address.scss
@@ -30,7 +30,7 @@
   &-footer {
     width: 100%;
     height: scale-px(54px);
-    padding: scale-px(6px) scale-px(0px) 0;
+    padding: scale-px(6px) 0px 0;
     border-top: scale-px(1px) solid $color-border;
 
     &-btn {
diff --git a/src/packages/audio/audio.scss b/src/packages/audio/audio.scss
index a9c643ade6..d70948064e 100644
--- a/src/packages/audio/audio.scss
+++ b/src/packages/audio/audio.scss
@@ -39,7 +39,7 @@
     display: flex;
     align-items: center;
     width: 100%;
-    margin: scale-px(0px) auto;
+    margin: 0px auto;
     padding: scale-px(10px) 0;
 
     &-bar-wrapper {
diff --git a/src/packages/calendar/calendar.scss b/src/packages/calendar/calendar.scss
index 0f8e728459..91ce01221c 100644
--- a/src/packages/calendar/calendar.scss
+++ b/src/packages/calendar/calendar.scss
@@ -60,8 +60,8 @@
     align-items: center;
     justify-content: space-around;
     height: scale-px(36px);
-    border-radius: scale-px(0px) scale-px(0px) scale-px(12px) scale-px(12px);
-    box-shadow: scale-px(0px) scale-px(4px) scale-px(10px) scale-px(0px)
+    border-radius: 0px 0px scale-px(12px) scale-px(12px);
+    box-shadow: 0px scale-px(4px) scale-px(10px) 0px
       rgba($color: #000000, $alpha: 0.06);
   }
 
@@ -160,13 +160,13 @@
       border-radius: $calendar-day-active-border-radius;
 
       &.active-start {
-        border-radius: scale-px(0px);
+        border-radius: 0px;
         border-top-left-radius: $calendar-day-active-border-radius;
         border-bottom-left-radius: $calendar-day-active-border-radius;
       }
 
       &.active-end {
-        border-radius: scale-px(0px);
+        border-radius: 0px;
         border-top-right-radius: $calendar-day-active-border-radius;
         border-bottom-right-radius: $calendar-day-active-border-radius;
       }
diff --git a/src/packages/checkbox/checkbox.scss b/src/packages/checkbox/checkbox.scss
index 441eea8bc3..f2772cfdee 100644
--- a/src/packages/checkbox/checkbox.scss
+++ b/src/packages/checkbox/checkbox.scss
@@ -12,10 +12,9 @@
 
   &-icon-wrap {
     font-size: 0px;
-    line-height: scale-px(0px);
+    line-height: 0px;
     border-radius: 50%;
-    box-shadow: scale-px(0px) scale-px(2px) scale-px(4px) scale-px(0px)
-      rgba(255, 15, 35, 0.2);
+    box-shadow: 0px scale-px(2px) scale-px(4px) 0px rgba(255, 15, 35, 0.2);
   }
 
   &-icon-checked {
@@ -44,8 +43,7 @@
   &-icon-indeterminate {
     color: $color-primary;
     background-color: $white;
-    box-shadow: scale-px(0px) scale-px(2px) scale-px(4px) scale-px(0px)
-      #ff0f2333;
+    box-shadow: 0px scale-px(2px) scale-px(4px) 0px #ff0f2333;
     border-radius: 50%;
 
     &.nut-checkbox-icon-disabled {
diff --git a/src/packages/collapseitem/collapseitem.scss b/src/packages/collapseitem/collapseitem.scss
index faf0cb2d64..298f1549ee 100644
--- a/src/packages/collapseitem/collapseitem.scss
+++ b/src/packages/collapseitem/collapseitem.scss
@@ -57,7 +57,7 @@
     flex: 1;
     display: flex;
     justify-content: flex-end;
-    padding: scale-px(0px) scale-px(20px);
+    padding: 0px scale-px(20px);
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
diff --git a/src/packages/divider/divider.scss b/src/packages/divider/divider.scss
index a9a6aac260..6cff69ca04 100644
--- a/src/packages/divider/divider.scss
+++ b/src/packages/divider/divider.scss
@@ -51,7 +51,7 @@
     /* #ifndef dynamic*/
     display: inline-flex;
     /* #endif */
-    width: scale-px(0px);
+    width: 0px;
     height: $divider-vertical-height;
     border-left: scale-px(1px) solid $divider-border-color;
     margin: $divider-vertical-margin;
diff --git a/src/packages/fixednav/fixednav.scss b/src/packages/fixednav/fixednav.scss
index b24e615092..9fe8c396d3 100644
--- a/src/packages/fixednav/fixednav.scss
+++ b/src/packages/fixednav/fixednav.scss
@@ -32,8 +32,7 @@
     width: scale-px(70px);
     height: 100%;
     background: $fixednav-button-background;
-    box-shadow: scale-px(0px) scale-px(2px) scale-px(4px) scale-px(0px)
-      rgba(0, 0, 0, 0.2);
+    box-shadow: 0px scale-px(2px) scale-px(4px) 0px rgba(0, 0, 0, 0.2);
     display: flex;
     align-items: center;
     justify-content: center;
@@ -60,8 +59,7 @@
     background: $fixednav-background-color;
     display: flex;
     justify-content: space-between;
-    box-shadow: scale-px(2px) scale-px(2px) scale-px(8px) scale-px(0px)
-      rgba(0, 0, 0, 0.2);
+    box-shadow: scale-px(2px) scale-px(2px) scale-px(8px) 0px rgba(0, 0, 0, 0.2);
 
     &-item {
       position: relative;
@@ -152,9 +150,9 @@
   &-btn {
     right: auto;
     left: 0;
-    border-radius: scale-px(0px) scale-px(45px) scale-px(45px) scale-px(0px);
+    border-radius: 0px scale-px(45px) scale-px(45px) 0px;
     .nut-icon {
-      margin-right: scale-px(0px);
+      margin-right: 0px;
       margin-left: scale-px(5px);
       transform: rotate(180deg);
     }
@@ -164,8 +162,8 @@
     right: auto;
     left: 0;
     transform: translateX(-100%);
-    border-radius: scale-px(0px) scale-px(25px) scale-px(25px) scale-px(0px);
-    box-shadow: scale-px(-2px) scale-px(2px) scale-px(8px) scale-px(0px)
+    border-radius: 0px scale-px(25px) scale-px(25px) 0px;
+    box-shadow: scale-px(-2px) scale-px(2px) scale-px(8px) 0px
       rgba(0, 0, 0, 0.2);
 
     padding: {
@@ -193,7 +191,7 @@
       .nut-icon {
         transform: rotate(0deg);
         margin-right: scale-px(5px);
-        margin-left: scale-px(0px);
+        margin-left: 0px;
       }
     }
 
@@ -201,7 +199,7 @@
       transform: translateX(100%);
       right: auto;
       left: auto;
-      border-radius: scale-px(25px) scale-px(0px) scale-px(0px) scale-px(25px);
+      border-radius: scale-px(25px) 0px 0px scale-px(25px);
 
       padding: {
         right: scale-px(80px);
diff --git a/src/packages/indicator/indicator.scss b/src/packages/indicator/indicator.scss
index cd30feea2d..66e75485ee 100644
--- a/src/packages/indicator/indicator.scss
+++ b/src/packages/indicator/indicator.scss
@@ -21,7 +21,7 @@
     opacity: 0.4;
 
     &-0 {
-      margin-left: scale-px(0px);
+      margin-left: 0px;
     }
 
     &-active {
@@ -149,11 +149,11 @@
 
   .nut-indicator {
     &-dot {
-      margin: scale-px(0px);
+      margin: 0px;
       margin-top: $indicator-dot-margin;
 
       &-0 {
-        margin-top: scale-px(0px);
+        margin-top: 0px;
       }
 
       &-active {
@@ -178,7 +178,7 @@
   &-dot {
     &-0 {
       margin-right: $indicator-dot-margin;
-      margin-left: scale-px(0px);
+      margin-left: 0px;
     }
   }
 }
diff --git a/src/packages/popover/popover.scss b/src/packages/popover/popover.scss
index d78fae486d..ac25a51623 100644
--- a/src/packages/popover/popover.scss
+++ b/src/packages/popover/popover.scss
@@ -92,7 +92,7 @@
       word-wrap: break-word;
 
       &:last-child {
-        margin-bottom: scale-px(0px);
+        margin-bottom: 0px;
         border-bottom: none;
       }
 
diff --git a/src/packages/radio/radio.scss b/src/packages/radio/radio.scss
index 074e6812b2..fd0c80b838 100644
--- a/src/packages/radio/radio.scss
+++ b/src/packages/radio/radio.scss
@@ -37,8 +37,7 @@
     &-checked {
       color: $color-primary;
       background-color: $white;
-      box-shadow: scale-px(0px) scale-px(2px) scale-px(4px) scale-px(0px)
-        #ff0f2333;
+      box-shadow: 0px scale-px(2px) scale-px(4px) 0px #ff0f2333;
       border-radius: 50%;
 
       &.nut-radio-icon-disabled {
diff --git a/src/packages/range/range.scss b/src/packages/range/range.scss
index 3b1c8c58a9..e07ecbfbc7 100644
--- a/src/packages/range/range.scss
+++ b/src/packages/range/range.scss
@@ -59,8 +59,7 @@
     height: $range-button-height;
     background: $range-button-background;
     border-radius: 50%;
-    box-shadow: scale-px(0px) scale-px(1px) scale-px(2px) scale-px(0px)
-      rgba(0, 0, 0, 0.15);
+    box-shadow: 0px scale-px(1px) scale-px(2px) 0px rgba(0, 0, 0, 0.15);
     border: $range-button-border;
     outline: none;
     align-items: center;
@@ -159,7 +158,7 @@
     top: scale-px(-20px);
     width: scale-px(11px);
     height: scale-px(11px);
-    left: scale-px(0px);
+    left: 0px;
     border-radius: scale-px(6px);
     background: $range-inactive-color;
 
@@ -172,12 +171,12 @@
 .nut-range-vertical-container {
   height: 100%;
   flex-direction: column;
-  padding: scale-px(0px) scale-px(15px);
+  padding: 0px scale-px(15px);
 }
 
 .nut-range-vertical {
   width: $range-height;
-  margin: $range-margin scale-px(0px);
+  margin: $range-margin 0px;
 
   &-button {
     &-wrapper,
@@ -193,7 +192,7 @@
     }
 
     &-wrapper-left {
-      top: scale-px(0px);
+      top: 0px;
       left: 50%;
       /* #ifndef dynamic*/
       right: initial;
@@ -202,7 +201,7 @@
     }
 
     &-number {
-      left: scale-px(0px);
+      left: 0px;
       top: 50%;
       // transform: translate3d(100%, 0, 0);
     }
@@ -212,11 +211,11 @@
     position: absolute;
     width: scale-px(36px);
     height: 100%;
-    top: scale-px(0px);
+    top: 0px;
     right: 50%;
     overflow: visible;
     font-size: $font-size-s;
-    padding: scale-px(0px);
+    padding: 0px;
   }
 
   &-mark-hm {
@@ -276,7 +275,7 @@
   }
 
   &-tick {
-    right: scale-px(0px);
+    right: 0px;
     /* #ifndef dynamic*/
     left: initial;
     /* #endif */
diff --git a/src/packages/skeleton/skeleton.scss b/src/packages/skeleton/skeleton.scss
index df0eada700..2f0293501a 100644
--- a/src/packages/skeleton/skeleton.scss
+++ b/src/packages/skeleton/skeleton.scss
@@ -1,5 +1,5 @@
 .nut-skeleton {
-  line-height: scale-px(0px);
+  line-height: 0px;
   font-size: 0px;
 
   &-content {
diff --git a/src/packages/swipe/swipe.scss b/src/packages/swipe/swipe.scss
index 58ca3143b9..7e4c86211c 100644
--- a/src/packages/swipe/swipe.scss
+++ b/src/packages/swipe/swipe.scss
@@ -27,12 +27,12 @@
 
   &-left {
     left: 0;
-    transform: translate(-100%, scale-px(0px));
+    transform: translate(-100%, 0px);
   }
 
   &-right {
     //left: 100%;
-    right: scale-px(0px);
-    transform: translate(100%, scale-px(0px));
+    right: 0px;
+    transform: translate(100%, 0px);
   }
 }
diff --git a/src/packages/tabbar/tabbar.scss b/src/packages/tabbar/tabbar.scss
index 3babd41045..ace561058c 100644
--- a/src/packages/tabbar/tabbar.scss
+++ b/src/packages/tabbar/tabbar.scss
@@ -1,7 +1,7 @@
 @import '../tabbaritem/tabbaritem.scss';
 
 .nut-tabbar {
-  border: scale-px(0px);
+  border: 0px;
   box-shadow: $tabbar-box-shadow;
   border-bottom: $tabbar-border-bottom;
   border-top: $tabbar-border-top;
@@ -44,8 +44,8 @@
 
   &-fixed {
     position: fixed;
-    bottom: scale-px(0px);
-    left: scale-px(0px);
+    bottom: 0px;
+    left: 0px;
   }
 }
 
@@ -58,6 +58,6 @@
 
   &-fixed {
     left: auto;
-    right: scale-px(0px);
+    right: 0px;
   }
 }
diff --git a/src/packages/table/table.scss b/src/packages/table/table.scss
index 4bcb8ffeb9..4d2cd82e81 100644
--- a/src/packages/table/table.scss
+++ b/src/packages/table/table.scss
@@ -143,7 +143,7 @@
   &-sticky-left,
   &-sticky-right {
     position: absolute;
-    top: scale-px(0px);
+    top: 0px;
     width: scale-px(8px);
     bottom: scale-px(-1px);
     overflow-x: hidden;
diff --git a/src/packages/tour/tour.scss b/src/packages/tour/tour.scss
index a4b845c512..0fece09c71 100644
--- a/src/packages/tour/tour.scss
+++ b/src/packages/tour/tour.scss
@@ -3,7 +3,7 @@
 .nut-tour {
   &-mask {
     position: fixed;
-    box-shadow: scale-px(0px) scale-px(0px) scale-px(0px) 150vh $color-mask;
+    box-shadow: 0px 0px 0px 150vh $color-mask;
     border-radius: $tour-mask-border-radius;
     z-index: 999;
 
diff --git a/src/packages/uploader/uploader.scss b/src/packages/uploader/uploader.scss
index f1a39b1c7d..372e69fb98 100644
--- a/src/packages/uploader/uploader.scss
+++ b/src/packages/uploader/uploader.scss
@@ -101,8 +101,8 @@
 
     &.list {
       width: 100%;
-      margin-right: scale-px(0px);
-      margin-bottom: scale-px(0px);
+      margin-right: 0px;
+      margin-bottom: 0px;
       margin-top: scale-px(10px);
       box-shadow: 0 scale-px(2px) scale-px(10px) 0 rgb(0 0 0 / 1%);
     }
@@ -235,7 +235,7 @@
 
     &.list {
       margin-right: 0;
-      margin-left: scale-px(0px);
+      margin-left: 0px;
     }
 
     .close {
diff --git a/src/styles/variables.scss b/src/styles/variables.scss
index b4fb98f526..31b0c40b35 100644
--- a/src/styles/variables.scss
+++ b/src/styles/variables.scss
@@ -248,7 +248,7 @@ $button-border-width: var(
 ) !default;
 $button-normal-padding: var(
   --nutui-button-normal-padding,
-  scale-px(0px) scale-px(12px)
+  0px scale-px(12px)
 ) !default;
 $button-default-height: var(
   --nutui-button-default-height,
@@ -273,7 +273,7 @@ $button-default-disabled-color: var(
 ) !default;
 $button-default-padding: var(
   --nutui-button-default-padding,
-  scale-px(0px) scale-px(12px)
+  0px scale-px(12px)
 ) !default;
 $button-default-font-size: var(
   --nutui-button-default-font-size,
@@ -286,7 +286,7 @@ $button-xlarge-height: var(
 ) !default;
 $button-xlarge-padding: var(
   --nutui-button-xlarge-padding,
-  scale-px(0px) scale-px(24px)
+  0px scale-px(24px)
 ) !default;
 $button-xlarge-font-size: var(
   --nutui-button-xlarge-font-size,
@@ -304,7 +304,7 @@ $button-xlarge-border-radius: var(
 $button-large-height: var(--nutui-button-large-height, scale-px(40px)) !default;
 $button-large-padding: var(
   --nutui-button-large-padding,
-  scale-px(0px) scale-px(16px)
+  0px scale-px(16px)
 ) !default;
 $button-large-font-size: var(
   --nutui-button-large-font-size,
@@ -321,7 +321,7 @@ $button-small-font-size: var(
 ) !default;
 $button-small-padding: var(
   --nutui-button-small-padding,
-  scale-px(0px) scale-px(8px)
+  0px scale-px(8px)
 ) !default;
 $button-small-height: var(--nutui-button-small-height, scale-px(28px)) !default;
 $button-small-border-radius: var(
@@ -331,7 +331,7 @@ $button-small-border-radius: var(
 
 $button-mini-padding: var(
   --nutui-button-mini-padding,
-  scale-px(0px) scale-px(8px)
+  0px scale-px(8px)
 ) !default;
 $button-mini-height: var(--nutui-button-mini-height, scale-px(24px)) !default;
 $button-mini-font-size: var(
@@ -472,7 +472,7 @@ $cell-background-color: var(
 ) !default;
 $cell-box-shadow: var(
   --nutui-cell-box-shadow,
-  scale-px(0px) scale-px(1px) scale-px(7px) scale-px(0px) rgba(237, 238, 241, 1)
+  0px scale-px(1px) scale-px(7px) 0px rgba(237, 238, 241, 1)
 ) !default;
 
 // cell-group（✅）
@@ -555,10 +555,7 @@ $uploader-image-height: var(
   --nutui-uploader-image-height,
   scale-px(100px)
 ) !default;
-$uploader-image-border: var(
-  --nutui-uploader-image-border,
-  scale-px(0px)
-) !default;
+$uploader-image-border: var(--nutui-uploader-image-border, 0px) !default;
 $uploader-image-border-radius: var(
   --nutui-uploader-image-border-radius,
   scale-px(4px)
@@ -613,11 +610,11 @@ $uploader-preview-tips-padding: var(
 ) !default;
 $uploader-preview-close-right: var(
   --nutui-uploader-preview-close-right,
-  scale-px(0px)
+  0px
 ) !default;
 $uploader-preview-close-top: var(
   --nutui-uploader-preview-close-top,
-  scale-px(0px)
+  0px
 ) !default;
 
 // picker（✅）
@@ -663,7 +660,7 @@ $picker-mask-background: var(
 $input-border-bottom: var(--nutui-input-border-bottom, $color-border) !default;
 $input-border-bottom-width: var(
   --nutui-input-border-bottom-width,
-  scale-px(0px)
+  0px
 ) !default;
 // $input-disabled-color: var(
 //   --nutui-input-disabled-color,
@@ -717,10 +714,7 @@ $inputnumber-input-border-radius: var(
   --nutui-inputnumber-input-border-radius,
   scale-px(4px)
 ) !default;
-$inputnumber-input-margin: var(
-  --nutui-inputnumber-input-margin,
-  scale-px(0px)
-) !default;
+$inputnumber-input-margin: var(--nutui-inputnumber-input-margin, 0px) !default;
 $inputnumber-button-width: var(
   --nutui-inputnumber-button-width,
   scale-px(20px)
@@ -923,7 +917,7 @@ $price-line-color: var(
 ) !default;
 $price-symbol-padding-right: var(
   --nutui-price-symbol-padding-right,
-  scale-px(0px)
+  0px
 ) !default;
 
 //xlarge price（✅）
@@ -1030,15 +1024,15 @@ $switch-inside-border-radius: var(
 /* #ifdef harmony */
 $switch-inside-box-shadow: var(
   --nutui-switch-inside-box-shadow,
-  scale-px(0px) scale-px(2px) scale-px(6px) scale-px(0px) rgba(0, 0, 0, 0.1)
+  0px scale-px(2px) scale-px(6px) 0px rgba(0, 0, 0, 0.1)
 ) !default;
 /* #endif */
 /* #ifndef harmony */
 $switch-inside-box-shadow: var(
   --nutui-switch-inside-box-shadow,
-  scale-px(0px) scale-px(2px) scale-px(1px) scale-px(0px) rgba(0, 0, 0, 0.06),
-  scale-px(0px) scale-px(2px) scale-px(6px) scale-px(0px) rgba(0, 0, 0, 0.1),
-  scale-px(0px) scale-px(0px) scale-px(0px) scale-px(1px) rgba(0, 0, 0, 0.02)
+  0px scale-px(2px) scale-px(1px) 0px rgba(0, 0, 0, 0.06),
+  0px scale-px(2px) scale-px(6px) 0px rgba(0, 0, 0, 0.1),
+  0px 0px 0px scale-px(1px) rgba(0, 0, 0, 0.02)
 ) !default;
 /* #endif */
 $switch-label-text-color: var(
@@ -1091,7 +1085,7 @@ $tour-content-padding: var(
 ) !default;
 $tour-content-inner-margin: var(
   --nutui-tour-content-inner-margin,
-  scale-px(10px) scale-px(0px)
+  scale-px(10px) 0px
 ) !default;
 $tour-content-inner-font-size: var(
   --nutui-tour-content-inner-font-size,
@@ -1182,7 +1176,7 @@ $hoverbutton-position-right: var(
 ) !default;
 $hoverbutton-item-size: var(
   --nutui-hoverbutton-item-size,
-  scale-font-px(40px)
+  scale-px(40px)
 ) !default;
 $hoverbutton-item-border-color: var(
   --nutui-hoverbutton-item-border-color,
@@ -1245,17 +1239,14 @@ $popup-animation-duration: var(--nutui-popup-animation-duration, 0.3s) !default;
 
 // Notify（✅）
 $notify-height: var(--nutui-notify-height, scale-px(40px)) !default;
-$notify-padding: var(
-  --nutui-notify-padding,
-  scale-px(0px) scale-px(12px)
-) !default;
+$notify-padding: var(--nutui-notify-padding, 0px scale-px(12px)) !default;
 $notify-border-radius: var(
   --nutui-notify-border-radius,
   scale-px(8px)
 ) !default;
 $notify-box-shadow: var(
   --nutui-notify-box-shadow,
-  scale-px(0px) scale-px(4px) scale-px(12px) scale-px(0px) rgba(0, 0, 0, 0.06)
+  0px scale-px(4px) scale-px(12px) 0px rgba(0, 0, 0, 0.06)
 ) !default;
 $notify-z-index: var(--nutui-notify-z-index, 1000) !default;
 $notify-text-color: var(--nutui-notify-text-color, $color-title) !default;
@@ -1383,7 +1374,7 @@ $steps-base-head-color: var(
 ) !default;
 $steps-base-head-dot-size: var(
   --nutui-steps-base-head-dot-size,
-  scale-font-px(6px)
+  scale-px(6px)
 ) !default;
 $steps-base-head-dot-background-color: var(
   --nutui-steps-base-head-dot-background-color,
@@ -1395,11 +1386,11 @@ $steps-base-head-icon-size: var(
 ) !default;
 $steps-double-head-icon-size: var(
   --nutui-steps-base-head-icon-size-right,
-  scale-font-px(20px)
+  scale-px(20px)
 ) !default;
 $steps-vertical-head-icon-size: var(
   --nutui-steps-vertical-item-icon-size,
-  scale-font-px(20px)
+  scale-px(20px)
 ) !default;
 $steps-base-line-height: var(
   --nutui-steps-base-line-height,
@@ -1620,7 +1611,7 @@ $dialog-footer-badge-top: var(
 ) !default;
 $dialog-footer-badge-border-radius: var(
   --nutui-dialog-footer-badge-border-radius,
-  scale-px(2px) scale-px(2px) scale-px(0px) scale-px(2px)
+  scale-px(2px) scale-px(2px) 0px scale-px(2px)
 ) !default;
 $dialog-footer-badge-bg-ok: var(
   --nutui-dialog-footer-badge-bg-ok,
@@ -1651,7 +1642,7 @@ $dialog-vertical-footer-ok-margin-top: var(
   scale-px(16px)
 ) !default;
 $dialog-close-color: var(--nutui-dialog-close-color, #ffffff) !default;
-$dialog-close-width: var(--nutui-dialog-close-width, $font-size-icon) !default;
+$dialog-close-width: var(--nutui-dialog-close-width, scale-px(16px)) !default;
 $dialog-close-height: var(--nutui-dialog-close-height, scale-px(16px)) !default;
 $dialog-bottom-close-icon-size: var(
   --nutui-dialog-bottom-close-icon-size,
@@ -1875,7 +1866,7 @@ $timeselect-time-background: var(
 ) !default;
 
 //tag（✅）
-$tag-padding: var(--nutui-tag-padding, scale-px(0px) scale-px(2px)) !default;
+$tag-padding: var(--nutui-tag-padding, 0px scale-px(2px)) !default;
 $tag-font-size: var(--nutui-tag-font-size, $font-size-xxs) !default;
 $tag-border-radius: var(--nutui-tag-border-radius, scale-px(2px)) !default;
 $tag-height: var(--nutui-tag-height, scale-px(14px)) !default;
@@ -2315,10 +2306,7 @@ $searchbar-content-round-border-radius: var(
   --nutui-searchbar-content-round-border-radius,
   scale-px(19px)
 ) !default;
-$searchbar-icon-size: var(
-  --nutui-searchbar-icon-size,
-  scale-font-px(20px)
-) !default;
+$searchbar-icon-size: var(--nutui-searchbar-icon-size, scale-px(20px)) !default;
 $searchbar-input-height: var(
   --nutui-searchbar-input-height,
   scale-px(38px)
@@ -2381,10 +2369,7 @@ $empty-image-small-size: var(
   --nutui-empty-image-small-size,
   scale-px(120px)
 ) !default;
-$empty-title-margin-top: var(
-  --nutui-empty-title-margin-top,
-  scale-px(0px)
-) !default;
+$empty-title-margin-top: var(--nutui-empty-title-margin-top, 0px) !default;
 $empty-background-color: var(
   --nutui-empty-background-color,
   $color-background-overlay
@@ -2441,13 +2426,10 @@ $cascader-item-padding: var(
   --nutui-cascader-item-padding,
   scale-px(10px) scale-px(20px)
 ) !default;
-$cascader-item-margin: var(
-  --nutui-cascader-item-margin,
-  scale-px(0px)
-) !default;
+$cascader-item-margin: var(--nutui-cascader-item-margin, 0px) !default;
 $cascader-item-border-bottom: var(
   --nutui-cascader-item-border-bottom,
-  scale-px(0px) solid $color-border
+  0px solid $color-border
 ) !default;
 $cascader-item-color: var(--nutui-cascader-item-color, $color-title) !default;
 $cascader-item-font-size: var(
@@ -2537,7 +2519,7 @@ $skeleton-line-border-radius: var(
 $card-border-radius: var(--nutui-card-border-radius, scale-px(4px)) !default;
 
 // grid（✅）
-$grid-border-width: var(--nutui-grid-border-width, scale-px(0px)) !default;
+$grid-border-width: var(--nutui-grid-border-width, 0px) !default;
 $grid-border-color: var(--nutui-grid-border-color, $color-border) !default;
 $grid-item-border-radius: var(
   --nutui-grid-item-border-radius,

From 1f36f708989f5ed5ea515cdafc207c6e96f39c3a Mon Sep 17 00:00:00 2001
From: songchenglin3 <353833373@qq.com>
Date: Sat, 9 May 2026 10:46:58 +0800
Subject: [PATCH 05/18] =?UTF-8?q?style:=20=E6=A0=B7=E5=BC=8F=E5=A4=9A?=
 =?UTF-8?q?=E5=B0=BA=E5=AF=B8=E9=80=82=E9=85=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/packages/checkbox/checkbox.scss     |  10 +-
 src/packages/navbar/navbar.scss         |   1 +
 src/packages/popover/popover.scss       |   2 +
 src/packages/popover/popover.tsx        |   2 +-
 src/packages/segmented/segmented.scss   |   2 +
 src/packages/step/step.scss             |   1 -
 src/packages/steps/steps.scss           |  26 ++-
 src/packages/tag/tag.scss               |   5 +
 src/packages/tag/tag.taro.tsx           |   2 +-
 src/packages/tag/tag.tsx                |   3 +-
 src/packages/timeselect/timeselect.scss |   2 +-
 src/sites/mobile/main.tsx               |   2 +-
 src/styles/theme-dark.scss              |  72 +++++--
 src/styles/theme-default.scss           |  72 +++++--
 src/styles/variables.scss               |  32 ++--
 src/utils/index.taro.ts                 |   1 +
 src/utils/scale-f.taro.ts               | 237 ++++++++++++++++++++++++
 src/utils/scale-f.ts                    |  12 +-
 18 files changed, 408 insertions(+), 76 deletions(-)
 create mode 100644 src/utils/scale-f.taro.ts

diff --git a/src/packages/checkbox/checkbox.scss b/src/packages/checkbox/checkbox.scss
index f2772cfdee..940f910880 100644
--- a/src/packages/checkbox/checkbox.scss
+++ b/src/packages/checkbox/checkbox.scss
@@ -103,10 +103,10 @@
       bottom: 0;
       width: 0;
       height: 0;
-      border-top: scale-px(10px) solid transparent;
-      border-left: scale-px(10px) solid transparent;
-      border-bottom: scale-px(10px) solid $color-primary;
-      border-right: scale-px(10px) solid $color-primary;
+      border-top: scale-icon-px(10px) solid transparent;
+      border-left: scale-icon-px(10px) solid transparent;
+      border-bottom: scale-icon-px(10px) solid $color-primary;
+      border-right: scale-icon-px(10px) solid $color-primary;
       display: flex;
       align-items: flex-end;
       justify-content: flex-end;
@@ -117,7 +117,7 @@
       height: scale-px(12px);
       position: absolute;
       color: $white;
-      right: 0;
+      right: 0px;
       bottom: 0;
       transform: translate(scale-px(-1px), scale-px(-2px));
     }
diff --git a/src/packages/navbar/navbar.scss b/src/packages/navbar/navbar.scss
index 5e5b0c90be..701c006fa5 100644
--- a/src/packages/navbar/navbar.scss
+++ b/src/packages/navbar/navbar.scss
@@ -48,6 +48,7 @@
     font-size: $navbar-title-font-size;
     font-weight: $navbar-title-font-weight;
     color: $navbar-title-font-color;
+    white-space: nowrap;
 
     &-center {
       max-width: scale-px(129px);
diff --git a/src/packages/popover/popover.scss b/src/packages/popover/popover.scss
index ac25a51623..fb17684946 100644
--- a/src/packages/popover/popover.scss
+++ b/src/packages/popover/popover.scss
@@ -12,6 +12,8 @@
     .nut-icon-ArrowRadius {
       position: absolute;
       color: $popover-content-background-color;
+      width: scale-px(8px);
+      height: scale-px(4px);
     }
 
     &-top {
diff --git a/src/packages/popover/popover.tsx b/src/packages/popover/popover.tsx
index 24c17f6eb0..e95789ec6c 100644
--- a/src/packages/popover/popover.tsx
+++ b/src/packages/popover/popover.tsx
@@ -293,7 +293,7 @@ export const Popover: FunctionComponent<
               >
                 {showArrow && (
                   <div className={popoverArrow()} style={popoverArrowStyle()}>
-                    <ArrowRadius width={8} height={4} />
+                    <ArrowRadius />
                   </div>
                 )}
                 {Array.isArray(children) ? children[1] : null}
diff --git a/src/packages/segmented/segmented.scss b/src/packages/segmented/segmented.scss
index 4791272752..4a27e5d9fd 100644
--- a/src/packages/segmented/segmented.scss
+++ b/src/packages/segmented/segmented.scss
@@ -32,6 +32,8 @@
 }
 
 .nut-segmented-icon {
+  display: flex;
+  align-items: center;
   height: scale-px(10px);
   width: scale-px(10px);
   margin-right: $segmented-icon-margin-right;
diff --git a/src/packages/step/step.scss b/src/packages/step/step.scss
index f46ec86438..0877ed6e9c 100644
--- a/src/packages/step/step.scss
+++ b/src/packages/step/step.scss
@@ -90,7 +90,6 @@
     line-height: scale-px(14px);
     font-size: $steps-base-title-font-size;
     color: $steps-base-title-color;
-    overflow: hidden;
     white-space: nowrap;
   }
 
diff --git a/src/packages/steps/steps.scss b/src/packages/steps/steps.scss
index 1bc6fb7e29..e00e62aa5a 100644
--- a/src/packages/steps/steps.scss
+++ b/src/packages/steps/steps.scss
@@ -13,8 +13,8 @@
 
         &-icon {
           .nut-icon {
-            height: scale-px(10px);
-            width: scale-px(10px);
+            height: scale-icon-px(10px);
+            width: scale-icon-px(10px);
           }
 
           .nut-image {
@@ -108,6 +108,7 @@
         flex-direction: column;
         align-items: center;
         flex: 1;
+        min-width: 0;
 
         &-line {
           top: 0;
@@ -130,7 +131,7 @@
 
         &-head {
           justify-content: center;
-          margin-bottom: scale-px(6px);
+          margin-bottom: scale-px(5px);
 
           &-dot-wrap,
           &-icon-wrap,
@@ -145,15 +146,22 @@
           width: $steps-double-head-icon-size;
 
           .nut-icon {
-            height: scale-px(12px);
-            width: scale-px(12px);
+            height: scale-icon-px(12px);
+            width: scale-icon-px(12px);
           }
         }
 
         &-main {
           align-items: center;
           margin-left: 0;
-          margin-top: scale-px(2px);
+        }
+
+        &-title {
+          height: auto;
+          line-height: scale-px(20px);
+          white-space: normal;
+          overflow-wrap: break-word;
+          text-align: center;
         }
       }
 
@@ -214,15 +222,15 @@
       &-head {
         align-items: center;
         justify-content: center;
-        height: scale-px(18px);
+        height: scale-px(20px);
 
         &-icon {
           width: $steps-vertical-head-icon-size;
           height: $steps-vertical-head-icon-size;
 
           .nut-icon {
-            height: scale-px(12px);
-            width: scale-px(12px);
+            height: scale-icon-px(12px);
+            width: scale-icon-px(12px);
           }
         }
       }
diff --git a/src/packages/tag/tag.scss b/src/packages/tag/tag.scss
index c9589e8e64..7d1494c819 100644
--- a/src/packages/tag/tag.scss
+++ b/src/packages/tag/tag.scss
@@ -79,6 +79,11 @@
     background-color: #fff;
     border: $tag-border-width solid $color-title;
   }
+
+  &-close-icon {
+    width: scale-icon-px(8px);
+    height: scale-icon-px(8px);
+  }
 }
 
 [dir='rtl'] .nut-tag,
diff --git a/src/packages/tag/tag.taro.tsx b/src/packages/tag/tag.taro.tsx
index 61de7454b6..308b322e57 100644
--- a/src/packages/tag/tag.taro.tsx
+++ b/src/packages/tag/tag.taro.tsx
@@ -105,7 +105,7 @@ export const Tag: FunctionComponent<Partial<TaroTagProps>> = (props) => {
               </View>
             ) : (
               <Close
-                size={8}
+                className={`${classPrefix}-close-icon`}
                 onClick={(e) => {
                   setVisible(false)
                   onClose && onClose(e as any)
diff --git a/src/packages/tag/tag.tsx b/src/packages/tag/tag.tsx
index f4798fe18d..d86292335d 100644
--- a/src/packages/tag/tag.tsx
+++ b/src/packages/tag/tag.tsx
@@ -104,8 +104,7 @@ export const Tag: FunctionComponent<Partial<WebTagProps>> = (props) => {
               </i>
             ) : (
               <Close
-                width={8}
-                height={8}
+                className={`${classPrefix}-close-icon`}
                 onClick={(e) => {
                   setVisible(false)
                   onClose && onClose(e)
diff --git a/src/packages/timeselect/timeselect.scss b/src/packages/timeselect/timeselect.scss
index 42367ca1f0..fa8552ff76 100644
--- a/src/packages/timeselect/timeselect.scss
+++ b/src/packages/timeselect/timeselect.scss
@@ -13,7 +13,7 @@
   }
 
   &-content-left {
-    width: $timeselect-date-width;
+    // width: $timeselect-date-width;
     min-width: $timeselect-date-width;
     height: 100%;
     /* #ifndef dynamic*/
diff --git a/src/sites/mobile/main.tsx b/src/sites/mobile/main.tsx
index 4375a84772..f83d6b6859 100644
--- a/src/sites/mobile/main.tsx
+++ b/src/sites/mobile/main.tsx
@@ -29,7 +29,7 @@ if (!isMobile && pathname.includes('demo') && !pathname.includes('jmapp')) {
 }
 
 if (rootElement != null) {
-  initScaleF()
+  initScaleF('elderly')
   const root = ReactDOM.createRoot(rootElement)
   root.render(<App />)
 }
diff --git a/src/styles/theme-dark.scss b/src/styles/theme-dark.scss
index ad8ff1248f..fa1191768d 100644
--- a/src/styles/theme-dark.scss
+++ b/src/styles/theme-dark.scss
@@ -228,25 +228,59 @@ page {
   --nutui-color-border-disabled: var(--nutui-color-content-gray-1);
 
   // 字体 ok
-  --nutui-font-size-8: 8px;
-  --nutui-font-size-9: 9px;
-  --nutui-font-size-10: 10px;
-  --nutui-font-size-11: 11px;
-  --nutui-font-size-12: 12px;
-  --nutui-font-size-13: 13px;
-  --nutui-font-size-14: 14px;
-  --nutui-font-size-15: 15px;
-  --nutui-font-size-16: 16px;
-  --nutui-font-size-17: 17px;
-  --nutui-font-size-18: 18px;
-  --nutui-font-size-19: 19px;
-  --nutui-font-size-20: 20px;
-  --nutui-font-size-21: 21px;
-  --nutui-font-size-22: 22px;
-  --nutui-font-size-23: 23px;
-  --nutui-font-size-24: 24px;
-  --nutui-font-size-25: 25px;
-  --nutui-font-size-26: 26px;
+  --nutui-font-size-8: calc(8px * var(--nut-scale-font, var(--nut-scale-f, 1)));
+  --nutui-font-size-9: calc(9px * var(--nut-scale-font, var(--nut-scale-f, 1)));
+  --nutui-font-size-10: calc(
+    10px * var(--nut-scale-font, var(--nut-scale-f, 1))
+  );
+  --nutui-font-size-11: calc(
+    11px * var(--nut-scale-font, var(--nut-scale-f, 1))
+  );
+  --nutui-font-size-12: calc(
+    12px * var(--nut-scale-font, var(--nut-scale-f, 1))
+  );
+  --nutui-font-size-13: calc(
+    13px * var(--nut-scale-font, var(--nut-scale-f, 1))
+  );
+  --nutui-font-size-14: calc(
+    14px * var(--nut-scale-font, var(--nut-scale-f, 1))
+  );
+  --nutui-font-size-15: calc(
+    15px * var(--nut-scale-font, var(--nut-scale-f, 1))
+  );
+  --nutui-font-size-16: calc(
+    16px * var(--nut-scale-font, var(--nut-scale-f, 1))
+  );
+  --nutui-font-size-17: calc(
+    17px * var(--nut-scale-font, var(--nut-scale-f, 1))
+  );
+  --nutui-font-size-18: calc(
+    18px * var(--nut-scale-font, var(--nut-scale-f, 1))
+  );
+  --nutui-font-size-19: calc(
+    19px * var(--nut-scale-font, var(--nut-scale-f, 1))
+  );
+  --nutui-font-size-20: calc(
+    20px * var(--nut-scale-font, var(--nut-scale-f, 1))
+  );
+  --nutui-font-size-21: calc(
+    21px * var(--nut-scale-font, var(--nut-scale-f, 1))
+  );
+  --nutui-font-size-22: calc(
+    22px * var(--nut-scale-font, var(--nut-scale-f, 1))
+  );
+  --nutui-font-size-23: calc(
+    23px * var(--nut-scale-font, var(--nut-scale-f, 1))
+  );
+  --nutui-font-size-24: calc(
+    24px * var(--nut-scale-font, var(--nut-scale-f, 1))
+  );
+  --nutui-font-size-25: calc(
+    25px * var(--nut-scale-font, var(--nut-scale-f, 1))
+  );
+  --nutui-font-size-26: calc(
+    26px * var(--nut-scale-font, var(--nut-scale-f, 1))
+  );
 
   // 字号语义化
   // 徽标文字
diff --git a/src/styles/theme-default.scss b/src/styles/theme-default.scss
index aa5d69a673..831650b859 100644
--- a/src/styles/theme-default.scss
+++ b/src/styles/theme-default.scss
@@ -227,25 +227,59 @@ page {
   --nutui-color-border-disabled: var(--nutui-color-content-gray-1);
 
   // 字体 ok
-  --nutui-font-size-8: 8px;
-  --nutui-font-size-9: 9px;
-  --nutui-font-size-10: 10px;
-  --nutui-font-size-11: 11px;
-  --nutui-font-size-12: 12px;
-  --nutui-font-size-13: 13px;
-  --nutui-font-size-14: 14px;
-  --nutui-font-size-15: 15px;
-  --nutui-font-size-16: 16px;
-  --nutui-font-size-17: 17px;
-  --nutui-font-size-18: 18px;
-  --nutui-font-size-19: 19px;
-  --nutui-font-size-20: 20px;
-  --nutui-font-size-21: 21px;
-  --nutui-font-size-22: 22px;
-  --nutui-font-size-23: 23px;
-  --nutui-font-size-24: 24px;
-  --nutui-font-size-25: 25px;
-  --nutui-font-size-26: 26px;
+  --nutui-font-size-8: calc(8px * var(--nut-scale-font, var(--nut-scale-f, 1)));
+  --nutui-font-size-9: calc(9px * var(--nut-scale-font, var(--nut-scale-f, 1)));
+  --nutui-font-size-10: calc(
+    10px * var(--nut-scale-font, var(--nut-scale-f, 1))
+  );
+  --nutui-font-size-11: calc(
+    11px * var(--nut-scale-font, var(--nut-scale-f, 1))
+  );
+  --nutui-font-size-12: calc(
+    12px * var(--nut-scale-font, var(--nut-scale-f, 1))
+  );
+  --nutui-font-size-13: calc(
+    13px * var(--nut-scale-font, var(--nut-scale-f, 1))
+  );
+  --nutui-font-size-14: calc(
+    14px * var(--nut-scale-font, var(--nut-scale-f, 1))
+  );
+  --nutui-font-size-15: calc(
+    15px * var(--nut-scale-font, var(--nut-scale-f, 1))
+  );
+  --nutui-font-size-16: calc(
+    16px * var(--nut-scale-font, var(--nut-scale-f, 1))
+  );
+  --nutui-font-size-17: calc(
+    17px * var(--nut-scale-font, var(--nut-scale-f, 1))
+  );
+  --nutui-font-size-18: calc(
+    18px * var(--nut-scale-font, var(--nut-scale-f, 1))
+  );
+  --nutui-font-size-19: calc(
+    19px * var(--nut-scale-font, var(--nut-scale-f, 1))
+  );
+  --nutui-font-size-20: calc(
+    20px * var(--nut-scale-font, var(--nut-scale-f, 1))
+  );
+  --nutui-font-size-21: calc(
+    21px * var(--nut-scale-font, var(--nut-scale-f, 1))
+  );
+  --nutui-font-size-22: calc(
+    22px * var(--nut-scale-font, var(--nut-scale-f, 1))
+  );
+  --nutui-font-size-23: calc(
+    23px * var(--nut-scale-font, var(--nut-scale-f, 1))
+  );
+  --nutui-font-size-24: calc(
+    24px * var(--nut-scale-font, var(--nut-scale-f, 1))
+  );
+  --nutui-font-size-25: calc(
+    25px * var(--nut-scale-font, var(--nut-scale-f, 1))
+  );
+  --nutui-font-size-26: calc(
+    26px * var(--nut-scale-font, var(--nut-scale-f, 1))
+  );
 
   // 字号语义化
   // 徽标文字
diff --git a/src/styles/variables.scss b/src/styles/variables.scss
index 31b0c40b35..60308ce3b1 100644
--- a/src/styles/variables.scss
+++ b/src/styles/variables.scss
@@ -1,18 +1,28 @@
 // ----------------------------------------------------
 // 缩放系数
 :root {
-  --scale-f: 1;
-  --scale-font: var(--scale-f, 1);
-  --scale-icon: var(--scale-f, 1);
+  --nut-scale-f: 1;
+  --nut-scale-font: var(--nut-scale-f, 1);
+  --nut-scale-icon: var(--nut-scale-f, 1);
+  // ---- icon size ----
+  --nut-icon-height: calc(
+    16px * var(--nut-scale-icon, var(--nut-scale-f, 1))
+  ) !important;
+  --nut-icon-width: calc(
+    16px * var(--nut-scale-icon, var(--nut-scale-f, 1))
+  ) !important;
+  --nut-icon-line-height: calc(
+    16px * var(--nut-scale-icon, var(--nut-scale-f, 1))
+  ) !important;
 }
 @function scale-px($size) {
-  @return calc(#{$size} * var(--scale-f, 1));
+  @return calc(#{$size} * var(--nut-scale-f, 1));
 }
 @function scale-font-px($size) {
-  @return calc(#{$size} * var(--scale-font, var(--scale-f, 1)));
+  @return calc(#{$size} * var(--nut-scale-font, var(--nut-scale-f, 1)));
 }
 @function scale-icon-px($size) {
-  @return calc(#{$size} * var(--scale-icon, var(--scale-f, 1)));
+  @return calc(#{$size} * var(--nut-scale-icon, var(--nut-scale-f, 1)));
 }
 // 主色调 // done
 $color-primary: var(--nutui-color-primary, #ff0f23) !default;
@@ -1374,7 +1384,7 @@ $steps-base-head-color: var(
 ) !default;
 $steps-base-head-dot-size: var(
   --nutui-steps-base-head-dot-size,
-  scale-px(6px)
+  scale-icon-px(6px)
 ) !default;
 $steps-base-head-dot-background-color: var(
   --nutui-steps-base-head-dot-background-color,
@@ -1519,7 +1529,7 @@ $steps-horizontal-item-special-3-padding-right: var(
 ) !default;
 $steps-vertical-item-padding-bottom: var(
   --nutui-steps-vertical-item-padding-bottom,
-  scale-px(13px)
+  scale-px(12px)
 ) !default;
 $steps-vertical-title-font-size: var(
   --nutui-steps-vertical-title-font-size,
@@ -1527,11 +1537,11 @@ $steps-vertical-title-font-size: var(
 ) !default;
 $steps-vertical-title-margin-bottom: var(
   --nutui-steps-vertical-title-margin-bottom,
-  scale-px(4px)
+  scale-px(3px)
 ) !default;
 $steps-vertical-line-height: var(
   --nutui-steps-vertical-line-height,
-  scale-px(18px)
+  scale-px(20px)
 ) !default;
 $steps-vertical-description-font-size: var(
   --nutui-steps-vertical-description-font-size,
@@ -1850,7 +1860,7 @@ $timeselect-date-active-color: var(
 ) !default;
 $timeselect-time-width: var(
   --nutui-timeselect-time-width,
-  scale-px(100px)
+  scale-px(110px)
 ) !default;
 $timeselect-time-height: var(
   --nutui-timeselect-time-height,
diff --git a/src/utils/index.taro.ts b/src/utils/index.taro.ts
index dba3cac020..6c90276045 100644
--- a/src/utils/index.taro.ts
+++ b/src/utils/index.taro.ts
@@ -26,6 +26,7 @@ export * from './taro/px-transform'
 export * from './raf'
 export * from './render'
 export * from './rubberband'
+export * from './scale-f.taro'
 export * from './sleep'
 export * from './supports-passive'
 export * from './to-array'
diff --git a/src/utils/scale-f.taro.ts b/src/utils/scale-f.taro.ts
new file mode 100644
index 0000000000..db672e4b1c
--- /dev/null
+++ b/src/utils/scale-f.taro.ts
@@ -0,0 +1,237 @@
+/**
+ * Taro/H5 缩放系数：优先尝试站内原生桥，失败回退到视口规则，
+ * 并写入 --nut-scale-f / --nut-scale-font / --nut-scale-icon 供样式层消费。
+ */
+import { canUseDom } from './can-use-dom'
+
+/** 原生 DongScreenAdapterPlugin.getScale 的典型返回结构 */
+type NativeScaleResponse = {
+  status?: string
+  data?: {
+    scale?: number | string
+  }
+}
+
+/** jmfe 通用 callNative 签名 */
+type NativeCaller = (
+  plugin: string,
+  method: string,
+  params: string,
+  extra: string
+) => Promise<NativeScaleResponse>
+
+/** 站内容器的 jmfe 桥接方法（可选） */
+declare global {
+  interface Window {
+    jmfe?: {
+      callNative?: NativeCaller
+    }
+  }
+}
+
+/** 当前基准缩放（来自原生或视口计算） */
+let scale = 1
+/** 字体档位：标准、大字、老年 */
+export type ScaleProfile = 'standard' | 'large' | 'elderly'
+/** 不同场景可选用不同放大比例（layout 等默认可不额外放大） */
+export type ScaleScene = 'layout' | 'font' | 'icon' | 'lego'
+export type ScaleDevice = 'phone' | 'pad'
+
+/** 视口大于等于该宽度时按平板处理 */
+const PAD_BREAKPOINT = 600
+/** 平板默认整体缩放倍数 */
+const PAD_SCALE = 1.2
+/** 大字模式下仅 font 场景的相对倍率 */
+const LARGE_FONT_RATIO = 1.15
+/** 老年模式下 font/icon/lego 场景的相对倍率 */
+const ELDERLY_RATIO = 1.3
+
+/** 全局当前档位，与 scale 共同参与 calcByProfile */
+let profile: ScaleProfile = 'standard'
+
+/** 仅 large / elderly 有效，其余一律视为 standard */
+function normalizeProfile(nextProfile?: ScaleProfile) {
+  if (nextProfile === 'large' || nextProfile === 'elderly') return nextProfile
+  return 'standard'
+}
+
+/** 计算 CSS 变量要使用的场景缩放（基准 scale × 场景倍率） */
+function getCssSceneScale(scene: ScaleScene, baseScale: number) {
+  return baseScale * getSceneRatio(scene, profile)
+}
+
+/** 将缩放值同步到 :root 的 --nut-scale-f / --nut-scale-font / --nut-scale-icon */
+function applyScaleCssVars(nextScale: number) {
+  if (!canUseDom) return
+  const rootStyle = document.documentElement.style
+  rootStyle.setProperty('--nut-scale-f', formatScaleValue(nextScale))
+  rootStyle.setProperty(
+    '--nut-scale-font',
+    formatScaleValue(getCssSceneScale('font', nextScale))
+  )
+  rootStyle.setProperty(
+    '--nut-scale-icon',
+    formatScaleValue(getCssSceneScale('icon', nextScale))
+  )
+}
+
+/** >1 保留两位小数字符串；否则取整，与 CSS 消费端约定一致 */
+function formatScaleValue(nextScale: number) {
+  if (nextScale > 1) {
+    return (Math.round(nextScale * 100) / 100).toFixed(2)
+  }
+  return `${Math.round(nextScale)}`
+}
+
+/** 根据屏宽粗略区分 phone / pad */
+function getCurrentDevice(): ScaleDevice {
+  if (!canUseDom) return 'phone'
+  return window.innerWidth >= PAD_BREAKPOINT ? 'pad' : 'phone'
+}
+
+/** 在 profile 与 scene 维度上叠加额外倍率（与全局 scale 相乘） */
+function getSceneRatio(scene: ScaleScene, currentProfile: ScaleProfile) {
+  if (
+    currentProfile === 'elderly' &&
+    (scene === 'font' || scene === 'icon' || scene === 'lego')
+  ) {
+    return ELDERLY_RATIO
+  }
+  if (currentProfile === 'large' && scene === 'font') {
+    return LARGE_FONT_RATIO
+  }
+  return 1
+}
+
+/** 输出 px 等单位时的取整规则：缩放>1 或强制时保留两位小数精度 */
+function roundByScaleRule(
+  value: number,
+  baseScale: number,
+  forceKeepTwoDecimals = false
+) {
+  if (forceKeepTwoDecimals || baseScale > 1) {
+    return Math.round(value * 100) / 100
+  }
+  return Math.round(value)
+}
+
+/** 无原生桥时按屏宽推算 scale（含平板与 375 基准窄屏区间） */
+function getScaleByViewport() {
+  if (!canUseDom) return 1
+  const deviceWidth = window.innerWidth
+
+  if (!deviceWidth) return 1
+
+  if (deviceWidth >= PAD_BREAKPOINT) {
+    return PAD_SCALE
+  }
+
+  if (deviceWidth >= 375 && deviceWidth < 600) {
+    const ratio = deviceWidth / 375
+    return ratio >= 1.17 ? 1.17 : ratio
+  }
+
+  return 1
+}
+
+/** 通过 jmfe.callNative 拉取 DongScreenAdapterPlugin；失败返回 null */
+async function getScaleByNative() {
+  if (!canUseDom || !window.jmfe?.callNative) return null
+
+  try {
+    const res = await window.jmfe.callNative(
+      'DongScreenAdapterPlugin',
+      'getScale',
+      JSON.stringify({}),
+      ''
+    )
+    if (res?.status === '0' && res.data?.scale !== undefined) {
+      const parsed = Number(res.data.scale)
+      if (Number.isFinite(parsed) && parsed > 0) {
+        return parsed
+      }
+    }
+  } catch {
+    // ignore native failures and fallback to viewport rule
+  }
+
+  return null
+}
+
+/** 统一获取缩放：站内原生优先，失败则用视口规则 */
+async function getScaleF() {
+  const nativeScale = await getScaleByNative()
+  if (nativeScale) return nativeScale
+  return getScaleByViewport()
+}
+
+/** 校验后更新内存中的 scale，并写入 --nut-scale-f */
+function setScaleF(nextScale: number) {
+  const validScale = Number.isFinite(nextScale) && nextScale > 0 ? nextScale : 1
+  scale = validScale
+  applyScaleCssVars(validScale)
+  return scale
+}
+
+/** 重新拉取缩放；可选同时切换 profile，避免与当前值相同时重复写 DOM */
+async function refreshScaleF(nextProfile?: ScaleProfile) {
+  if (nextProfile) {
+    setScaleProfile(nextProfile)
+  }
+  const nextScale = await getScaleF()
+  if (!scale || nextScale !== scale) {
+    setScaleF(nextScale)
+  }
+  return scale
+}
+
+/** 首次计算缩放并订阅 resize；返回卸载函数（SSR 下为空函数） */
+export function initScaleF(nextProfile?: ScaleProfile) {
+  if (!canUseDom) return () => {}
+  setScaleProfile(nextProfile)
+
+  const handler = () => {
+    refreshScaleF()
+  }
+
+  handler()
+  window.addEventListener('resize', handler)
+
+  return () => {
+    window.removeEventListener('resize', handler)
+  }
+}
+
+/** 更新全局 profile，并在当前 scale 下重刷 CSS 变量 */
+function setScaleProfile(nextProfile?: ScaleProfile) {
+  profile = normalizeProfile(nextProfile)
+  setScaleF(scale)
+  return profile
+}
+
+/** calcByProfile 的可选覆盖项：临时指定档位、场景、scale 或设备 */
+type CalcByProfileOptions = {
+  profile?: ScaleProfile
+  scene?: ScaleScene
+  scale?: number
+  device?: ScaleDevice
+}
+
+/** 按档位与场景将设计稿基准值换算为实际数值：base × 场景倍率 × 当前 scale，再按规则取整。 */
+export function calcByProfile(
+  baseValue: number,
+  options: CalcByProfileOptions = {}
+) {
+  const currentProfile = normalizeProfile(options.profile ?? profile)
+  const scene = options.scene ?? 'layout'
+  const currentScale =
+    Number.isFinite(options.scale) && Number(options.scale) > 0
+      ? Number(options.scale)
+      : scale
+  const device = options.device ?? getCurrentDevice()
+  const ratio = getSceneRatio(scene, currentProfile)
+  const rawValue = baseValue * ratio * currentScale
+  const forceKeepTwoDecimals =
+    scene === 'font' && currentProfile === 'large' && device === 'pad'
+  return roundByScaleRule(rawValue, currentScale, forceKeepTwoDecimals)
+}
diff --git a/src/utils/scale-f.ts b/src/utils/scale-f.ts
index 7bbf721481..38ded9c371 100644
--- a/src/utils/scale-f.ts
+++ b/src/utils/scale-f.ts
@@ -1,5 +1,5 @@
 /**
- * 响应式缩放系数（--scale-f）：结合京东站内原生桥与站外视口规则，
+ * 响应式缩放系数（--nut-scale-f）：结合京东站内原生桥与站外视口规则，
  * 写入根节点 CSS 变量，供布局/字号/icon 等按比例换算（见 calcByProfile）。
  */
 import { canUseDom } from './can-use-dom'
@@ -61,17 +61,17 @@ function getCssSceneScale(scene: ScaleScene, baseScale: number) {
   return baseScale * getSceneRatio(scene, profile)
 }
 
-/** 将缩放值同步到 :root 的 --scale-f / --scale-font / --scale-icon */
+/** 将缩放值同步到 :root 的 --nut-scale-f / --nut-scale-font / --nut-scale-icon */
 function applyScaleCssVars(nextScale: number) {
   if (!canUseDom) return
   const rootStyle = document.documentElement.style
-  rootStyle.setProperty('--scale-f', formatScaleValue(nextScale))
+  rootStyle.setProperty('--nut-scale-f', formatScaleValue(nextScale))
   rootStyle.setProperty(
-    '--scale-font',
+    '--nut-scale-font',
     formatScaleValue(getCssSceneScale('font', nextScale))
   )
   rootStyle.setProperty(
-    '--scale-icon',
+    '--nut-scale-icon',
     formatScaleValue(getCssSceneScale('icon', nextScale))
   )
 }
@@ -166,7 +166,7 @@ async function getScaleF() {
   return getScaleByViewport()
 }
 
-/** 校验后更新内存中的 scale，并写入 --scale-f */
+/** 校验后更新内存中的 scale，并写入 --nut-scale-f */
 function setScaleF(nextScale: number) {
   const validScale = Number.isFinite(nextScale) && nextScale > 0 ? nextScale : 1
   scale = validScale

From 5565d44a1b820911078280439e3d14254dbce1fa Mon Sep 17 00:00:00 2001
From: songchenglin3 <353833373@qq.com>
Date: Sat, 9 May 2026 19:46:53 +0800
Subject: [PATCH 06/18] =?UTF-8?q?style:=20=E6=A0=B7=E5=BC=8F=E5=A4=9A?=
 =?UTF-8?q?=E5=B0=BA=E5=AF=B8=E9=80=82=E9=85=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/packages/calendarcard/calendarcard.scss   |  1 +
 src/packages/inputnumber/inputnumber.scss     | 12 ++++++------
 src/packages/price/price.scss                 | 16 +++++++++-------
 src/packages/rate/rate.scss                   |  4 +++-
 src/packages/segmented/segmented.scss         |  2 +-
 src/packages/shortpassword/shortpassword.scss | 12 ++++++------
 src/packages/tour/tour.scss                   |  4 ++--
 7 files changed, 28 insertions(+), 23 deletions(-)

diff --git a/src/packages/calendarcard/calendarcard.scss b/src/packages/calendarcard/calendarcard.scss
index e069b11d53..6bba3e5099 100644
--- a/src/packages/calendarcard/calendarcard.scss
+++ b/src/packages/calendarcard/calendarcard.scss
@@ -3,6 +3,7 @@
   border-radius: scale-px(12px);
   overflow: hidden;
   font-size: $calendar-base-font-size;
+  line-height: $calendar-base-font-size;
   color: $color-title;
 
   &-header {
diff --git a/src/packages/inputnumber/inputnumber.scss b/src/packages/inputnumber/inputnumber.scss
index 73e01d4419..d156523df5 100644
--- a/src/packages/inputnumber/inputnumber.scss
+++ b/src/packages/inputnumber/inputnumber.scss
@@ -23,8 +23,8 @@
     height: $inputnumber-button-height;
     background-color: $inputnumber-button-background-color;
     .nut-icon {
-      --nut-icon-width: scale-px(10px);
-      --nut-icon-height: scale-px(10px);
+      width: scale-px(10px);
+      height: scale-px(10px);
     }
   }
 
@@ -66,12 +66,12 @@
   }
 
   &-icon-minus {
-    --nut-icon-width: scale-px(16px);
-    --nut-icon-height: scale-px(16px);
+    width: scale-px(16px);
+    height: scale-px(16px);
   }
 
   &-icon-plus {
-    --nut-icon-width: scale-px(16px);
-    --nut-icon-height: scale-px(16px);
+    width: scale-px(16px);
+    height: scale-px(16px);
   }
 }
diff --git a/src/packages/price/price.scss b/src/packages/price/price.scss
index a0cd0b824f..d68d30eb56 100644
--- a/src/packages/price/price.scss
+++ b/src/packages/price/price.scss
@@ -10,7 +10,6 @@
   &-decimal {
     color: $price-color;
     font-family: 'JDZH-Bold';
-    line-height: 1;
   }
 
   &-darkgray {
@@ -39,18 +38,22 @@
     padding-right: $price-symbol-padding-right;
     &-xlarge {
       font-size: $price-symbol-xlarge-size;
+      line-height: $price-symbol-xlarge-size;
     }
 
     &-large {
       font-size: $price-symbol-large-size;
+      line-height: $price-symbol-large-size;
     }
 
     &-normal {
       font-size: $price-symbol-normal-size;
+      line-height: $price-symbol-normal-size;
     }
 
     &-small {
       font-size: $price-symbol-small-size;
+      line-height: $price-symbol-small-size;
     }
 
     &-rtl {
@@ -62,45 +65,44 @@
   &-integer {
     &-xlarge {
       font-size: $price-integer-xlarge-size;
-      /* #ifdef dynamic */
       line-height: $price-integer-xlarge-size;
-      /* #endif */
     }
 
     &-large {
       font-size: $price-integer-large-size;
-      /* #ifdef dynamic */
       line-height: $price-integer-large-size;
-      /* #endif */
     }
 
     &-normal {
       font-size: $price-integer-normal-size;
-      /* #ifdef dynamic */
       line-height: $price-integer-normal-size;
-      /* #endif */
     }
 
     &-small {
       font-size: $price-integer-small-size;
+      line-height: $price-integer-small-size;
     }
   }
 
   &-decimal {
     &-xlarge {
       font-size: $price-decimal-xlarge-size;
+      line-height: $price-decimal-xlarge-size;
     }
 
     &-large {
       font-size: $price-decimal-large-size;
+      line-height: $price-decimal-large-size;
     }
 
     &-normal {
       font-size: $price-decimal-normal-size;
+      line-height: $price-decimal-normal-size;
     }
 
     &-small {
       font-size: $price-decimal-small-size;
+      line-height: $price-decimal-small-size;
     }
   }
 
diff --git a/src/packages/rate/rate.scss b/src/packages/rate/rate.scss
index 09d9e606f8..3646328b18 100644
--- a/src/packages/rate/rate.scss
+++ b/src/packages/rate/rate.scss
@@ -106,20 +106,22 @@
     align-items: center;
     color: $rate-font-color;
     font-family: 'JDZH-Regular';
-    line-height: 1;
 
     &-normal {
       padding-left: $rate-item-margin;
       font-size: $rate-font-size;
+      line-height: $rate-font-size;
     }
 
     &-large {
       font-size: calc($rate-font-size + scale-font-px(6px));
+      line-height: calc($rate-font-size + scale-font-px(6px));
       padding-left: calc($rate-item-margin * 2);
     }
 
     &-small {
       font-size: calc($rate-font-size - scale-font-px(2px));
+      line-height: calc($rate-font-size - scale-font-px(2px));
       padding-left: calc($rate-item-margin / 2);
     }
 
diff --git a/src/packages/segmented/segmented.scss b/src/packages/segmented/segmented.scss
index 4a27e5d9fd..ebe65addc1 100644
--- a/src/packages/segmented/segmented.scss
+++ b/src/packages/segmented/segmented.scss
@@ -23,7 +23,7 @@
   border-radius: $segmented-item-radius;
   color: $segmented-item-color;
   font-size: $segmented-item-fontsize;
-  line-height: 1;
+  line-height: $segmented-item-fontsize;
   box-sizing: border-box;
 }
 
diff --git a/src/packages/shortpassword/shortpassword.scss b/src/packages/shortpassword/shortpassword.scss
index 75820fd35f..8003ff02d0 100644
--- a/src/packages/shortpassword/shortpassword.scss
+++ b/src/packages/shortpassword/shortpassword.scss
@@ -10,7 +10,7 @@
   &-title {
     display: flex;
     justify-content: center;
-    line-height: 1;
+    line-height: $font-size-l;
     font-size: $font-size-l;
     color: $color-title;
   }
@@ -20,7 +20,7 @@
     justify-content: center;
     margin-top: scale-px(12px);
     margin-bottom: scale-px(24px);
-    line-height: 1;
+    line-height: $font-size-s;
     font-size: $font-size-s;
     color: $color-text;
   }
@@ -85,13 +85,13 @@
     width: scale-px(247px);
 
     &-error {
-      line-height: 1;
+      line-height: $font-size-xs;
       font-size: $font-size-xs;
       color: $shortpassword-error;
     }
 
     &-forget {
-      line-height: 1;
+      line-height: $font-size-s;
       font-size: $font-size-s;
       color: $shortpassword-forget;
       display: flex;
@@ -113,7 +113,7 @@
       border: scale-px(1px) solid $color-primary;
       border-radius: scale-px(15px);
       padding: scale-px(8px) scale-px(38px);
-      line-height: 1;
+      line-height: $font-size-base;
       font-size: $font-size-base;
       color: $color-primary;
     }
@@ -126,7 +126,7 @@
       );
       border-radius: scale-px(15px);
       padding: scale-px(8px) scale-px(38px);
-      line-height: 1;
+      line-height: $font-size-base;
       font-size: $font-size-base;
       color: $color-primary-text;
     }
diff --git a/src/packages/tour/tour.scss b/src/packages/tour/tour.scss
index 0fece09c71..1566e018c1 100644
--- a/src/packages/tour/tour.scss
+++ b/src/packages/tour/tour.scss
@@ -29,8 +29,8 @@
       text-align: end;
 
       &-close {
-        --nut-icon-width: scale-px(10px);
-        --nut-icon-height: scale-px(10px);
+        width: scale-px(10px);
+        height: scale-px(10px);
       }
     }
 

From 45c91f2c35f2f0a68166a98e5f0a4182e7f56632 Mon Sep 17 00:00:00 2001
From: songchenglin3 <353833373@qq.com>
Date: Mon, 11 May 2026 11:15:16 +0800
Subject: [PATCH 07/18] =?UTF-8?q?feat(swipe):=20=E7=AD=89=E6=AF=94?=
 =?UTF-8?q?=E9=80=82=E9=85=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/packages/swipe/demos/h5/demo1.tsx | 2 +-
 src/packages/swipe/demos/h5/demo3.tsx | 2 +-
 src/packages/swipe/demos/h5/demo4.tsx | 2 +-
 src/packages/swipe/demos/h5/demo5.tsx | 2 +-
 src/packages/swipe/demos/h5/demo6.tsx | 2 +-
 src/packages/swipe/demos/h5/demo7.tsx | 6 +++---
 src/packages/swipe/demos/h5/demo8.tsx | 4 ++--
 src/packages/swipe/demos/h5/demo9.tsx | 2 +-
 src/packages/swipe/swipe.scss         | 2 ++
 9 files changed, 13 insertions(+), 11 deletions(-)

diff --git a/src/packages/swipe/demos/h5/demo1.tsx b/src/packages/swipe/demos/h5/demo1.tsx
index 97115480dd..1ac6ff0b30 100644
--- a/src/packages/swipe/demos/h5/demo1.tsx
+++ b/src/packages/swipe/demos/h5/demo1.tsx
@@ -9,7 +9,7 @@ const App = () => {
           <Button
             type="primary"
             shape="square"
-            style={{ alignSelf: 'stretch', height: 46 }}
+            style={{ alignSelf: 'stretch', height: '100%' }}
           >
             删除
           </Button>
diff --git a/src/packages/swipe/demos/h5/demo3.tsx b/src/packages/swipe/demos/h5/demo3.tsx
index 656f22d57a..eb2c3a3e03 100644
--- a/src/packages/swipe/demos/h5/demo3.tsx
+++ b/src/packages/swipe/demos/h5/demo3.tsx
@@ -12,7 +12,7 @@ const App = () => {
             <Button
               type="primary"
               shape="square"
-              style={{ alignSelf: 'stretch', height: 46 }}
+              style={{ alignSelf: 'stretch', height: '100%' }}
             >
               删除
             </Button>
diff --git a/src/packages/swipe/demos/h5/demo4.tsx b/src/packages/swipe/demos/h5/demo4.tsx
index 8e438d040e..9d129438e3 100644
--- a/src/packages/swipe/demos/h5/demo4.tsx
+++ b/src/packages/swipe/demos/h5/demo4.tsx
@@ -11,7 +11,7 @@ const App = () => {
           <Button
             shape="square"
             type="danger"
-            style={{ alignSelf: 'stretch', height: 46 }}
+            style={{ alignSelf: 'stretch', height: '100%' }}
           >
             删除
           </Button>
diff --git a/src/packages/swipe/demos/h5/demo5.tsx b/src/packages/swipe/demos/h5/demo5.tsx
index a81693e073..7afe6ac52f 100644
--- a/src/packages/swipe/demos/h5/demo5.tsx
+++ b/src/packages/swipe/demos/h5/demo5.tsx
@@ -11,7 +11,7 @@ const App = () => {
           <Button
             shape="square"
             type="danger"
-            style={{ alignSelf: 'stretch', height: 46 }}
+            style={{ alignSelf: 'stretch', height: '100%' }}
           >
             删除
           </Button>
diff --git a/src/packages/swipe/demos/h5/demo6.tsx b/src/packages/swipe/demos/h5/demo6.tsx
index 3815adce7a..504efbbb12 100644
--- a/src/packages/swipe/demos/h5/demo6.tsx
+++ b/src/packages/swipe/demos/h5/demo6.tsx
@@ -9,7 +9,7 @@ const App = () => {
           <Button
             shape="square"
             type="danger"
-            style={{ alignSelf: 'stretch', height: 46 }}
+            style={{ alignSelf: 'stretch', height: '100%' }}
           >
             删除
           </Button>
diff --git a/src/packages/swipe/demos/h5/demo7.tsx b/src/packages/swipe/demos/h5/demo7.tsx
index 8fcdb5eb11..c83ca63569 100644
--- a/src/packages/swipe/demos/h5/demo7.tsx
+++ b/src/packages/swipe/demos/h5/demo7.tsx
@@ -14,7 +14,7 @@ const App = () => {
             type="success"
             style={{
               alignSelf: 'stretch',
-              height: 46,
+              height: '100%',
             }}
           >
             选择
@@ -25,14 +25,14 @@ const App = () => {
             <Button
               shape="square"
               type="danger"
-              style={{ alignSelf: 'stretch', height: 46 }}
+              style={{ alignSelf: 'stretch', height: '100%' }}
             >
               删除
             </Button>
             <Button
               shape="square"
               type="info"
-              style={{ alignSelf: 'stretch', height: 46 }}
+              style={{ alignSelf: 'stretch', height: '100%' }}
             >
               收藏
             </Button>
diff --git a/src/packages/swipe/demos/h5/demo8.tsx b/src/packages/swipe/demos/h5/demo8.tsx
index 64759e4f61..9cbfc5688e 100644
--- a/src/packages/swipe/demos/h5/demo8.tsx
+++ b/src/packages/swipe/demos/h5/demo8.tsx
@@ -19,7 +19,7 @@ const App = () => {
           <Button
             shape="square"
             type="success"
-            style={{ alignSelf: 'stretch', height: 46 }}
+            style={{ alignSelf: 'stretch', height: '100%' }}
           >
             选择
           </Button>
@@ -29,7 +29,7 @@ const App = () => {
             <Button
               shape="square"
               type="danger"
-              style={{ alignSelf: 'stretch', height: 46 }}
+              style={{ alignSelf: 'stretch', height: '100%' }}
             >
               删除
             </Button>
diff --git a/src/packages/swipe/demos/h5/demo9.tsx b/src/packages/swipe/demos/h5/demo9.tsx
index f35de4bd9f..8a35a72b43 100644
--- a/src/packages/swipe/demos/h5/demo9.tsx
+++ b/src/packages/swipe/demos/h5/demo9.tsx
@@ -10,7 +10,7 @@ const App = () => {
             <Button
               shape="square"
               type="danger"
-              style={{ alignSelf: 'stretch', height: 46 }}
+              style={{ alignSelf: 'stretch', height: '100%' }}
             >
               加入购物车
             </Button>
diff --git a/src/packages/swipe/swipe.scss b/src/packages/swipe/swipe.scss
index 7e4c86211c..4621183833 100644
--- a/src/packages/swipe/swipe.scss
+++ b/src/packages/swipe/swipe.scss
@@ -31,7 +31,9 @@
   }
 
   &-right {
+    display: flex;
     //left: 100%;
+    height: 100%;
     right: 0px;
     transform: translate(100%, 0px);
   }

From 8d8aa9a121201afd31090aabcda54d51d47a62d9 Mon Sep 17 00:00:00 2001
From: songchenglin3 <353833373@qq.com>
Date: Mon, 11 May 2026 11:16:59 +0800
Subject: [PATCH 08/18] =?UTF-8?q?chore:=20=E5=A2=9E=E5=8A=A0=E7=AD=89?=
 =?UTF-8?q?=E6=AF=94=E9=80=82=E9=85=8Dskill?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../nutui-proportional-scaling/SKILL.md       | 91 +++++++++++++++++++
 packages/nutui-taro-demo/src/app.ts           | 12 +++
 2 files changed, 103 insertions(+)
 create mode 100644 .cursor/skills/nutui-proportional-scaling/SKILL.md

diff --git a/.cursor/skills/nutui-proportional-scaling/SKILL.md b/.cursor/skills/nutui-proportional-scaling/SKILL.md
new file mode 100644
index 0000000000..057b43070d
--- /dev/null
+++ b/.cursor/skills/nutui-proportional-scaling/SKILL.md
@@ -0,0 +1,91 @@
+---
+name: nutui-proportional-scaling
+description: >-
+  NutUI React proportional scaling on branch feat_resize: runtime --nut-scale-f /
+  --nut-scale-font / --nut-scale-icon from scale-f.ts (H5) and scale-f.taro.ts
+  (Taro), Sass helpers scale-px / scale-font-px / scale-icon-px and theme font
+  tokens in variables.scss & theme-*.scss; profiles standard / large / elderly;
+  commit-backed rules e.g. never scale 0px. Use when implementing 多尺寸适配,
+  等比适配, 大字版, 老年版, scale-px, viewport or native bridge scaling, or
+  editing component SCSS for resize.
+---
+
+# NutUI React 等比适配
+
+## 1. 运行时：谁在写 CSS 变量
+
+- **H5**：`src/utils/scale-f.ts`
+  - `initScaleF(profile?)`：首次计算缩放、`resize` 时 `refreshScaleF`。
+  - `getScaleF`：优先 `jmfe.callNative('DongScreenAdapterPlugin','getScale')`，失败用视口规则。
+  - 视口回退要点：`innerWidth >= 600` 视作 pad，基准乘 `1.2`；`375–600` 间按 `375` 比例，**上限 1.17**（与源码常量一致）。
+- **Taro 侧复用同一套契约**：`src/utils/scale-f.taro.ts`，并从 `src/utils/index.taro.ts` 导出。
+- 写入 `:root` 的变量（与 `variables.scss` 一致）：
+  - `--nut-scale-f`：布局/通用 `scale-px`
+  - `--nut-scale-font`：`scale-font-px`、主题 `--nutui-font-size-*`
+  - `--nut-scale-icon`：`scale-icon-px`、图标相关
+
+**档位 `ScaleProfile`**：`standard` | `large` | `elderly`（仅后两者生效额外倍率）。  
+**场景倍率**（与 `getSceneRatio` 一致）：老年对 `font` / `icon` / `lego` × `1.3`；大字仅对 `font` × `1.15`。
+
+**JS 里算像素**：`calcByProfile(baseValue, { scene, profile?, scale?, device? })` — 用于组件内联样式、画布尺寸等，与 Sass 的 `calc(...* var(--nut-scale-*))` 同一套语义。
+
+---
+
+## 2. 样式层：`variables.scss` 中的函数
+
+```scss
+// 根上默认值见 variables.scss :root
+@function scale-px($size) {
+  @return calc(#{$size} * var(--nut-scale-f, 1));
+}
+@function scale-font-px($size) {
+  @return calc(#{$size} * var(--nut-scale-font, var(--nut-scale-f, 1)));
+}
+@function scale-icon-px($size) {
+  @return calc(#{$size} * var(--nut-scale-icon, var(--nut-scale-f, 1)));
+}
+```
+
+**主题字号档**（`theme-default.scss` / `theme-dark.scss`）：`--nutui-font-size-*` 使用 `calc(Npx * var(--nut-scale-font, var(--nut-scale-f, 1)))`，与 **大字/老年** 档位对齐。
+
+---
+
+## 3. 提交里固化的规范（务必遵守）
+
+### 3.1 「0px 不转换」（`1a35d9b8`）
+
+凡应为 **数值 0** 的尺寸，**不要**写 `scale-px(0px)`，一律 **`0`** 或 **`0px`**（如 padding 某一维、`box-shadow` 偏移、border 为 0、`margin: 0`）。  
+否则会得到 `calc(0px * var(--nut-scale-f))`，在部分浏览器或亚像素场景下与纯 `0` 表现不一致。
+
+### 3.2 `line-height`
+
+- **比例行高**（如 `line-height: 1`）：不随系数变，用于挤压行盒、图标对齐等 — 与「等比 px」不同维度。
+- **与设计稿 px 绑定的行高**：用与字号一致的档位，通常为 **`scale-font-px`**，或与同一变量体系。
+- 参考历史修复：弹层标题等曾去掉不恰当的固定 `line-height` 以免与大字模式冲突 — 新增时不要给标题随意写死 `line-height: 20px` 类样式，除非走缩放函数或主题变量。
+
+### 3.3 组件 SCSS 迁移模式（`dc4f1e28` / 后续 style 提交）
+
+- 间距、圆角、`border` 粗细、固定宽高（非纯文字）：优先 **`scale-px`**。
+- 纯字体大小：`scale-font-px` 或主题已有 `--nutui-font-size-*`。
+- 图标占位：**`scale-icon-px`** 或已有 `--nut-icon-*`。
+- 保持与 **无障碍/大屏** 相关提交协同：同一文件改尺度时，勿回退 `dialog` 等对大字兼容的改动。
+
+---
+
+## 4. 业务接入清单
+
+1. **入口调用**：在应用入口（仅浏览器环境）调用 `initScaleF(可选档位)`；档位可随业务切换并依赖内部 `setScaleProfile` 刷新变量。
+2. **Taro**：使用 `scale-f.taro` 导出，保证 H5 与小程序 WebView 行为一致（仍以仓库实现为准）。
+3. **覆写主题**：通过 `--nutui-*` 或 `--nut-scale-*` 覆盖时，保持 `calc` 与变量回退链完整。
+4. **验收**：切换标准/大字/老年、收窄与放宽视口、（如有）站内容器走原生 `getScale`，检查布局与字号是否同比变化且无「0px 被 scale」问题。
+
+---
+
+## 5. Agent 自检（改完缩放权相关代码时）
+
+- [ ] 新增 **0** 尺寸未误用 `scale-px(0px)`。
+- [ ] 字体/图标是否应走 **`scale-font-px` / `scale-icon-px`** 而非误用 `scale-px`。
+- [ ] TS 侧改 `scale-f*` 已同步考虑 **Taro** 文件。
+- [ ] 修改 `formatScaleValue` / 断点时，已通读 **视口与平板常量** 是否仍与文档、设计一致。
+
+若与上游分支分歧，以**当前分支 `feat_resize` 最新提交**及 `src/utils/scale-f*.ts`、`src/styles/variables.scss` 为准。
diff --git a/packages/nutui-taro-demo/src/app.ts b/packages/nutui-taro-demo/src/app.ts
index f44ee74bc2..a54a3fc751 100644
--- a/packages/nutui-taro-demo/src/app.ts
+++ b/packages/nutui-taro-demo/src/app.ts
@@ -1,4 +1,5 @@
 import { Component } from 'react'
+import { initScaleF } from '@/utils/scale-f.taro'
 import('@/sites/assets/styles/reset.scss')
 import('@/packages/nutui.react.scss.taro')
 import('@nutui/touch-emulator')
@@ -7,6 +8,17 @@ import './app.scss'
 
 // console.log(NutUI)
 class App extends Component {
+  private disposeScale?: () => void
+
+  componentDidMount() {
+    // 写入 :root 的 --nut-scale-f / --nut-scale-font / --nut-scale-icon，与组件内 scale-* 一致
+    this.disposeScale = initScaleF()
+  }
+
+  componentWillUnmount() {
+    this.disposeScale?.()
+  }
+
   render() {
     return this.props.children
   }

From 04a3afaf3201c8ae0336615749dca619f1fd9c1b Mon Sep 17 00:00:00 2001
From: songchenglin3 <353833373@qq.com>
Date: Mon, 11 May 2026 14:26:47 +0800
Subject: [PATCH 09/18] =?UTF-8?q?feat:=20taro=E5=92=8Ch5=E7=BB=9F=E4=B8=80?=
 =?UTF-8?q?=E4=B8=80=E5=A5=97?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/nutui-taro-demo/src/app.ts |   4 +-
 src/packages/popup/popup.scss       |   4 +-
 src/utils/index.taro.ts             |   2 +-
 src/utils/scale-f.taro.ts           | 237 ----------------------------
 src/utils/scale-f.ts                |   3 +-
 5 files changed, 8 insertions(+), 242 deletions(-)
 delete mode 100644 src/utils/scale-f.taro.ts

diff --git a/packages/nutui-taro-demo/src/app.ts b/packages/nutui-taro-demo/src/app.ts
index a54a3fc751..f0db1e4eb9 100644
--- a/packages/nutui-taro-demo/src/app.ts
+++ b/packages/nutui-taro-demo/src/app.ts
@@ -1,5 +1,5 @@
 import { Component } from 'react'
-import { initScaleF } from '@/utils/scale-f.taro'
+import { initScaleF } from '@/utils/scale-f'
 import('@/sites/assets/styles/reset.scss')
 import('@/packages/nutui.react.scss.taro')
 import('@nutui/touch-emulator')
@@ -12,7 +12,7 @@ class App extends Component {
 
   componentDidMount() {
     // 写入 :root 的 --nut-scale-f / --nut-scale-font / --nut-scale-icon，与组件内 scale-* 一致
-    this.disposeScale = initScaleF()
+    this.disposeScale = initScaleF('elderly')
   }
 
   componentWillUnmount() {
diff --git a/src/packages/popup/popup.scss b/src/packages/popup/popup.scss
index 3c9c2d196b..4fce559e70 100644
--- a/src/packages/popup/popup.scss
+++ b/src/packages/popup/popup.scss
@@ -49,7 +49,9 @@
       position: absolute;
       top: $popup-title-padding;
       right: $popup-title-padding;
-
+      display: flex;
+      align-items: center;
+      justify-content: center;
       z-index: 1;
       width: $popup-icon-size;
       height: $popup-icon-size;
diff --git a/src/utils/index.taro.ts b/src/utils/index.taro.ts
index 6c90276045..1ee120c176 100644
--- a/src/utils/index.taro.ts
+++ b/src/utils/index.taro.ts
@@ -26,7 +26,7 @@ export * from './taro/px-transform'
 export * from './raf'
 export * from './render'
 export * from './rubberband'
-export * from './scale-f.taro'
+export * from './scale-f'
 export * from './sleep'
 export * from './supports-passive'
 export * from './to-array'
diff --git a/src/utils/scale-f.taro.ts b/src/utils/scale-f.taro.ts
deleted file mode 100644
index db672e4b1c..0000000000
--- a/src/utils/scale-f.taro.ts
+++ /dev/null
@@ -1,237 +0,0 @@
-/**
- * Taro/H5 缩放系数：优先尝试站内原生桥，失败回退到视口规则，
- * 并写入 --nut-scale-f / --nut-scale-font / --nut-scale-icon 供样式层消费。
- */
-import { canUseDom } from './can-use-dom'
-
-/** 原生 DongScreenAdapterPlugin.getScale 的典型返回结构 */
-type NativeScaleResponse = {
-  status?: string
-  data?: {
-    scale?: number | string
-  }
-}
-
-/** jmfe 通用 callNative 签名 */
-type NativeCaller = (
-  plugin: string,
-  method: string,
-  params: string,
-  extra: string
-) => Promise<NativeScaleResponse>
-
-/** 站内容器的 jmfe 桥接方法（可选） */
-declare global {
-  interface Window {
-    jmfe?: {
-      callNative?: NativeCaller
-    }
-  }
-}
-
-/** 当前基准缩放（来自原生或视口计算） */
-let scale = 1
-/** 字体档位：标准、大字、老年 */
-export type ScaleProfile = 'standard' | 'large' | 'elderly'
-/** 不同场景可选用不同放大比例（layout 等默认可不额外放大） */
-export type ScaleScene = 'layout' | 'font' | 'icon' | 'lego'
-export type ScaleDevice = 'phone' | 'pad'
-
-/** 视口大于等于该宽度时按平板处理 */
-const PAD_BREAKPOINT = 600
-/** 平板默认整体缩放倍数 */
-const PAD_SCALE = 1.2
-/** 大字模式下仅 font 场景的相对倍率 */
-const LARGE_FONT_RATIO = 1.15
-/** 老年模式下 font/icon/lego 场景的相对倍率 */
-const ELDERLY_RATIO = 1.3
-
-/** 全局当前档位，与 scale 共同参与 calcByProfile */
-let profile: ScaleProfile = 'standard'
-
-/** 仅 large / elderly 有效，其余一律视为 standard */
-function normalizeProfile(nextProfile?: ScaleProfile) {
-  if (nextProfile === 'large' || nextProfile === 'elderly') return nextProfile
-  return 'standard'
-}
-
-/** 计算 CSS 变量要使用的场景缩放（基准 scale × 场景倍率） */
-function getCssSceneScale(scene: ScaleScene, baseScale: number) {
-  return baseScale * getSceneRatio(scene, profile)
-}
-
-/** 将缩放值同步到 :root 的 --nut-scale-f / --nut-scale-font / --nut-scale-icon */
-function applyScaleCssVars(nextScale: number) {
-  if (!canUseDom) return
-  const rootStyle = document.documentElement.style
-  rootStyle.setProperty('--nut-scale-f', formatScaleValue(nextScale))
-  rootStyle.setProperty(
-    '--nut-scale-font',
-    formatScaleValue(getCssSceneScale('font', nextScale))
-  )
-  rootStyle.setProperty(
-    '--nut-scale-icon',
-    formatScaleValue(getCssSceneScale('icon', nextScale))
-  )
-}
-
-/** >1 保留两位小数字符串；否则取整，与 CSS 消费端约定一致 */
-function formatScaleValue(nextScale: number) {
-  if (nextScale > 1) {
-    return (Math.round(nextScale * 100) / 100).toFixed(2)
-  }
-  return `${Math.round(nextScale)}`
-}
-
-/** 根据屏宽粗略区分 phone / pad */
-function getCurrentDevice(): ScaleDevice {
-  if (!canUseDom) return 'phone'
-  return window.innerWidth >= PAD_BREAKPOINT ? 'pad' : 'phone'
-}
-
-/** 在 profile 与 scene 维度上叠加额外倍率（与全局 scale 相乘） */
-function getSceneRatio(scene: ScaleScene, currentProfile: ScaleProfile) {
-  if (
-    currentProfile === 'elderly' &&
-    (scene === 'font' || scene === 'icon' || scene === 'lego')
-  ) {
-    return ELDERLY_RATIO
-  }
-  if (currentProfile === 'large' && scene === 'font') {
-    return LARGE_FONT_RATIO
-  }
-  return 1
-}
-
-/** 输出 px 等单位时的取整规则：缩放>1 或强制时保留两位小数精度 */
-function roundByScaleRule(
-  value: number,
-  baseScale: number,
-  forceKeepTwoDecimals = false
-) {
-  if (forceKeepTwoDecimals || baseScale > 1) {
-    return Math.round(value * 100) / 100
-  }
-  return Math.round(value)
-}
-
-/** 无原生桥时按屏宽推算 scale（含平板与 375 基准窄屏区间） */
-function getScaleByViewport() {
-  if (!canUseDom) return 1
-  const deviceWidth = window.innerWidth
-
-  if (!deviceWidth) return 1
-
-  if (deviceWidth >= PAD_BREAKPOINT) {
-    return PAD_SCALE
-  }
-
-  if (deviceWidth >= 375 && deviceWidth < 600) {
-    const ratio = deviceWidth / 375
-    return ratio >= 1.17 ? 1.17 : ratio
-  }
-
-  return 1
-}
-
-/** 通过 jmfe.callNative 拉取 DongScreenAdapterPlugin；失败返回 null */
-async function getScaleByNative() {
-  if (!canUseDom || !window.jmfe?.callNative) return null
-
-  try {
-    const res = await window.jmfe.callNative(
-      'DongScreenAdapterPlugin',
-      'getScale',
-      JSON.stringify({}),
-      ''
-    )
-    if (res?.status === '0' && res.data?.scale !== undefined) {
-      const parsed = Number(res.data.scale)
-      if (Number.isFinite(parsed) && parsed > 0) {
-        return parsed
-      }
-    }
-  } catch {
-    // ignore native failures and fallback to viewport rule
-  }
-
-  return null
-}
-
-/** 统一获取缩放：站内原生优先，失败则用视口规则 */
-async function getScaleF() {
-  const nativeScale = await getScaleByNative()
-  if (nativeScale) return nativeScale
-  return getScaleByViewport()
-}
-
-/** 校验后更新内存中的 scale，并写入 --nut-scale-f */
-function setScaleF(nextScale: number) {
-  const validScale = Number.isFinite(nextScale) && nextScale > 0 ? nextScale : 1
-  scale = validScale
-  applyScaleCssVars(validScale)
-  return scale
-}
-
-/** 重新拉取缩放；可选同时切换 profile，避免与当前值相同时重复写 DOM */
-async function refreshScaleF(nextProfile?: ScaleProfile) {
-  if (nextProfile) {
-    setScaleProfile(nextProfile)
-  }
-  const nextScale = await getScaleF()
-  if (!scale || nextScale !== scale) {
-    setScaleF(nextScale)
-  }
-  return scale
-}
-
-/** 首次计算缩放并订阅 resize；返回卸载函数（SSR 下为空函数） */
-export function initScaleF(nextProfile?: ScaleProfile) {
-  if (!canUseDom) return () => {}
-  setScaleProfile(nextProfile)
-
-  const handler = () => {
-    refreshScaleF()
-  }
-
-  handler()
-  window.addEventListener('resize', handler)
-
-  return () => {
-    window.removeEventListener('resize', handler)
-  }
-}
-
-/** 更新全局 profile，并在当前 scale 下重刷 CSS 变量 */
-function setScaleProfile(nextProfile?: ScaleProfile) {
-  profile = normalizeProfile(nextProfile)
-  setScaleF(scale)
-  return profile
-}
-
-/** calcByProfile 的可选覆盖项：临时指定档位、场景、scale 或设备 */
-type CalcByProfileOptions = {
-  profile?: ScaleProfile
-  scene?: ScaleScene
-  scale?: number
-  device?: ScaleDevice
-}
-
-/** 按档位与场景将设计稿基准值换算为实际数值：base × 场景倍率 × 当前 scale，再按规则取整。 */
-export function calcByProfile(
-  baseValue: number,
-  options: CalcByProfileOptions = {}
-) {
-  const currentProfile = normalizeProfile(options.profile ?? profile)
-  const scene = options.scene ?? 'layout'
-  const currentScale =
-    Number.isFinite(options.scale) && Number(options.scale) > 0
-      ? Number(options.scale)
-      : scale
-  const device = options.device ?? getCurrentDevice()
-  const ratio = getSceneRatio(scene, currentProfile)
-  const rawValue = baseValue * ratio * currentScale
-  const forceKeepTwoDecimals =
-    scene === 'font' && currentProfile === 'large' && device === 'pad'
-  return roundByScaleRule(rawValue, currentScale, forceKeepTwoDecimals)
-}
diff --git a/src/utils/scale-f.ts b/src/utils/scale-f.ts
index 38ded9c371..104e3f1634 100644
--- a/src/utils/scale-f.ts
+++ b/src/utils/scale-f.ts
@@ -1,6 +1,7 @@
 /**
  * 响应式缩放系数（--nut-scale-f）：结合京东站内原生桥与站外视口规则，
- * 写入根节点 CSS 变量，供布局/字号/icon 等按比例换算（见 calcByProfile）。
+ * 写入根节点 CSS 变量（--nut-scale-f / --nut-scale-font / --nut-scale-icon），
+ * 供布局/字号/icon 等按比例换算（见 calcByProfile）。H5 与 Taro WebView 共用此实现。
  */
 import { canUseDom } from './can-use-dom'
 

From 39f3c9fb4758b8ae1b2448f70b8a205b86d8cd72 Mon Sep 17 00:00:00 2001
From: songchenglin3 <353833373@qq.com>
Date: Mon, 11 May 2026 17:33:57 +0800
Subject: [PATCH 10/18] =?UTF-8?q?style:=20=E6=9B=B4=E6=96=B0=E7=AD=89?=
 =?UTF-8?q?=E6=AF=94=E9=80=82=E9=85=8D=E7=BB=84=E4=BB=B6=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/pages/index/index.config.ts           |  2 --
 src/packages/menu/menu.scss                   |  2 ++
 src/packages/menu/menu.taro.tsx               | 12 ++------
 src/packages/menu/menu.tsx                    | 12 ++------
 src/packages/menuitem/menuitem.scss           |  5 ++++
 .../numberkeyboard/numberkeyboard.scss        |  5 ++++
 .../numberkeyboard/numberkeyboard.taro.tsx    |  2 +-
 .../numberkeyboard/numberkeyboard.tsx         |  2 +-
 src/packages/quickenter/quickenter.scss       | 30 +++++++++----------
 src/packages/searchbar/demos/h5/demo6.tsx     |  9 +++++-
 src/packages/searchbar/searchbar.scss         |  8 ++---
 src/styles/variables.scss                     | 13 ++++----
 12 files changed, 53 insertions(+), 49 deletions(-)

diff --git a/packages/nutui-taro-demo/src/pages/index/index.config.ts b/packages/nutui-taro-demo/src/pages/index/index.config.ts
index d1120af4da..a7c25c75b7 100644
--- a/packages/nutui-taro-demo/src/pages/index/index.config.ts
+++ b/packages/nutui-taro-demo/src/pages/index/index.config.ts
@@ -1,5 +1,3 @@
 export default definePageConfig({
   navigationBarTitleText: '首页',
-  // App设计规范适配版本
-  // designAppVersion: 16
 })
diff --git a/src/packages/menu/menu.scss b/src/packages/menu/menu.scss
index 68f15e55a8..aa24f24c6b 100644
--- a/src/packages/menu/menu.scss
+++ b/src/packages/menu/menu.scss
@@ -42,6 +42,8 @@
   }
 
   &-icon {
+    width: scale-icon-px(12px);
+    height: scale-icon-px(12px);
     flex-shrink: 0;
     transition: all 0.2s linear;
   }
diff --git a/src/packages/menu/menu.taro.tsx b/src/packages/menu/menu.taro.tsx
index 6ed8ff8bcb..b5174412ac 100644
--- a/src/packages/menu/menu.taro.tsx
+++ b/src/packages/menu/menu.taro.tsx
@@ -137,17 +137,9 @@ export const Menu: FunctionComponent<Partial<TaroMenuProps>> & {
           if (titleIcon) return titleIcon
           if (icon) return icon
           return direction === 'up' ? (
-            <ArrowUp
-              className="nut-menu-title-icon"
-              width="12px"
-              height="12px"
-            />
+            <ArrowUp className="nut-menu-title-icon" />
           ) : (
-            <ArrowDown
-              className="nut-menu-title-icon"
-              width="12px"
-              height="12px"
-            />
+            <ArrowDown className="nut-menu-title-icon" />
           )
         }
         return (
diff --git a/src/packages/menu/menu.tsx b/src/packages/menu/menu.tsx
index 9296549527..3daaabf31b 100644
--- a/src/packages/menu/menu.tsx
+++ b/src/packages/menu/menu.tsx
@@ -137,17 +137,9 @@ export const Menu: FunctionComponent<Partial<WebMenuProps>> & {
           if (titleIcon) return titleIcon
           if (icon) return icon
           return direction === 'up' ? (
-            <ArrowUp
-              className="nut-menu-title-icon"
-              width="12px"
-              height="12px"
-            />
+            <ArrowUp className="nut-menu-title-icon" />
           ) : (
-            <ArrowDown
-              className="nut-menu-title-icon"
-              width="12px"
-              height="12px"
-            />
+            <ArrowDown className="nut-menu-title-icon" />
           )
         }
         return (
diff --git a/src/packages/menuitem/menuitem.scss b/src/packages/menuitem/menuitem.scss
index 8b50f37834..485cb89ad8 100644
--- a/src/packages/menuitem/menuitem.scss
+++ b/src/packages/menuitem/menuitem.scss
@@ -28,6 +28,11 @@
       color: $menu-item-active-color;
     }
 
+    &-icon {
+      display: flex;
+      align-items: center;
+    }
+
     .nut-icon {
       /* #ifdef dynamic*/
       display: flex;
diff --git a/src/packages/numberkeyboard/numberkeyboard.scss b/src/packages/numberkeyboard/numberkeyboard.scss
index c7beaccf57..b0ad39a6a2 100644
--- a/src/packages/numberkeyboard/numberkeyboard.scss
+++ b/src/packages/numberkeyboard/numberkeyboard.scss
@@ -1,6 +1,11 @@
 @import '../popup/popup.scss';
 
 .nut-numberkeyboard {
+  &-close-icon {
+    width: scale-icon-px(18px);
+    height: scale-icon-px(18px);
+  }
+
   width: 100%;
   padding: $numberkeyboard-padding;
   user-select: none;
diff --git a/src/packages/numberkeyboard/numberkeyboard.taro.tsx b/src/packages/numberkeyboard/numberkeyboard.taro.tsx
index 347e8644a5..4b433c6f93 100644
--- a/src/packages/numberkeyboard/numberkeyboard.taro.tsx
+++ b/src/packages/numberkeyboard/numberkeyboard.taro.tsx
@@ -115,7 +115,7 @@ export const NumberKeyboard: FunctionComponent<
         case 'delete':
           return <DeleteIcon />
         case 'close':
-          return <ArrowDown size={18} />
+          return <ArrowDown className={`${classPrefix}-close-icon`} />
         case 'confirm':
           return <>{confirmText || locale.done}</>
         default:
diff --git a/src/packages/numberkeyboard/numberkeyboard.tsx b/src/packages/numberkeyboard/numberkeyboard.tsx
index 272d3418e2..8cc8ac73bd 100644
--- a/src/packages/numberkeyboard/numberkeyboard.tsx
+++ b/src/packages/numberkeyboard/numberkeyboard.tsx
@@ -118,7 +118,7 @@ export const NumberKeyboard: FunctionComponent<
         case 'delete':
           return <DeleteIcon />
         case 'close':
-          return <ArrowDown width={18} height={18} />
+          return <ArrowDown className={`${classPrefix}-close-icon`} />
         case 'confirm':
           return <>{confirmText || locale.done}</>
         default:
diff --git a/src/packages/quickenter/quickenter.scss b/src/packages/quickenter/quickenter.scss
index 02da8b9257..3caf986118 100644
--- a/src/packages/quickenter/quickenter.scss
+++ b/src/packages/quickenter/quickenter.scss
@@ -5,7 +5,7 @@
   /* 限制弹层最大高度，包含安全区 */
   max-height: calc(#{$quickenter-max-height} + env(safe-area-inset-top, 0));
   background: $quickenter-bg-color;
-  border-radius: 0 0 12px 12px;
+  border-radius: 0 0 scale-px(12px) scale-px(12px);
   overflow: hidden;
   box-sizing: border-box;
   display: flex;
@@ -24,7 +24,7 @@
     display: flex;
     align-items: center;
     justify-content: space-between;
-    padding: 30px 16px 0;
+    padding: scale-px(30px) scale-px(16px) 0;
     box-sizing: border-box;
   }
 
@@ -53,7 +53,7 @@
 
   &-content {
     flex: 1;
-    padding: 10px 28px;
+    padding: scale-px(10px) scale-px(28px);
     overflow-y: hidden; // 始终可滚动，防止内容被遮挡
     box-sizing: border-box;
 
@@ -75,34 +75,34 @@
     flex-direction: column;
     align-items: center;
     justify-content: flex-start;
-    width: 56px;
-    padding: 0 0 12px 0; // Reduced from 16px to ensure 2 rows fit in 256px
+    width: scale-px(56px);
+    padding: 0 0 scale-px(12px) 0; // Reduced from 16px to ensure 2 rows fit in 256px
     box-sizing: border-box;
     cursor: pointer;
 
     // Calculate gap for 4 items per row: (100% - 4 * 56px) / 3
-    margin-right: calc((100% - 224px) / 3);
+    margin-right: calc((100% - scale-px(224px)) / 3);
 
     &:nth-child(4n) {
       margin-right: 0;
     }
 
     &-icon {
-      width: 56px;
-      height: 56px;
+      width: scale-px(56px);
+      height: scale-px(56px);
       display: flex;
       align-items: center;
       justify-content: center;
       border-radius: 50%;
       background: $quickenter-item-icon-bg-color;
       color: $quickenter-item-icon-color;
-      margin-bottom: 8px;
+      margin-bottom: scale-px(8px);
       flex-shrink: 0;
 
       svg,
       .nut-icon {
-        width: 22px;
-        height: 22px;
+        width: scale-icon-px(22px);
+        height: scale-icon-px(22px);
       }
     }
 
@@ -110,13 +110,13 @@
       font-size: $quickenter-item-title-font-size;
       color: $quickenter-item-title-color;
       text-align: center;
-      line-height: 1.4;
+      line-height: scale-font-px(16px);
       // Allow multi-line if text is long, preventing truncation
       white-space: normal;
       word-wrap: break-word;
-      width: 72px; // Allow text to be slightly wider than icon
-      margin-left: -8px; // Center 72px title over 56px icon
-      margin-right: -8px;
+      width: scale-px(72px); // Allow text to be slightly wider than icon
+      margin-left: scale-px(-8px); // Center 72px title over 56px icon
+      margin-right: scale-px(-8px);
     }
   }
 }
diff --git a/src/packages/searchbar/demos/h5/demo6.tsx b/src/packages/searchbar/demos/h5/demo6.tsx
index 355b15a6fe..cea6358d91 100644
--- a/src/packages/searchbar/demos/h5/demo6.tsx
+++ b/src/packages/searchbar/demos/h5/demo6.tsx
@@ -20,7 +20,14 @@ const Demo6 = () => {
             }}
             list={itemList}
           >
-            <div style={{ fontSize: '12px', width: '50px', display: 'flex' }}>
+            <div
+              style={{
+                fontSize: '12px',
+                width: '50px',
+                display: 'flex',
+                alignItems: 'center',
+              }}
+            >
               更多
               <ArrowDown />
             </div>
diff --git a/src/packages/searchbar/searchbar.scss b/src/packages/searchbar/searchbar.scss
index 41edc2e56f..629bcffacb 100644
--- a/src/packages/searchbar/searchbar.scss
+++ b/src/packages/searchbar/searchbar.scss
@@ -74,8 +74,8 @@
     &.nut-searchbar-icon {
       position: relative;
       .nut-icon {
-        width: scale-px(12px);
-        height: scale-px(12px);
+        width: scale-icon-px(12px);
+        height: scale-icon-px(12px);
         color: var(--nutui-black-5);
         margin-right: $searchbar-inner-gap;
       }
@@ -111,8 +111,8 @@
     }
 
     .nut-icon {
-      width: scale-px(6px);
-      height: scale-px(6px);
+      width: scale-icon-px(6px);
+      height: scale-icon-px(6px);
       font-size: scale-font-px(6px);
       color: #c2c4cc;
       margin-left: scale-px(4px);
diff --git a/src/styles/variables.scss b/src/styles/variables.scss
index d6d42b6aa9..d58edb529a 100644
--- a/src/styles/variables.scss
+++ b/src/styles/variables.scss
@@ -1226,7 +1226,7 @@ $overlay-animation-duration: var(
 //popup（✅）
 $popup-border-radius: var(--nutui-popup-border-radius, $radius-xl) !default;
 $popup-icon-size: var(--nutui-popup-icon-size, scale-px(20px)) !default;
-$popup-title-padding: var(--nutui-popup-title-padding, scale-px(11px)) !default;
+$popup-title-padding: var(--nutui-popup-title-padding, scale-px(16px)) !default;
 $popup-title-font-size: var(
   --nutui-popup-title-font-size,
   $font-size-xl
@@ -2909,7 +2909,10 @@ $resultpage-actions-margin-top: var(
 
 // quickenter
 $quickenter-bg-color: var(--nutui-quickenter-bg-color, #f5f5f5) !default;
-$quickenter-max-height: var(--nutui-quickenter-max-height, 256px) !default;
+$quickenter-max-height: var(
+  --nutui-quickenter-max-height,
+  scale-px(256px)
+) !default;
 $quickenter-title-font-size: var(
   --nutui-quickenter-title-font-size,
   $font-size-base
@@ -2936,7 +2939,7 @@ $quickenter-item-icon-color: var(
 ) !default;
 $quickenter-close-icon-size: var(
   --nutui-quickenter-close-icon-size,
-  12px
+  scale-icon-px(12px)
 ) !default;
 $quickenter-close-icon-color: var(
   --nutui-quickenter-close-icon-color,
@@ -2944,8 +2947,8 @@ $quickenter-close-icon-color: var(
 ) !default;
 $quickenter-box-shadow: var(
   --nutui-quickenter-box-shadow,
-  0px 8px 16px rgba(141, 153, 167, 0.2),
-  0px -0.5px 0px rgba(0, 0, 0, 0.05) inset
+  0px scale-px(8px) scale-px(16px) rgba(141, 153, 167, 0.2),
+  0px scale-px(-0.5px) 0px scale-px(0.05) inset
 ) !default;
 // $quickenter-backdrop-filter: var(
 //   --nutui-quickenter-backdrop-filter,

From 4d192182f9304ab9a04be58d84b604a91d38f556 Mon Sep 17 00:00:00 2001
From: songchenglin3 <353833373@qq.com>
Date: Tue, 12 May 2026 14:07:31 +0800
Subject: [PATCH 11/18] =?UTF-8?q?feat:=20=E6=9E=84=E5=BB=BA=E6=97=B6?=
 =?UTF-8?q?=E5=B0=86=E7=BB=84=E4=BB=B6=20SCSS=20=E8=BD=AC=E6=8D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../nutui-proportional-scaling/SKILL.md       |   8 +-
 scripts/build-taro.mjs                        |   9 +-
 scripts/build.mjs                             |   6 +-
 scripts/generate-css-for-rtl-comparison.js    |   3 +
 scripts/px-to-scale-px-in-component-scss.cjs  | 137 ++++++++++++++++++
 scripts/replace-css-var.js                    |  23 ++-
 src/packages/actionsheet/actionsheet.scss     |   8 +-
 src/packages/address/address.scss             |  74 +++++-----
 src/packages/animate/animate.scss             |  52 +++----
 src/packages/audio/audio.scss                 |  30 ++--
 src/packages/avatar/avatar.scss               |   2 +-
 src/packages/avatarcropper/avatarcropper.scss |   4 +-
 src/packages/avatargroup/avatargroup.scss     |   8 +-
 src/packages/badge/badge.scss                 |   2 +-
 src/packages/barrage/barrage.scss             |   4 +-
 src/packages/button/button.scss               |   2 +-
 src/packages/calendar/calendar.scss           |  43 +++---
 src/packages/calendarcard/calendarcard.scss   |  20 +--
 src/packages/card/card.scss                   |  26 ++--
 src/packages/cell/cell.scss                   |   6 +-
 src/packages/cellgroup/cellgroup.scss         |   8 +-
 src/packages/checkbox/checkbox.scss           |  34 ++---
 src/packages/checkboxgroup/checkboxgroup.scss |  12 +-
 src/packages/collapseitem/collapseitem.scss   |  16 +-
 src/packages/countdown/countdown.scss         |   6 +-
 src/packages/dialog/dialog.scss               |   2 +-
 src/packages/divider/divider.scss             |   2 +-
 src/packages/elevator/elevator.scss           |   6 +-
 src/packages/ellipsis/ellipsis.scss           |   2 +-
 src/packages/empty/empty.scss                 |   8 +-
 src/packages/fixednav/fixednav.scss           |  63 ++++----
 src/packages/formitem/formitem.scss           |  20 +--
 src/packages/grid/grid.scss                   |   2 +-
 src/packages/griditem/griditem.scss           |   4 +-
 .../hoverbuttonitem/hoverbuttonitem.scss      |  24 +--
 src/packages/imagepreview/imagepreview.scss   |  20 +--
 src/packages/indicator/indicator.scss         |  18 +--
 .../infiniteloading/infiniteloading.scss      |   8 +-
 src/packages/input/input.scss                 |   6 +-
 src/packages/inputnumber/inputnumber.scss     |  12 +-
 src/packages/menuitem/menuitem.scss           |   4 +-
 src/packages/navbar/navbar.scss               |  26 ++--
 src/packages/noticebar/noticebar.scss         |   4 +-
 src/packages/notify/notify.scss               |  16 +-
 .../numberkeyboard/numberkeyboard.scss        |  14 +-
 src/packages/pagination/pagination.scss       |  10 +-
 src/packages/popover/popover.scss             |  62 ++++----
 src/packages/popup/popup.scss                 |   6 +-
 src/packages/progress/progress.scss           |   2 +-
 src/packages/pulltorefresh/pulltorefresh.scss |   2 +-
 src/packages/quickenter/quickenter.scss       |  26 ++--
 src/packages/radio/radio.scss                 |  10 +-
 src/packages/radiogroup/radiogroup.scss       |   6 +-
 src/packages/range/range.scss                 |  62 ++++----
 src/packages/rate/rate.scss                   |  12 +-
 src/packages/resultpage/resultpage.scss       |   4 +-
 src/packages/searchbar/searchbar.scss         |  24 +--
 src/packages/segmented/segmented.scss         |  10 +-
 src/packages/shortpassword/shortpassword.scss |  48 +++---
 src/packages/skeleton/skeleton.scss           |   2 +-
 src/packages/space/space.scss                 |   2 +-
 src/packages/step/step.scss                   |   8 +-
 src/packages/steps/steps.scss                 |  32 ++--
 src/packages/swiper/swiper.scss               |   8 +-
 src/packages/switch/switch.scss               |  16 +-
 src/packages/tabbar/tabbar.scss               |  10 +-
 src/packages/tabbaritem/tabbaritem.scss       |  12 +-
 src/packages/table/table.scss                 |  24 +--
 src/packages/tabs/tabs.scss                   |  36 ++---
 src/packages/tag/tag.scss                     |   6 +-
 src/packages/textarea/textarea.scss           |  12 +-
 src/packages/timedetail/timedetail.scss       |  10 +-
 src/packages/timeselect/timeselect.scss       |   4 +-
 src/packages/toast/toast.scss                 |  20 +--
 src/packages/tour/tour.scss                   |   6 +-
 src/packages/uploader/uploader.scss           |  16 +-
 src/packages/virtuallist/virtuallist.scss     |  16 +-
 77 files changed, 742 insertions(+), 586 deletions(-)
 create mode 100644 scripts/px-to-scale-px-in-component-scss.cjs

diff --git a/.cursor/skills/nutui-proportional-scaling/SKILL.md b/.cursor/skills/nutui-proportional-scaling/SKILL.md
index 057b43070d..5dc70d374e 100644
--- a/.cursor/skills/nutui-proportional-scaling/SKILL.md
+++ b/.cursor/skills/nutui-proportional-scaling/SKILL.md
@@ -4,7 +4,8 @@ description: >-
   NutUI React proportional scaling on branch feat_resize: runtime --nut-scale-f /
   --nut-scale-font / --nut-scale-icon from scale-f.ts (H5) and scale-f.taro.ts
   (Taro), Sass helpers scale-px / scale-font-px / scale-icon-px and theme font
-  tokens in variables.scss & theme-*.scss; profiles standard / large / elderly;
+  tokens in variables.scss & theme-*.scss; npm run build / build:taro run
+  scripts/px-to-scale-px-in-component-scss.cjs on component SCSS in memory; profiles standard / large / elderly;
   commit-backed rules e.g. never scale 0px. Use when implementing 多尺寸适配,
   等比适配, 大字版, 老年版, scale-px, viewport or native bridge scaling, or
   editing component SCSS for resize.
@@ -48,6 +49,11 @@ description: >-
 
 **主题字号档**（`theme-default.scss` / `theme-dark.scss`）：`--nutui-font-size-*` 使用 `calc(Npx * var(--nut-scale-font, var(--nut-scale-f, 1)))`，与 **大字/老年** 档位对齐。
 
+### 2.1 `npm run build` / `npm run build:taro` 时的 px → `scale-px`
+
+- 与 `package.json` 中顺序一致：先跑 **`scripts/replace-css-var.js`**，再 **`scripts/build.mjs`** 或 **`scripts/build-taro.mjs`**；上述脚本在读取 **`src/packages/**/\*.scss`（不含 demo）** 后，会经 **`scripts/px-to-scale-px-in-component-scss.cjs`** 在**内存**里把声明值中的裸 **`Npx`** 转为 **`scale-px(Npx)`**（规则见 §3），**不写回\*\*仓库文件。
+- 源码里可继续手写 **`scale-px` / `scale-font-px` / `scale-icon-px`**；构建不会重复嵌套 `scale-px`。
+
 ---
 
 ## 3. 提交里固化的规范（务必遵守）
diff --git a/scripts/build-taro.mjs b/scripts/build-taro.mjs
index c5e78f4674..421a8708a7 100644
--- a/scripts/build-taro.mjs
+++ b/scripts/build-taro.mjs
@@ -7,6 +7,7 @@ import scss from 'postcss-scss'
 import { copy } from 'fs-extra'
 import { deleteAsync } from 'del'
 import { fileURLToPath } from 'url'
+import { createRequire } from 'node:module'
 import { execSync } from 'child_process'
 import { access, mkdir, readFile, writeFile } from 'fs/promises'
 import { basename, dirname, extname, join, relative, resolve } from 'path'
@@ -18,6 +19,8 @@ import { generate } from './build-theme-typings.mjs'
 
 const __filename = fileURLToPath(import.meta.url)
 const __dirname = dirname(__filename)
+const require = createRequire(import.meta.url)
+const pxToScalePxInComponentScss = require('./px-to-scale-px-in-component-scss.cjs')
 const dist = 'release/taro/dist'
 const filePath = resolve(__dirname, '../package.json')
 const packageJson = JSON.parse(readFileSync(filePath, 'utf8'))
@@ -352,9 +355,10 @@ async function buildCSS(themeName = '') {
     join(__dirname, `../src/styles/variables${themeName ? `-${themeName}` : ''}.scss`),
   )
   for (const file of componentScssFiles) {
-    const scssContent = await readFile(join(__dirname, '../', file), {
+    let scssContent = await readFile(join(__dirname, '../', file), {
       encoding: 'utf8',
     })
+    scssContent = pxToScalePxInComponentScss(scssContent)
     // countup 是特例
     const base = basename(file)
     const loadPath = join(
@@ -444,9 +448,10 @@ async function buildHarmonyCSS(themeName = '') {
     ),
   )
   for (const file of componentScssFiles) {
-    const scssContent = await readFile(join(__dirname, '../', file), {
+    let scssContent = await readFile(join(__dirname, '../', file), {
       encoding: 'utf8',
     })
+    scssContent = pxToScalePxInComponentScss(scssContent)
     // countup 是特例
     const base = basename(file)
     const loadPath = join(
diff --git a/scripts/build.mjs b/scripts/build.mjs
index 947f1d11bd..2f366a0ee8 100644
--- a/scripts/build.mjs
+++ b/scripts/build.mjs
@@ -7,6 +7,7 @@ import scss from 'postcss-scss'
 import { copy } from 'fs-extra'
 import { deleteAsync } from 'del'
 import { fileURLToPath } from 'url'
+import { createRequire } from 'node:module'
 import { execSync } from 'child_process'
 import { access, mkdir, readFile, writeFile } from 'fs/promises'
 import { basename, dirname, extname, join, relative, resolve } from 'path'
@@ -18,6 +19,8 @@ import { generate } from './build-theme-typings.mjs'
 
 const __filename = fileURLToPath(import.meta.url)
 const __dirname = dirname(__filename)
+const require = createRequire(import.meta.url)
+const pxToScalePxInComponentScss = require('./px-to-scale-px-in-component-scss.cjs')
 const dist = 'release/h5/dist'
 const filePath = resolve(__dirname, '../package.json')
 const packageJson = JSON.parse(readFileSync(filePath, 'utf8'))
@@ -301,9 +304,10 @@ async function buildCSS(themeName = '') {
     join(__dirname, `../src/styles/variables${themeName ? `-${themeName}` : ''}.scss`),
   )
   for (const file of componentScssFiles) {
-    const scssContent = await readFile(join(__dirname, '../', file), {
+    let scssContent = await readFile(join(__dirname, '../', file), {
       encoding: 'utf8',
     })
+    scssContent = pxToScalePxInComponentScss(scssContent)
     // countup 是特例
     const base = basename(file)
     const loadPath = join(
diff --git a/scripts/generate-css-for-rtl-comparison.js b/scripts/generate-css-for-rtl-comparison.js
index 1475746e4f..f985f6a039 100644
--- a/scripts/generate-css-for-rtl-comparison.js
+++ b/scripts/generate-css-for-rtl-comparison.js
@@ -21,6 +21,8 @@ const variables = fs.readFileSync(
   path.join(__dirname, '../src/styles/variables.scss')
 )
 
+const pxToScalePxInComponentScss = require('./px-to-scale-px-in-component-scss.cjs')
+
 function postcssRemoveRtl() {
   return {
     postcssPlugin: 'postcss-remove-rtl',
@@ -50,6 +52,7 @@ components.forEach((component) => {
       )
     )
     .toString()
+  content = pxToScalePxInComponentScss(content)
   let to = path.join(
     __dirname,
     `../src/packages/${componentName}/${componentName}.rtl.css`
diff --git a/scripts/px-to-scale-px-in-component-scss.cjs b/scripts/px-to-scale-px-in-component-scss.cjs
new file mode 100644
index 0000000000..f2c754a870
--- /dev/null
+++ b/scripts/px-to-scale-px-in-component-scss.cjs
@@ -0,0 +1,137 @@
+/**
+ * 仅在发布构建链路中（内存里）把组件 SCSS 声明值里的裸 Npx 转为 scale-px(Npx)，
+ * 与 .cursor/skills/nutui-proportional-scaling/SKILL.md 约定一致；不修改磁盘上的源文件。
+ *
+ * 规则摘要：
+ * - 仅处理 Declaration，不处理 @media 等 at-rule 参数（避免断点被 scale）。
+ * - 跳过 font-size、font、以及自定义属性 --*。
+ * - 整段保留 scale-font-px(...) / scale-icon-px(...)；已写的 scale-px(...) 不嵌套。
+ * - 数值 0 的 px → 字面量 0（不写 scale-px(0px)）。
+ * - 已是 calc(Npx * var(--nut-scale-f,...)) 的不再包 scale-px。
+ * - 含 Sass 变量 $ 且含除法 / 的 calc(...) 整段先占位再替换 px（避免 calc($var / 2) 被 postcss-scss 拆坏）。
+ */
+const postcss = require('postcss')
+const postcssScss = require('postcss-scss')
+
+const PROP_SKIP = new Set(['font-size', 'font'])
+
+function matchingCloseParen(str, openParenIdx) {
+  let depth = 1
+  for (let i = openParenIdx + 1; i < str.length; i++) {
+    const c = str[i]
+    if (c === '(') depth++
+    else if (c === ')') {
+      depth--
+      if (depth === 0) return i
+    }
+  }
+  return -1
+}
+
+/** 最左侧的「体内不含 calc(」的 calc 块（同一层里先处理最左） */
+function findInnermostCalcRange(str) {
+  let best = null
+  let scan = 0
+  const lower = str.toLowerCase()
+  while (true) {
+    const idx = lower.indexOf('calc(', scan)
+    if (idx === -1) break
+    const openParen = idx + 4
+    const close = matchingCloseParen(str, openParen)
+    if (close < 0) {
+      scan = idx + 5
+      continue
+    }
+    const body = str.slice(openParen + 1, close)
+    if (!body.toLowerCase().includes('calc(')) {
+      if (!best || idx < best.start) {
+        best = { start: idx, end: close + 1, body }
+      }
+    }
+    scan = idx + 5
+  }
+  return best
+}
+
+/** 体内同时有 $ 与 / 时整段保护（典型：calc(#{$var} / 2)） */
+function shouldProtectCalcBody(body) {
+  return /\$/.test(body) && /\//.test(body)
+}
+
+function protectCalcsForPxPass(value) {
+  const saved = []
+  let v = value
+  while (true) {
+    const m = findInnermostCalcRange(v)
+    if (!m) break
+    if (!shouldProtectCalcBody(m.body)) break
+    saved.push(v.slice(m.start, m.end))
+    v = `${v.slice(0, m.start)}__NUT_CALC_${saved.length - 1}__${v.slice(m.end)}`
+  }
+  return { value: v, saved }
+}
+
+function restoreCalcs(value, saved) {
+  let out = value
+  for (let i = saved.length - 1; i >= 0; i--) {
+    out = out.split(`__NUT_CALC_${i}__`).join(saved[i])
+  }
+  return out
+}
+
+function wrapBarePxInSegment(seg) {
+  return seg.replace(
+    /(-?\d*\.?\d+)px\b(?!\s*\*\s*var\(\s*--nut-scale-f)/g,
+    (full, numStr) => {
+      const n = parseFloat(numStr)
+      if (!Number.isFinite(n) || n === 0) return '0'
+      return `scale-px(${numStr}px)`
+    },
+  )
+}
+
+/** 在非 scale-px(...) 段内包裸 px */
+function transformScalePxChunks(chunk) {
+  return chunk.split(/(\bscale-px\s*\([^)]*\))/g).map((part, i) => {
+    if (i % 2 === 1) return part
+    return wrapBarePxInSegment(part)
+  }).join('')
+}
+
+function transformDeclValue(value) {
+  if (value == null || !/[\d.]+\s*px/i.test(value)) return value
+  const { value: v1, saved } = protectCalcsForPxPass(value)
+  let out = v1
+    .split(/(\bscale-(?:font|icon)-px\s*\([^)]*\))/g)
+    .map((outer, oi) => {
+      if (oi % 2 === 1) return outer
+      return transformScalePxChunks(outer)
+    })
+    .join('')
+  return restoreCalcs(out, saved)
+}
+
+function pxToScalePxInComponentScssPlugin() {
+  return {
+    postcssPlugin: 'nutui-px-to-scale-px-in-component-scss',
+    Once(root) {
+      root.walkDecls((decl) => {
+        const prop = decl.prop.toLowerCase()
+        if (PROP_SKIP.has(prop)) return
+        if (decl.prop.startsWith('--')) return
+        decl.value = transformDeclValue(decl.value)
+      })
+    },
+  }
+}
+
+function pxToScalePxInComponentScss(source) {
+  const result = postcss([pxToScalePxInComponentScssPlugin()]).process(source, {
+    from: undefined,
+    syntax: postcssScss,
+  })
+  return result.css
+}
+
+module.exports = pxToScalePxInComponentScss
+module.exports.pxToScalePxInComponentScss = pxToScalePxInComponentScss
diff --git a/scripts/replace-css-var.js b/scripts/replace-css-var.js
index 5c7b278c42..cdbe546360 100644
--- a/scripts/replace-css-var.js
+++ b/scripts/replace-css-var.js
@@ -24,6 +24,8 @@ const theme = fs.readFileSync(
   path.join(__dirname, '../src/styles/theme-default.scss'),
 ).toString().replace('@import "./jd-font";', '').replace(`@import './jd-font';`, '')
 
+const pxToScalePxInComponentScss = require('./px-to-scale-px-in-component-scss.cjs')
+
 const exclude = ['icon']
 components.forEach((component) => {
   const componentName = component.name.toLowerCase()
@@ -37,6 +39,7 @@ components.forEach((component) => {
       ),
     )
     .toString()
+  content = pxToScalePxInComponentScss(content)
   let to = path.join(
     __dirname,
     `../src/packages/${componentName}/${componentName}.harmony.css`,
@@ -56,14 +59,18 @@ components.forEach((component) => {
           content = content.replace(m, '')
           const splitScssName = m.match(/\'\.\/([a-z]+)\.scss/)
           if (splitScssName && splitScssName.length == 2) {
-            componentSplitScss.push(fs
-              .readFileSync(
-                path.join(
-                  __dirname,
-                  `../src/packages/${componentName}/${splitScssName[1]}.scss`,
-                ),
-              )
-              .toString())
+            componentSplitScss.push(
+              pxToScalePxInComponentScss(
+                fs
+                  .readFileSync(
+                    path.join(
+                      __dirname,
+                      `../src/packages/${componentName}/${splitScssName[1]}.scss`,
+                    ),
+                  )
+                  .toString(),
+              ),
+            )
           }
 
         }
diff --git a/src/packages/actionsheet/actionsheet.scss b/src/packages/actionsheet/actionsheet.scss
index 1bb3769513..c850df3b0d 100644
--- a/src/packages/actionsheet/actionsheet.scss
+++ b/src/packages/actionsheet/actionsheet.scss
@@ -9,7 +9,7 @@
   }
 
   .nut-popup-title {
-    border-bottom: scale-px(1px) solid $actionsheet-border-color;
+    border-bottom: 1px solid $actionsheet-border-color;
   }
 
   &-list {
@@ -23,7 +23,7 @@
   &-cancel,
   &-item {
     display: block;
-    padding: scale-px(10px);
+    padding: 10px;
     text-align: $actionsheet-item-text-align;
     line-height: $actionsheet-item-line-height;
     font-size: $font-size-base;
@@ -54,8 +54,8 @@
   }
 
   &-cancel {
-    margin-top: scale-px(5px);
-    border-top: scale-px(1px) solid $actionsheet-border-color;
+    margin-top: 5px;
+    border-top: 1px solid $actionsheet-border-color;
     border-radius: $actionsheet-border-radius;
   }
 
diff --git a/src/packages/address/address.scss b/src/packages/address/address.scss
index 5c341c91fc..e707c7252c 100644
--- a/src/packages/address/address.scss
+++ b/src/packages/address/address.scss
@@ -4,15 +4,15 @@
 .nut-address {
   &-exist {
     display: block;
-    padding: scale-px(15px) scale-px(20px) 0;
-    height: scale-px(279px);
+    padding: 15px 20px 0;
+    height: 279px;
     overflow-y: auto;
     box-sizing: border-box;
 
     &-item {
       display: flex;
       align-items: center;
-      margin-bottom: scale-px(20px);
+      margin-bottom: 20px;
       font-size: $font-size-s;
       line-height: $font-size-base;
       color: $color-title;
@@ -22,25 +22,25 @@
       }
 
       &-info {
-        margin-left: scale-px(9px);
+        margin-left: 9px;
       }
     }
   }
 
   &-footer {
     width: 100%;
-    height: scale-px(54px);
-    padding: scale-px(6px) 0px 0;
-    border-top: scale-px(1px) solid $color-border;
+    height: 54px;
+    padding: 6px 0px 0;
+    border-top: 1px solid $color-border;
 
     &-btn {
       width: 90%;
-      height: scale-px(42px);
-      line-height: scale-px(42px);
+      height: 42px;
+      line-height: 42px;
       margin: auto;
       text-align: center;
       background: $button-primary-background-color;
-      border-radius: scale-px(21px);
+      border-radius: 21px;
       font-size: $font-size-l;
       color: $color-primary-text;
     }
@@ -51,10 +51,10 @@
   &-title {
     font-size: $font-size-base;
     font-weight: 500;
-    padding: scale-px(16px) scale-px(16px) scale-px(12px) scale-px(16px);
+    padding: 16px 16px 12px 16px;
   }
   &-hotlist {
-    padding: 0 scale-px(16px);
+    padding: 0 16px;
     display: flex;
     flex-wrap: wrap;
     align-items: flex-start;
@@ -62,16 +62,16 @@
       display: flex;
       justify-content: center;
       align-items: center;
-      width: scale-px(63px);
-      height: scale-px(28px);
+      width: 63px;
+      height: 28px;
       font-size: $font-size-s;
-      border-radius: scale-px(4px);
-      margin-bottom: scale-px(7px);
+      border-radius: 4px;
+      margin-bottom: 7px;
       /* #ifdef harmony dynamic*/
-      margin-right: scale-px(6px);
+      margin-right: 6px;
       /* #endif */
       /* #ifndef harmony dynamic*/
-      margin-right: scale-px(7px);
+      margin-right: 7px;
       /* #endif */
       background-color: $color-background-sunken;
       color: $color-title;
@@ -83,36 +83,36 @@
     &.hotlist-more {
       .nut-address-hotlist-item {
         width: auto;
-        padding: 0 scale-px(16px);
-        margin-right: scale-px(7px);
+        padding: 0 16px;
+        margin-right: 7px;
       }
     }
   }
 
   &-selected {
     width: 100%;
-    height: scale-px(60px);
-    padding: 0 scale-px(16px);
+    height: 60px;
+    padding: 0 16px;
     display: flex;
     align-items: center;
-    border-bottom: scale-px(1px) solid $color-border;
+    border-bottom: 1px solid $color-border;
     &-item {
       font-size: $font-size-s;
       display: inline-block;
-      height: scale-px(28px);
-      line-height: scale-px(28px);
-      padding: 0 scale-px(12px);
-      border-radius: scale-px(4px);
+      height: 28px;
+      line-height: 28px;
+      padding: 0 12px;
+      border-radius: 4px;
       background-color: $color-background-sunken;
 
       &.active {
-        border: scale-px(1px) solid $color-primary;
+        border: 1px solid $color-primary;
         background-color: $color-primary-light-pressed;
         color: $color-primary;
       }
     }
     &-border {
-      margin: 0 scale-px(2px);
+      margin: 0 2px;
       color: $color-text-disabled;
     }
   }
@@ -122,15 +122,15 @@
     .nut-elevator-list {
       &-item {
         position: relative;
-        padding-left: scale-px(20px);
+        padding-left: 20px;
       }
       &-item-code {
         display: inline;
         position: absolute;
         left: 0;
         top: 0;
-        height: scale-px(30px);
-        line-height: scale-px(30px);
+        height: 30px;
+        line-height: 30px;
         border-bottom: 0;
         color: $color-text-help;
         font-weight: 500;
@@ -145,11 +145,11 @@
         display: flex;
         justify-content: center;
         align-items: center;
-        width: scale-px(16px);
-        height: scale-px(16px);
+        width: 16px;
+        height: 16px;
         font-size: $font-size-xxs;
-        border-radius: scale-px(16px);
-        margin-bottom: scale-px(2px);
+        border-radius: 16px;
+        margin-bottom: 2px;
         color: $color-text-help;
         &-active {
           background-color: $color-primary;
@@ -167,7 +167,7 @@
     &-item {
       &-info {
         margin-left: 0;
-        margin-right: scale-px(9px);
+        margin-right: 9px;
       }
     }
   }
diff --git a/src/packages/animate/animate.scss b/src/packages/animate/animate.scss
index 1de0a969aa..67b478bb3e 100644
--- a/src/packages/animate/animate.scss
+++ b/src/packages/animate/animate.scss
@@ -76,31 +76,31 @@
       transform: translateX(0);
     }
     10% {
-      transform: translateX(scale-px(-9px));
+      transform: translateX(-9px);
     }
     20% {
-      transform: translateX(scale-px(8px));
+      transform: translateX(8px);
     }
     30% {
-      transform: translateX(scale-px(-7px));
+      transform: translateX(-7px);
     }
     40% {
-      transform: translateX(scale-px(6px));
+      transform: translateX(6px);
     }
     50% {
-      transform: translateX(scale-px(-5px));
+      transform: translateX(-5px);
     }
     60% {
-      transform: translateX(scale-px(4px));
+      transform: translateX(4px);
     }
     70% {
-      transform: translateX(scale-px(-3px));
+      transform: translateX(-3px);
     }
     80% {
-      transform: translateX(scale-px(2px));
+      transform: translateX(2px);
     }
     90% {
-      transform: translateX(scale-px(-1px));
+      transform: translateX(-1px);
     }
   }
   .nut-animate-shake {
@@ -142,16 +142,16 @@
     position: relative;
     &::after,
     &::before {
-      width: scale-px(60px);
-      height: scale-px(60px);
+      width: 60px;
+      height: 60px;
       content: '';
       box-sizing: border-box;
-      border: scale-px(4px) solid rgba(255, 255, 255, 0.6);
+      border: 4px solid rgba(255, 255, 255, 0.6);
       position: absolute;
-      border-radius: scale-px(30px);
+      border-radius: 30px;
       right: 50%;
-      margin-top: scale-px(-30px);
-      margin-right: scale-px(-30px);
+      margin-top: -30px;
+      margin-right: -30px;
       z-index: 1;
       transform: scale(0);
       animation: twinkle 2s ease-out infinite;
@@ -180,8 +180,8 @@
     position: relative;
     overflow: hidden;
     &::after {
-      width: scale-px(100px);
-      height: scale-px(60px);
+      width: 100px;
+      height: 60px;
       position: absolute;
       left: 0;
       top: 0;
@@ -194,17 +194,17 @@
       );
       animation: flicker 1.5s linear infinite;
       transform: skewX(-20deg);
-      filter: blur(scale-px(3px));
+      filter: blur(3px);
     }
   }
 
   @keyframes flicker {
     0% {
-      transform: translateX(scale-px(-100px)) skewX(-20deg);
+      transform: translateX(-100px) skewX(-20deg);
     }
     40%,
     100% {
-      transform: translateX(scale-px(150px)) skewX(-20deg);
+      transform: translateX(150px) skewX(-20deg);
     }
   }
 
@@ -214,13 +214,13 @@
       transform: rotate(0) translateY(0);
     }
     25% {
-      transform: rotate(10deg) translateY(scale-px(20px));
+      transform: rotate(10deg) translateY(20px);
     }
     50% {
-      transform: rotate(0) translateY(scale-px(-10px));
+      transform: rotate(0) translateY(-10px);
     }
     75% {
-      transform: rotate(-10deg) translateY(scale-px(20px));
+      transform: rotate(-10deg) translateY(20px);
     }
     100% {
       transform: rotate(0) translateY(0);
@@ -237,13 +237,13 @@
       top: 0;
     }
     25% {
-      top: scale-px(1px);
+      top: 1px;
     }
     50% {
-      top: scale-px(4px);
+      top: 4px;
     }
     75% {
-      top: scale-px(1px);
+      top: 1px;
     }
     100% {
       top: 0;
diff --git a/src/packages/audio/audio.scss b/src/packages/audio/audio.scss
index d70948064e..05b8c297a9 100644
--- a/src/packages/audio/audio.scss
+++ b/src/packages/audio/audio.scss
@@ -10,11 +10,11 @@
       display: flex;
       align-items: center;
       justify-content: center;
-      width: scale-px(30px);
-      height: scale-px(30px);
+      width: 30px;
+      height: 30px;
       background: $white;
       border-radius: 50%;
-      box-shadow: 0 0 scale-px(8px) $color-text-disabled;
+      box-shadow: 0 0 8px $color-text-disabled;
     }
 
     .nut-audio-icon-stop {
@@ -26,11 +26,11 @@
         top: 50%;
         transform: translateX(-50%);
         content: '';
-        height: scale-px(2px);
-        width: scale-px(30px);
+        height: 2px;
+        width: 30px;
         background: $color-text-disabled;
         transform: rotate(45deg);
-        transform-origin: scale-px(8px) scale-px(-18px);
+        transform-origin: 8px -18px;
       }
     }
   }
@@ -40,34 +40,34 @@
     align-items: center;
     width: 100%;
     margin: 0px auto;
-    padding: scale-px(10px) 0;
+    padding: 10px 0;
 
     &-bar-wrapper {
       flex: 1;
-      margin: 0 scale-px(10px);
+      margin: 0 10px;
     }
 
     .time {
-      min-width: scale-px(50px);
+      min-width: 50px;
       font-size: $font-size-s;
       text-align: center;
     }
 
     .nut-range-button {
-      width: scale-px(8px);
-      height: scale-px(8px);
+      width: 8px;
+      height: 8px;
     }
   }
 
   .custom-button-group {
     .nut-button-primary {
-      margin: 0 scale-px(5px);
+      margin: 0 5px;
     }
   }
 
   .custom-button-group-disable {
     .nut-button-primary {
-      margin: 0 scale-px(5px);
+      margin: 0 5px;
       pointer-events: none;
     }
   }
@@ -78,7 +78,7 @@
 
   .nut-audio-none-container {
     .nut-voice {
-      border: scale-px(1px) solid $color-title;
+      border: 1px solid $color-title;
       align-items: center;
     }
   }
@@ -92,7 +92,7 @@
         left: auto;
         right: 50%;
         transform: rotate(-45deg);
-        transform-origin: scale-px(20px) scale-px(-18px);
+        transform-origin: 20px -18px;
       }
     }
   }
diff --git a/src/packages/avatar/avatar.scss b/src/packages/avatar/avatar.scss
index 6aa681ed47..f3480990ce 100644
--- a/src/packages/avatar/avatar.scss
+++ b/src/packages/avatar/avatar.scss
@@ -12,7 +12,7 @@
   height: $avatar-normal-height;
 
   &-round {
-    border-radius: scale-px(999px);
+    border-radius: 999px;
     overflow: hidden;
   }
 
diff --git a/src/packages/avatarcropper/avatarcropper.scss b/src/packages/avatarcropper/avatarcropper.scss
index 9ed3283c0c..b79102847b 100644
--- a/src/packages/avatarcropper/avatarcropper.scss
+++ b/src/packages/avatarcropper/avatarcropper.scss
@@ -72,7 +72,7 @@
 
       &-item {
         color: #fff;
-        padding: scale-px(15px);
+        padding: 15px;
         cursor: pointer;
         display: flex;
         align-items: center;
@@ -98,7 +98,7 @@
         top: 50%;
         transform: translate(-50%, -50%);
         background-color: transparent;
-        box-shadow: 0 0 scale-px(1000px) scale-px(1000px) rgba(0, 0, 0, 0.6);
+        box-shadow: 0 0 1000px 1000px rgba(0, 0, 0, 0.6);
       }
     }
   }
diff --git a/src/packages/avatargroup/avatargroup.scss b/src/packages/avatargroup/avatargroup.scss
index c7dede3c8e..27462e4d11 100644
--- a/src/packages/avatargroup/avatargroup.scss
+++ b/src/packages/avatargroup/avatargroup.scss
@@ -4,11 +4,11 @@
   flex: 0 0 auto; // 防止被压缩
   &-avatar,
   .nut-avatar {
-    border: scale-px(1px) solid #fff;
-    margin-left: scale-px(-8px);
+    border: 1px solid #fff;
+    margin-left: -8px;
 
     &:not(:first-of-type) {
-      margin-left: scale-px(-8px);
+      margin-left: -8px;
     }
   }
 }
@@ -18,7 +18,7 @@
   .nut-avatar {
     &:not(:first-of-type) {
       margin-left: 0;
-      margin-right: scale-px(-8px);
+      margin-right: -8px;
     }
   }
 }
diff --git a/src/packages/badge/badge.scss b/src/packages/badge/badge.scss
index ed27f80324..750ccb6010 100644
--- a/src/packages/badge/badge.scss
+++ b/src/packages/badge/badge.scss
@@ -55,7 +55,7 @@
     box-sizing: border-box;
     color: $badge-color;
     font-size: $badge-font-size;
-    line-height: scale-px(12px);
+    line-height: 12px;
     white-space: nowrap;
     font-weight: normal;
     vertical-align: middle;
diff --git a/src/packages/barrage/barrage.scss b/src/packages/barrage/barrage.scss
index f7a2592c99..66c351fa4e 100644
--- a/src/packages/barrage/barrage.scss
+++ b/src/packages/barrage/barrage.scss
@@ -13,8 +13,8 @@
     display: block;
     position: absolute;
     right: 0;
-    padding: scale-px(4px) scale-px(16px);
-    border-radius: scale-px(16px);
+    padding: 4px 16px;
+    border-radius: 16px;
     font-size: $font-size-s;
     text-align: center;
     white-space: pre;
diff --git a/src/packages/button/button.scss b/src/packages/button/button.scss
index e4d1ea3181..5f950e9dad 100644
--- a/src/packages/button/button.scss
+++ b/src/packages/button/button.scss
@@ -3,7 +3,7 @@
   display: flex;
   display: inline-block;
   /* #ifdef harmony dynamic*/
-  width: scale-px(80px);
+  width: 80px;
   /* #endif */
   /* #ifndef harmony dynamic*/
   width: auto;
diff --git a/src/packages/calendar/calendar.scss b/src/packages/calendar/calendar.scss
index 8bd0d37768..e17a53a767 100644
--- a/src/packages/calendar/calendar.scss
+++ b/src/packages/calendar/calendar.scss
@@ -46,12 +46,12 @@
     color: $color-title;
     font-size: $calendar-title-font-size;
     font-weight: $calendar-title-font-weight;
-    line-height: scale-px(50px);
+    line-height: 50px;
   }
 
   &-sub-title {
-    padding: scale-px(7px) 0;
-    line-height: scale-px(22px);
+    padding: 7px 0;
+    line-height: 22px;
     font-size: $calendar-sub-title-font-size;
   }
 
@@ -59,10 +59,9 @@
     display: flex;
     align-items: center;
     justify-content: space-around;
-    height: scale-px(36px);
-    border-radius: 0px 0px scale-px(12px) scale-px(12px);
-    box-shadow: 0px scale-px(4px) scale-px(10px) 0px
-      rgba($color: #000000, $alpha: 0.06);
+    height: 36px;
+    border-radius: 0px 0px 12px 12px;
+    box-shadow: 0px 4px 10px 0px rgba($color: #000000, $alpha: 0.06);
   }
 
   &-week-item {
@@ -88,11 +87,11 @@
     box-sizing: border-box;
 
     .calendar-loading-tip {
-      height: scale-px(50px);
-      line-height: scale-px(50px);
+      height: 50px;
+      line-height: 50px;
       text-align: center;
       position: absolute;
-      top: scale-px(-50px);
+      top: -50px;
       left: 0;
       right: 0;
       font-size: $font-size-s;
@@ -106,9 +105,9 @@
     text-align: center;
 
     &-title {
-      height: scale-px(23px);
-      line-height: scale-px(23px);
-      margin: scale-px(8px) 0;
+      height: 23px;
+      line-height: 23px;
+      margin: 8px 0;
     }
   }
 
@@ -126,7 +125,7 @@
     width: $calendar-day-width;
     height: $calendar-day-height;
     font-weight: $calendar-day-font-weight;
-    margin-bottom: scale-px(4px);
+    margin-bottom: 4px;
 
     // 部分 Taro 机型下子节点不会稳定继承父级 color，颜色直接落到最内层文案。
     &-day,
@@ -147,22 +146,22 @@
     &-info,
     &-info-curr {
       position: absolute;
-      bottom: scale-px(5px);
+      bottom: 5px;
       width: 100%;
       font-size: $font-size-s;
-      line-height: scale-px(14px);
+      line-height: 14px;
     }
 
     &-info-top {
       position: absolute;
       width: 100%;
-      top: scale-px(5px);
+      top: 5px;
     }
 
     &-info-bottom {
       position: absolute;
       width: 100%;
-      bottom: scale-px(5px);
+      bottom: 5px;
     }
 
     &-active {
@@ -238,9 +237,9 @@
     background-color: $white;
 
     .calendar-confirm-btn {
-      height: scale-px(40px);
-      line-height: scale-px(40px);
-      margin: scale-px(6px) scale-px(16px);
+      height: 40px;
+      line-height: 40px;
+      margin: 6px 16px;
       text-align: center;
       border-radius: $radius-base;
       background: $button-primary-background-color;
@@ -251,7 +250,7 @@
 }
 
 .nut-calendar-popup .nut-popup-title-right {
-  top: scale-px(7px) !important;
+  top: 7px !important;
 }
 
 [dir='rtl'] .nut-calendar,
diff --git a/src/packages/calendarcard/calendarcard.scss b/src/packages/calendarcard/calendarcard.scss
index 6bba3e5099..9e548f9753 100644
--- a/src/packages/calendarcard/calendarcard.scss
+++ b/src/packages/calendarcard/calendarcard.scss
@@ -1,6 +1,6 @@
 .nut-calendarcard {
   background: $color-background-overlay;
-  border-radius: scale-px(12px);
+  border-radius: 12px;
   overflow: hidden;
   font-size: $calendar-base-font-size;
   line-height: $calendar-base-font-size;
@@ -18,15 +18,15 @@
       display: flex;
       flex-direction: row;
       cursor: pointer;
-      margin: scale-px(16px);
+      margin: 16px;
       line-height: 1;
 
       .left {
-        margin-left: scale-px(8px);
+        margin-left: 8px;
       }
 
       .right {
-        margin-right: scale-px(8px);
+        margin-right: 8px;
       }
     }
   }
@@ -51,9 +51,9 @@
     flex-direction: column;
     position: relative;
     width: $calendar-day-width;
-    height: scale-px(48px);
+    height: 48px;
     cursor: pointer;
-    margin-bottom: scale-px(4px);
+    margin-bottom: 4px;
     text-align: center;
 
     // 部分 Taro 机型下子节点不会稳定继承父级 color，颜色直接落到最内层文案。
@@ -73,9 +73,9 @@
       align-items: center;
       justify-content: center;
       width: 100%;
-      height: scale-px(12px);
+      height: 12px;
       font-size: $font-size-s;
-      line-height: scale-px(12px);
+      line-height: 12px;
     }
 
     &.weekend {
@@ -152,12 +152,12 @@
     &-right {
       .left {
         margin-left: 0;
-        margin-right: scale-px(8px);
+        margin-right: 8px;
       }
 
       .right {
         margin-right: 0;
-        margin-left: scale-px(8px);
+        margin-left: 8px;
       }
 
       .nut-icon-ArrowLeft,
diff --git a/src/packages/card/card.scss b/src/packages/card/card.scss
index eb6cb1000f..a820623afe 100644
--- a/src/packages/card/card.scss
+++ b/src/packages/card/card.scss
@@ -9,8 +9,8 @@
   border-radius: $card-border-radius;
 
   &-left {
-    width: scale-px(120px);
-    height: scale-px(120px);
+    width: 120px;
+    height: 120px;
     flex-shrink: 0;
 
     > img {
@@ -23,7 +23,7 @@
 
   &-right {
     flex: 1;
-    padding: 0 scale-px(10px) scale-px(8px);
+    padding: 0 10px 8px;
 
     &-title {
       @include moreline-ellipsis();
@@ -35,13 +35,13 @@
     &-price {
       display: flex;
       align-items: center;
-      height: scale-px(18px);
-      line-height: scale-px(18px);
-      margin-top: scale-px(9px);
+      height: 18px;
+      line-height: 18px;
+      margin-top: 9px;
 
       &-origin {
         &.nut-price {
-          margin-left: scale-px(2px);
+          margin-left: 2px;
           .nut-price-symbol,
           .nut-price-integer,
           .nut-price-decimal {
@@ -54,11 +54,11 @@
     &-other {
       display: flex;
       align-items: center;
-      padding: scale-px(5px) 0 scale-px(2px);
+      padding: 5px 0 2px;
 
       .nut-tag {
-        padding: 0 scale-px(2px);
-        margin-right: scale-px(5px);
+        padding: 0 2px;
+        margin-right: 5px;
         font-size: $font-size-xs;
       }
     }
@@ -72,7 +72,7 @@
         line-height: 1.5;
         color: $color-text;
         font-size: $font-size-s;
-        padding-top: scale-px(4px);
+        padding-top: 4px;
       }
     }
   }
@@ -85,7 +85,7 @@
       &-origin {
         &.nut-price {
           margin-left: 0;
-          margin-right: scale-px(2px);
+          margin-right: 2px;
         }
       }
     }
@@ -93,7 +93,7 @@
     &-other {
       .nut-tag {
         margin-right: 0;
-        margin-left: scale-px(5px);
+        margin-left: 5px;
       }
     }
   }
diff --git a/src/packages/cell/cell.scss b/src/packages/cell/cell.scss
index c5fb3b8fbb..31847bb99d 100644
--- a/src/packages/cell/cell.scss
+++ b/src/packages/cell/cell.scss
@@ -11,7 +11,7 @@
   box-shadow: $cell-box-shadow;
   font-size: $cell-title-font-size;
   color: $cell-title-color;
-  margin-bottom: scale-px(10px);
+  margin-bottom: 10px;
   box-sizing: border-box;
 
   &-group-item {
@@ -73,12 +73,12 @@
 
   &-divider {
     display: flex;
-    min-height: scale-px(1px);
+    min-height: 1px;
     padding-left: $cell-divider-left;
     padding-right: $cell-divider-right;
     &-inner {
       display: flex;
-      height: scale-px(1px);
+      height: 1px;
       width: 100%;
       border-top: $cell-divider-border-bottom;
     }
diff --git a/src/packages/cellgroup/cellgroup.scss b/src/packages/cellgroup/cellgroup.scss
index d0fee11d8b..ab968f0108 100644
--- a/src/packages/cellgroup/cellgroup.scss
+++ b/src/packages/cellgroup/cellgroup.scss
@@ -9,8 +9,8 @@
     color: $cell-group-title-color;
     font-size: $cell-group-title-font-size;
     line-height: $cell-group-title-line-height;
-    margin-top: scale-px(30px);
-    margin-bottom: scale-px(10px);
+    margin-top: 30px;
+    margin-bottom: 10px;
   }
 
   &-description {
@@ -21,8 +21,8 @@
     color: $cell-group-description-color;
     font-size: $cell-group-description-font-size;
     line-height: $cell-group-description-line-height;
-    margin-top: scale-px(10px);
-    margin-bottom: scale-px(10px);
+    margin-top: 10px;
+    margin-bottom: 10px;
   }
 
   &-wrap {
diff --git a/src/packages/checkbox/checkbox.scss b/src/packages/checkbox/checkbox.scss
index 940f910880..d284ce3c22 100644
--- a/src/packages/checkbox/checkbox.scss
+++ b/src/packages/checkbox/checkbox.scss
@@ -14,7 +14,7 @@
     font-size: 0px;
     line-height: 0px;
     border-radius: 50%;
-    box-shadow: 0px scale-px(2px) scale-px(4px) 0px rgba(255, 15, 35, 0.2);
+    box-shadow: 0px 2px 4px 0px rgba(255, 15, 35, 0.2);
   }
 
   &-icon-checked {
@@ -43,7 +43,7 @@
   &-icon-indeterminate {
     color: $color-primary;
     background-color: $white;
-    box-shadow: 0px scale-px(2px) scale-px(4px) 0px #ff0f2333;
+    box-shadow: 0px 2px 4px 0px #ff0f2333;
     border-radius: 50%;
 
     &.nut-checkbox-icon-disabled {
@@ -76,14 +76,14 @@
     display: inline-flex;
     /* #endif */
     align-items: center;
-    min-height: scale-px(32px);
+    min-height: 32px;
     padding: $checkbox-button-padding;
     font-size: $checkbox-button-font-size;
     background: $checkbox-button-background;
     border-radius: $checkbox-button-border-radius;
     color: $checkbox-label-color;
     box-sizing: border-box;
-    border: scale-px(1px) solid $checkbox-button-background;
+    border: 1px solid $checkbox-button-background;
     overflow: hidden;
 
     &-active {
@@ -94,7 +94,7 @@
 
     &-disabled {
       color: $color-text-disabled;
-      border: scale-px(1px) solid $checkbox-button-background;
+      border: 1px solid $checkbox-button-background;
     }
 
     &-icon {
@@ -113,25 +113,25 @@
     }
 
     .nut-checkbox-button-icon-checked {
-      width: scale-px(12px);
-      height: scale-px(12px);
+      width: 12px;
+      height: 12px;
       position: absolute;
       color: $white;
       right: 0px;
       bottom: 0;
-      transform: translate(scale-px(-1px), scale-px(-2px));
+      transform: translate(-1px, -2px);
     }
 
     .nut-icon {
       position: absolute;
       font-size: $font-size-s;
-      width: scale-px(12px);
-      height: scale-px(12px);
+      width: 12px;
+      height: 12px;
 
       &:before {
         top: auto;
-        bottom: scale-px(-22px);
-        margin-left: scale-px(6px);
+        bottom: -22px;
+        margin-left: 6px;
       }
     }
   }
@@ -139,7 +139,7 @@
   .nut-checkbox-button-active.nut-checkbox-button-disabled {
     background: $color-text-disabled;
     color: $white;
-    border: scale-px(1px) solid $color-text-disabled;
+    border: 1px solid $color-text-disabled;
   }
 
   &-list-item {
@@ -176,19 +176,19 @@
     &-icon {
       right: auto;
       left: 0;
-      border-right: scale-px(10px) solid transparent;
-      border-left: scale-px(10px) solid $color-primary;
+      border-right: 10px solid transparent;
+      border-left: 10px solid $color-primary;
 
       &-checked {
         left: auto;
         right: 50%;
-        transform: translate(scale-px(3px), scale-px(-3px));
+        transform: translate(3px, -3px);
       }
 
       .nut-icon {
         &:before {
           margin-left: 0;
-          margin-right: scale-px(6px);
+          margin-right: 6px;
         }
       }
     }
diff --git a/src/packages/checkboxgroup/checkboxgroup.scss b/src/packages/checkboxgroup/checkboxgroup.scss
index c6863eecb7..3e2a6bd4e8 100644
--- a/src/packages/checkboxgroup/checkboxgroup.scss
+++ b/src/packages/checkboxgroup/checkboxgroup.scss
@@ -10,7 +10,7 @@
     flex-direction: column;
 
     .nut-checkbox {
-      margin-bottom: scale-px(5px);
+      margin-bottom: 5px;
 
       &.nut-checkbox-reverse {
         width: 100%;
@@ -37,7 +37,7 @@
       display: inline-flex;
       /* #endif */
       flex: 1;
-      margin-right: scale-px(20px);
+      margin-right: 20px;
 
       &-button-active {
         border: $radio-button-active-border;
@@ -55,7 +55,7 @@
     box-sizing: border-box;
 
     .nut-checkbox {
-      margin-bottom: scale-px(5px);
+      margin-bottom: 5px;
 
       &.nut-checkbox-reverse {
         width: auto;
@@ -75,14 +75,14 @@
 .nut-rtl .nut-checkboxgroup {
   .nut-checkbox {
     &-label {
-      margin-right: scale-px(5px);
+      margin-right: 5px;
     }
   }
 
   &-vertical {
     .nut-checkbox {
       &-label {
-        margin-right: scale-px(5px);
+        margin-right: 5px;
       }
     }
   }
@@ -90,7 +90,7 @@
   &-horizontal {
     .nut-checkbox {
       margin-right: 0;
-      margin-left: scale-px(20px);
+      margin-left: 20px;
     }
   }
 }
diff --git a/src/packages/collapseitem/collapseitem.scss b/src/packages/collapseitem/collapseitem.scss
index 298f1549ee..067cfa9b49 100644
--- a/src/packages/collapseitem/collapseitem.scss
+++ b/src/packages/collapseitem/collapseitem.scss
@@ -6,8 +6,8 @@
     box-sizing: border-box;
     content: ' ';
     pointer-events: none;
-    right: scale-px(16px);
-    left: scale-px(16px);
+    right: 16px;
+    left: 16px;
     bottom: 0;
     border-bottom: $collapse-item-border-bottom;
     -webkit-transform: scaleY(0.5);
@@ -34,8 +34,8 @@
       box-sizing: border-box;
       content: ' ';
       pointer-events: none;
-      right: scale-px(16px);
-      left: scale-px(16px);
+      right: 16px;
+      left: 16px;
       bottom: 0;
       border-bottom: $collapse-item-header-border-bottom;
       /* #ifdef harmony dynamic*/
@@ -57,7 +57,7 @@
     flex: 1;
     display: flex;
     justify-content: flex-end;
-    padding: 0px scale-px(20px);
+    padding: 0px 20px;
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
@@ -66,7 +66,7 @@
 
   &-icon-box {
     display: flex;
-    width: scale-px(24px);
+    width: 24px;
     position: relative;
     color: $color-text;
   }
@@ -76,7 +76,7 @@
     align-items: center;
     position: absolute;
     top: 50%;
-    left: scale-px(5px);
+    left: 5px;
     transform: translateY(-50%);
     transform-origin: center;
     transition: transform 0.3s;
@@ -126,6 +126,6 @@
 .nut-rtl .nut-collapse-item {
   &-icon {
     left: auto;
-    right: scale-px(5px);
+    right: 5px;
   }
 }
diff --git a/src/packages/countdown/countdown.scss b/src/packages/countdown/countdown.scss
index e16cb0237f..84323db283 100644
--- a/src/packages/countdown/countdown.scss
+++ b/src/packages/countdown/countdown.scss
@@ -15,7 +15,7 @@
     box-sizing: border-box;
     font-weight: $coutdown-font-weight;
     font-size: $countdown-font-size;
-    line-height: calc($countdown-font-size + scale-px(2px));
+    line-height: calc($countdown-font-size + 2px);
     font-family: 'JDZH-Regular';
   }
   &-number,
@@ -41,7 +41,7 @@
     background-color: $countdown-number-background-color;
     color: $countdown-number-color;
     &::after {
-      border: scale-px(1px) solid $countdown-number-border-color;
+      border: 1px solid $countdown-number-border-color;
     }
   }
 
@@ -49,7 +49,7 @@
     background-color: $countdown-number-primary-background-color;
     color: $countdown-number-primary-color;
     &::after {
-      border: scale-px(1px) solid $countdown-number-primary-border-color;
+      border: 1px solid $countdown-number-primary-border-color;
     }
   }
   &-number-text {
diff --git a/src/packages/dialog/dialog.scss b/src/packages/dialog/dialog.scss
index 2c0b6b49b1..93f0d99f4b 100644
--- a/src/packages/dialog/dialog.scss
+++ b/src/packages/dialog/dialog.scss
@@ -60,7 +60,7 @@
     }
 
     &-bottom {
-      bottom: scale-px(-64px);
+      bottom: -64px;
       width: $dialog-bottom-close-icon-size;
       height: $dialog-bottom-close-icon-size;
       left: 50%;
diff --git a/src/packages/divider/divider.scss b/src/packages/divider/divider.scss
index 6cff69ca04..bb5c5bb6cc 100644
--- a/src/packages/divider/divider.scss
+++ b/src/packages/divider/divider.scss
@@ -53,7 +53,7 @@
     /* #endif */
     width: 0px;
     height: $divider-vertical-height;
-    border-left: scale-px(1px) solid $divider-border-color;
+    border-left: 1px solid $divider-border-color;
     margin: $divider-vertical-margin;
     vertical-align: middle;
   }
diff --git a/src/packages/elevator/elevator.scss b/src/packages/elevator/elevator.scss
index dfe3550d29..ba1732bfed 100644
--- a/src/packages/elevator/elevator.scss
+++ b/src/packages/elevator/elevator.scss
@@ -106,10 +106,10 @@
         /* #endif */
         align-items: center;
         justify-content: center;
-        height: scale-px(16px);
-        width: scale-px(16px);
+        height: 16px;
+        width: 16px;
         border-radius: 50%;
-        margin: scale-px(1px) 0;
+        margin: 1px 0;
         color: $elevator-bars-color;
         font-size: $elevator-bars-font-size;
         cursor: pointer;
diff --git a/src/packages/ellipsis/ellipsis.scss b/src/packages/ellipsis/ellipsis.scss
index 5520be55c2..f7b313ad8c 100644
--- a/src/packages/ellipsis/ellipsis.scss
+++ b/src/packages/ellipsis/ellipsis.scss
@@ -14,7 +14,7 @@
 
 .nut-ellipsis-copy {
   position: absolute;
-  top: scale-px(-999999px);
+  top: -999999px;
 }
 
 .nut-ellipsis-width {
diff --git a/src/packages/empty/empty.scss b/src/packages/empty/empty.scss
index f6508e30c4..7ec5e472fa 100644
--- a/src/packages/empty/empty.scss
+++ b/src/packages/empty/empty.scss
@@ -48,16 +48,16 @@
   &-actions-base {
     display: flex;
     flex-direction: row;
-    margin-top: scale-px(24px);
+    margin-top: 24px;
   }
   &-actions-small {
     display: flex;
     flex-direction: row;
-    margin-top: scale-px(16px);
+    margin-top: 16px;
   }
 
   &-action {
-    margin-right: scale-px(6px);
-    margin-left: scale-px(6px);
+    margin-right: 6px;
+    margin-left: 6px;
   }
 }
diff --git a/src/packages/fixednav/fixednav.scss b/src/packages/fixednav/fixednav.scss
index 9fe8c396d3..0e3a5dc40e 100644
--- a/src/packages/fixednav/fixednav.scss
+++ b/src/packages/fixednav/fixednav.scss
@@ -5,7 +5,7 @@
   position: fixed;
   z-index: $fixednav-index;
   display: inline-block;
-  height: scale-px(50px);
+  height: 50px;
 
   &.active {
     .nut-fixednav-btn {
@@ -29,17 +29,17 @@
     box-sizing: border-box;
     position: absolute;
     z-index: $fixednav-index;
-    width: scale-px(70px);
+    width: 70px;
     height: 100%;
     background: $fixednav-button-background;
-    box-shadow: 0px scale-px(2px) scale-px(4px) 0px rgba(0, 0, 0, 0.2);
+    box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.2);
     display: flex;
     align-items: center;
     justify-content: center;
 
     .text {
-      width: scale-px(24px);
-      line-height: scale-px(13px);
+      width: 24px;
+      line-height: 13px;
       font-size: $font-size-s;
       color: #fff;
       flex-shrink: 0;
@@ -59,7 +59,7 @@
     background: $fixednav-background-color;
     display: flex;
     justify-content: space-between;
-    box-shadow: scale-px(2px) scale-px(2px) scale-px(8px) 0px rgba(0, 0, 0, 0.2);
+    box-shadow: 2px 2px 8px 0px rgba(0, 0, 0, 0.2);
 
     &-item {
       position: relative;
@@ -69,7 +69,7 @@
       flex-direction: column;
       justify-content: center;
       align-items: center;
-      min-width: scale-px(50px);
+      min-width: 50px;
       flex-shrink: 0;
       color: $fixednav-color;
 
@@ -79,9 +79,9 @@
     }
 
     &-image {
-      width: scale-px(20px);
-      height: scale-px(20px);
-      margin-bottom: scale-px(2px);
+      width: 20px;
+      height: 20px;
+      margin-bottom: 2px;
     }
   }
 
@@ -89,19 +89,19 @@
     right: 0;
     .nut-fixednav-btn {
       right: 0;
-      border-radius: scale-px(45px) 0 0 scale-px(45px);
+      border-radius: 45px 0 0 45px;
       .nut-icon {
-        margin-right: scale-px(5px);
+        margin-right: 5px;
         transform: rotate(0deg);
       }
     }
     .nut-fixednav-list {
       right: 0;
       transform: translateX(100%);
-      border-radius: scale-px(25px) 0 0 scale-px(25px);
+      border-radius: 25px 0 0 25px;
       padding: {
-        left: scale-px(20px);
-        right: scale-px(80px);
+        left: 20px;
+        right: 80px;
       }
     }
   }
@@ -111,9 +111,9 @@
     .nut-fixednav-btn {
       flex-direction: row-reverse;
       left: 0;
-      border-radius: 0 scale-px(45px) scale-px(45px) 0;
+      border-radius: 0 45px 45px 0;
       .nut-icon {
-        margin-left: scale-px(5px);
+        margin-left: 5px;
         transform: rotate(180deg);
       }
     }
@@ -121,10 +121,10 @@
     .nut-fixednav-list {
       transform: translateX(-100%);
       left: 0;
-      border-radius: 0 scale-px(25px) scale-px(25px) 0;
+      border-radius: 0 25px 25px 0;
       padding: {
-        left: scale-px(80px);
-        right: scale-px(20px);
+        left: 80px;
+        right: 20px;
       }
     }
   }
@@ -150,10 +150,10 @@
   &-btn {
     right: auto;
     left: 0;
-    border-radius: 0px scale-px(45px) scale-px(45px) 0px;
+    border-radius: 0px 45px 45px 0px;
     .nut-icon {
       margin-right: 0px;
-      margin-left: scale-px(5px);
+      margin-left: 5px;
       transform: rotate(180deg);
     }
   }
@@ -162,13 +162,12 @@
     right: auto;
     left: 0;
     transform: translateX(-100%);
-    border-radius: 0px scale-px(25px) scale-px(25px) 0px;
-    box-shadow: scale-px(-2px) scale-px(2px) scale-px(8px) 0px
-      rgba(0, 0, 0, 0.2);
+    border-radius: 0px 25px 25px 0px;
+    box-shadow: -2px 2px 8px 0px rgba(0, 0, 0, 0.2);
 
     padding: {
-      right: scale-px(20px);
-      left: scale-px(80px);
+      right: 20px;
+      left: 80px;
     }
 
     &-item {
@@ -186,11 +185,11 @@
     .nut-fixednav-btn {
       left: auto;
       right: 0;
-      border-radius: scale-px(45px) 0 0 scale-px(45px);
+      border-radius: 45px 0 0 45px;
 
       .nut-icon {
         transform: rotate(0deg);
-        margin-right: scale-px(5px);
+        margin-right: 5px;
         margin-left: 0px;
       }
     }
@@ -199,11 +198,11 @@
       transform: translateX(100%);
       right: auto;
       left: auto;
-      border-radius: scale-px(25px) 0px 0px scale-px(25px);
+      border-radius: 25px 0px 0px 25px;
 
       padding: {
-        right: scale-px(80px);
-        left: scale-px(20px);
+        right: 80px;
+        left: 20px;
       }
     }
   }
diff --git a/src/packages/formitem/formitem.scss b/src/packages/formitem/formitem.scss
index e6005259c0..285e36b715 100644
--- a/src/packages/formitem/formitem.scss
+++ b/src/packages/formitem/formitem.scss
@@ -23,14 +23,14 @@
       color: $form-item-required-color;
       margin-right: $form-item-required-margin-right;
       position: absolute;
-      left: scale-px(-10px);
+      left: -10px;
     }
 
     &-right-required {
       color: $form-item-required-color;
       margin-left: $form-item-required-margin-right;
       position: absolute;
-      right: scale-px(-10px);
+      right: -10px;
     }
   }
 
@@ -68,7 +68,7 @@
       }
 
       .nut-range-container {
-        min-height: scale-px(24px);
+        min-height: 24px;
       }
 
       .nut-textarea {
@@ -132,13 +132,13 @@
 
 .nut-form-item-label-right {
   justify-content: flex-end;
-  padding-right: scale-px(24px);
+  padding-right: 24px;
   white-space: nowrap;
 }
 
 .nut-form-item-label-left {
   position: relative;
-  padding-left: scale-px(12px);
+  padding-left: 12px;
   white-space: nowrap;
 }
 
@@ -150,8 +150,8 @@
 
 .nut-form-item-label-top {
   display: block;
-  padding-bottom: scale-px(4px);
-  padding-right: scale-px(24px);
+  padding-bottom: 4px;
+  padding-right: 24px;
 }
 
 .nut-form-item-body-top {
@@ -163,14 +163,14 @@
 .nut-rtl .form-layout-right .nut-form-item-label {
   text-align: left;
   padding-right: 0;
-  padding-left: scale-px(24px);
+  padding-left: 24px;
 }
 
 [dir='rtl'] .form-layout-left .nut-form-item-label,
 .nut-rtl .form-layout-left .nut-form-item-label {
   text-align: right;
   padding-left: 0;
-  padding-right: scale-px(12px);
+  padding-right: 12px;
 
   // .required {
   //   left: auto;
@@ -181,7 +181,7 @@
 [dir='rtl'] .form-layout-top .nut-form-item-label,
 .nut-rtl .form-layout-top .nut-form-item-label {
   padding-right: 0;
-  padding-left: scale-px(24px);
+  padding-left: 24px;
 }
 
 [dir='rtl'] .form-layout-top .nut-form-item-body,
diff --git a/src/packages/grid/grid.scss b/src/packages/grid/grid.scss
index 372766e3a3..92d9a1b268 100644
--- a/src/packages/grid/grid.scss
+++ b/src/packages/grid/grid.scss
@@ -17,6 +17,6 @@
 .nut-rtl .nut-grid {
   &-border {
     border-left-width: 0;
-    border-right-width: scale-px(1px);
+    border-right-width: 1px;
   }
 }
diff --git a/src/packages/griditem/griditem.scss b/src/packages/griditem/griditem.scss
index a3ae4da838..ee1df14ec0 100644
--- a/src/packages/griditem/griditem.scss
+++ b/src/packages/griditem/griditem.scss
@@ -98,12 +98,12 @@
     &-content {
       &-border {
         border-right-width: 0;
-        border-left-width: scale-px(1px);
+        border-left-width: 1px;
       }
 
       &-surround {
         border-left-width: 0;
-        border-right-width: scale-px(1px);
+        border-right-width: 1px;
       }
 
       &-horizontal {
diff --git a/src/packages/hoverbuttonitem/hoverbuttonitem.scss b/src/packages/hoverbuttonitem/hoverbuttonitem.scss
index 16c7dc9327..17c9fb1129 100644
--- a/src/packages/hoverbuttonitem/hoverbuttonitem.scss
+++ b/src/packages/hoverbuttonitem/hoverbuttonitem.scss
@@ -3,7 +3,7 @@
     width: $hoverbutton-item-size;
     height: $hoverbutton-item-size;
     border-radius: $hoverbutton-item-size;
-    border: scale-px(1px) solid $hoverbutton-item-border-color;
+    border: 1px solid $hoverbutton-item-border-color;
     background-color: $hoverbutton-item-background;
 
     &:active,
@@ -26,24 +26,24 @@
 
       .nut-icon {
         display: block;
-        width: scale-px(14px);
-        height: scale-px(14px);
+        width: 14px;
+        height: 14px;
         font-size: $font-size-base;
       }
     }
   }
 
   &-icon {
-    width: scale-px(20px);
-    height: scale-px(20px);
-    margin: scale-px(9px);
+    width: 20px;
+    height: 20px;
+    margin: 9px;
     color: $hoverbutton-item-icon-color;
     fill: $hoverbutton-item-icon-color;
 
     .nut-icon {
       display: block;
-      width: scale-px(20px);
-      height: scale-px(20px);
+      width: 20px;
+      height: 20px;
       font-size: scale-font-px(20px);
     }
   }
@@ -54,13 +54,13 @@
   }
 
   &-text-icon {
-    width: scale-px(14px);
-    height: scale-px(5px);
+    width: 14px;
+    height: 5px;
   }
 
   &-text {
     font-size: $font-size-xxs;
-    margin-top: scale-px(5px);
-    line-height: scale-px(9px);
+    margin-top: 5px;
+    line-height: 9px;
   }
 }
diff --git a/src/packages/imagepreview/imagepreview.scss b/src/packages/imagepreview/imagepreview.scss
index 51108ec84b..1587f2886a 100644
--- a/src/packages/imagepreview/imagepreview.scss
+++ b/src/packages/imagepreview/imagepreview.scss
@@ -16,7 +16,7 @@
   &-index {
     position: fixed;
     z-index: 2002;
-    top: scale-px(50px);
+    top: 50px;
     text-align: center;
     left: 0;
     right: 0;
@@ -25,7 +25,7 @@
 
     .arrow {
       position: absolute;
-      left: scale-px(15px);
+      left: 15px;
       transform: rotateZ(180deg);
     }
   }
@@ -44,17 +44,17 @@
     }
 
     &.top-right {
-      top: scale-px(50px);
-      right: scale-px(20px);
+      top: 50px;
+      right: 20px;
     }
 
     &.top-left {
-      top: scale-px(50px);
-      left: scale-px(20px);
+      top: 50px;
+      left: 20px;
     }
 
     &.bottom {
-      bottom: scale-px(50px);
+      bottom: 50px;
       left: 0;
       right: 0;
       text-align: center;
@@ -103,19 +103,19 @@
   &-index {
     .arrow {
       left: auto;
-      right: scale-px(15px);
+      right: 15px;
       transform: rotateZ(-180deg);
     }
   }
   &-close {
     &.top-right {
       right: auto;
-      left: scale-px(20px);
+      left: 20px;
     }
 
     &.top-left {
       left: auto;
-      right: scale-px(20px);
+      right: 20px;
     }
   }
 }
diff --git a/src/packages/indicator/indicator.scss b/src/packages/indicator/indicator.scss
index 66e75485ee..6c442de3f5 100644
--- a/src/packages/indicator/indicator.scss
+++ b/src/packages/indicator/indicator.scss
@@ -6,7 +6,7 @@
   align-items: center;
 
   &-fixed-width {
-    width: scale-px(21px);
+    width: 21px;
   }
 
   &-dot,
@@ -36,11 +36,11 @@
   &-fixed-width {
     // 两个页码的时候
     .nut-indicator-dot {
-      width: scale-px(12px);
+      width: 12px;
       border-radius: $indicator-border-radius;
 
       &-active {
-        width: scale-px(6px);
+        width: 6px;
       }
     }
   }
@@ -49,17 +49,17 @@
     // 竖向固定高度
     &.nut-indicator-fixed-width {
       justify-content: flex-start;
-      height: scale-px(21px);
+      height: 21px;
       width: auto;
 
       // 竖向两个页码
       .nut-indicator-dot {
-        width: scale-px(3px);
-        height: scale-px(12px);
+        width: 3px;
+        height: 12px;
         border-radius: $indicator-border-radius;
 
         &-active {
-          height: scale-px(6px);
+          height: 6px;
         }
       }
 
@@ -67,7 +67,7 @@
         &.nut-indicator-white {
           .nut-indicator-dot {
             &-active {
-              height: scale-px(6px);
+              height: 6px;
             }
           }
         }
@@ -136,7 +136,7 @@
 
 .nut-indicator-track.nut-indicator-white {
   &:after {
-    border: scale-px(1px) solid rgba(0, 0, 0, 0.06);
+    border: 1px solid rgba(0, 0, 0, 0.06);
     background: rgba(255, 255, 255, 0.4);
   }
 }
diff --git a/src/packages/infiniteloading/infiniteloading.scss b/src/packages/infiniteloading/infiniteloading.scss
index c0d9cb579a..024ffcf563 100644
--- a/src/packages/infiniteloading/infiniteloading.scss
+++ b/src/packages/infiniteloading/infiniteloading.scss
@@ -22,7 +22,7 @@
         display: flex;
         justify-content: center;
         align-items: center;
-        margin-bottom: scale-px(4px);
+        margin-bottom: 4px;
       }
     }
   }
@@ -32,7 +32,7 @@
     align-items: center;
     justify-content: center;
     width: 100%;
-    padding-top: scale-px(6px);
+    padding-top: 6px;
     color: $infiniteloading-color;
     text-align: center;
 
@@ -43,7 +43,7 @@
       font-size: $font-size-xxs;
 
       &-icons {
-        margin-right: scale-px(8px);
+        margin-right: 8px;
       }
     }
   }
@@ -62,7 +62,7 @@
     &-tips {
       &-icons {
         margin-right: 0;
-        margin-left: scale-px(8px);
+        margin-left: 8px;
       }
     }
   }
diff --git a/src/packages/input/input.scss b/src/packages/input/input.scss
index b24aac76c1..50cbd987f1 100644
--- a/src/packages/input/input.scss
+++ b/src/packages/input/input.scss
@@ -16,12 +16,12 @@
 
   .nut-icon {
     color: $color-text-disabled;
-    width: scale-px(14px);
-    height: scale-px(14px);
+    width: 14px;
+    height: 14px;
     font-size: $font-size-base;
   }
   &-container {
-    height: scale-px(38px);
+    height: 38px;
     padding: $input-padding;
     background-color: $input-background-color;
     border-radius: $input-border-radius;
diff --git a/src/packages/inputnumber/inputnumber.scss b/src/packages/inputnumber/inputnumber.scss
index d156523df5..bda34176b4 100644
--- a/src/packages/inputnumber/inputnumber.scss
+++ b/src/packages/inputnumber/inputnumber.scss
@@ -23,8 +23,8 @@
     height: $inputnumber-button-height;
     background-color: $inputnumber-button-background-color;
     .nut-icon {
-      width: scale-px(10px);
-      height: scale-px(10px);
+      width: 10px;
+      height: 10px;
     }
   }
 
@@ -66,12 +66,12 @@
   }
 
   &-icon-minus {
-    width: scale-px(16px);
-    height: scale-px(16px);
+    width: 16px;
+    height: 16px;
   }
 
   &-icon-plus {
-    width: scale-px(16px);
-    height: scale-px(16px);
+    width: 16px;
+    height: 16px;
   }
 }
diff --git a/src/packages/menuitem/menuitem.scss b/src/packages/menuitem/menuitem.scss
index 485cb89ad8..ae6ca399f7 100644
--- a/src/packages/menuitem/menuitem.scss
+++ b/src/packages/menuitem/menuitem.scss
@@ -79,7 +79,7 @@
 
 .nut-menu-container-down-enter {
   opacity: 0;
-  transform: translate(0, scale-px(-30px));
+  transform: translate(0, -30px);
 }
 
 .nut-menu-container-down-enter-done {
@@ -100,7 +100,7 @@
 
 .nut-menu-container-up-enter {
   opacity: 0;
-  transform: translate(0, scale-px(30px));
+  transform: translate(0, 30px);
 }
 
 .nut-menu-container-up-enter-done {
diff --git a/src/packages/navbar/navbar.scss b/src/packages/navbar/navbar.scss
index 701c006fa5..66ee85787f 100644
--- a/src/packages/navbar/navbar.scss
+++ b/src/packages/navbar/navbar.scss
@@ -12,7 +12,7 @@
   font-size: $navbar-font-size;
   color: $navbar-color;
   overflow: hidden;
-  padding: 0 scale-px(16px);
+  padding: 0 16px;
 
   &-fixed {
     position: fixed;
@@ -51,7 +51,7 @@
     white-space: nowrap;
 
     &-center {
-      max-width: scale-px(129px);
+      max-width: 129px;
       justify-content: center;
     }
   }
@@ -65,31 +65,31 @@
     display: flex;
     align-items: center;
     flex-direction: row;
-    max-width: scale-px(124px);
+    max-width: 124px;
     height: 100%;
     cursor: pointer;
     /* #ifndef harmony jd h5 weapp*/
     .nut-icon,
     .nutui-iconfont {
-      width: scale-px(20px);
-      height: scale-px(20px);
+      width: 20px;
+      height: 20px;
       font-size: scale-font-px(20px);
     }
 
     /* #endif */
     &-maxwidth {
       box-sizing: border-box;
-      width: calc(scale-px(124px) - scale-px(16px));
+      width: calc(124px - 16px);
     }
   }
 
   &-left {
-    padding-right: scale-px(16px);
-    gap: scale-px(16px);
+    padding-right: 16px;
+    gap: 16px;
 
     &-rtl {
       padding-right: 0;
-      padding-left: scale-px(16px);
+      padding-left: 16px;
     }
 
     &-back {
@@ -97,7 +97,7 @@
       flex-direction: row;
       align-items: center;
       justify-content: center;
-      gap: scale-px(16px);
+      gap: 16px;
     }
 
     &-hidden {
@@ -107,12 +107,12 @@
   }
 
   &-right {
-    padding-left: scale-px(16px);
+    padding-left: 16px;
     justify-content: flex-end;
-    gap: scale-px(16px);
+    gap: 16px;
 
     &-rtl {
-      padding-right: scale-px(16px);
+      padding-right: 16px;
       padding-left: 0;
     }
   }
diff --git a/src/packages/noticebar/noticebar.scss b/src/packages/noticebar/noticebar.scss
index f7e7e78387..4c98dc203b 100644
--- a/src/packages/noticebar/noticebar.scss
+++ b/src/packages/noticebar/noticebar.scss
@@ -68,8 +68,8 @@
       margin-left: $noticebar-icon-gap;
 
       .nut-icon {
-        width: scale-px(12px);
-        height: scale-px(12px);
+        width: 12px;
+        height: 12px;
         color: $noticebar-color;
       }
     }
diff --git a/src/packages/notify/notify.scss b/src/packages/notify/notify.scss
index 1b6c2d7c33..9c7bf6e5a4 100644
--- a/src/packages/notify/notify.scss
+++ b/src/packages/notify/notify.scss
@@ -43,8 +43,8 @@
 
 .nut-notify {
   position: fixed;
-  left: scale-px(8px);
-  right: scale-px(8px);
+  left: 8px;
+  right: 8px;
   z-index: $notify-z-index;
   display: flex;
   align-items: center;
@@ -84,18 +84,18 @@
   }
 
   &-left-icon {
-    margin-right: scale-px(6px);
+    margin-right: 6px;
     .nut-icon {
-      height: scale-px(16px);
-      width: scale-px(16px);
+      height: 16px;
+      width: 16px;
     }
   }
 
   &-right-icon {
-    margin-left: scale-px(6px);
+    margin-left: 6px;
     .nut-icon {
-      height: scale-px(12px);
-      width: scale-px(12px);
+      height: 12px;
+      width: 12px;
     }
   }
 }
diff --git a/src/packages/numberkeyboard/numberkeyboard.scss b/src/packages/numberkeyboard/numberkeyboard.scss
index b0ad39a6a2..244659510e 100644
--- a/src/packages/numberkeyboard/numberkeyboard.scss
+++ b/src/packages/numberkeyboard/numberkeyboard.scss
@@ -46,7 +46,7 @@
 
   &-body {
     display: flex;
-    padding: scale-px(6px) 0 0 scale-px(6px);
+    padding: 6px 0 0 6px;
 
     &-keys {
       display: flex;
@@ -64,7 +64,7 @@
       flex-basis: 33%;
       /* #endif */
       box-sizing: border-box;
-      padding: 0 scale-px(6px) scale-px(6px) 0;
+      padding: 0 6px 6px 0;
       background-color: $numberkeyboard-wrapper-background-color;
 
       .key {
@@ -98,8 +98,8 @@
       .key {
         position: absolute;
         top: 0;
-        right: scale-px(6px);
-        bottom: scale-px(6px);
+        right: 6px;
+        bottom: 6px;
         left: 0;
         height: auto;
       }
@@ -128,9 +128,9 @@
     }
 
     &-body {
-      padding: scale-px(6px) scale-px(6px) 0 0;
+      padding: 6px 6px 0 0;
       &-wrapper {
-        padding: 0 0 scale-px(6px) scale-px(6px);
+        padding: 0 0 6px 6px;
         .delete {
           transform: rotate(-180deg);
         }
@@ -140,7 +140,7 @@
     &-sidebar {
       .nut-numberkeyboard-body-wrapper {
         .key {
-          left: scale-px(6px);
+          left: 6px;
           right: 0;
           &.delete {
             transform: rotate(-180deg);
diff --git a/src/packages/pagination/pagination.scss b/src/packages/pagination/pagination.scss
index 92d154dee5..28505fbfd4 100644
--- a/src/packages/pagination/pagination.scss
+++ b/src/packages/pagination/pagination.scss
@@ -8,8 +8,8 @@
 .nut-pagination-prev,
 .nut-pagination-item,
 .nut-pagination-next {
-  height: scale-px(39px);
-  min-width: scale-px(39px);
+  height: 39px;
+  min-width: 39px;
   flex-shrink: 0;
   box-sizing: border-box;
   display: flex;
@@ -53,9 +53,9 @@
 }
 
 .nut-pagination-simple {
-  height: scale-px(39px);
-  width: scale-px(124px);
-  line-height: scale-px(39px);
+  height: 39px;
+  width: 124px;
+  line-height: 39px;
   text-align: center;
   font-size: $pagination-font-size;
   color: $pagination-color;
diff --git a/src/packages/popover/popover.scss b/src/packages/popover/popover.scss
index fb17684946..20081f9612 100644
--- a/src/packages/popover/popover.scss
+++ b/src/packages/popover/popover.scss
@@ -6,26 +6,26 @@
 
   &-arrow {
     position: absolute;
-    width: scale-px(8px);
-    height: scale-px(4px);
+    width: 8px;
+    height: 4px;
 
     .nut-icon-ArrowRadius {
       position: absolute;
       color: $popover-content-background-color;
-      width: scale-px(8px);
-      height: scale-px(4px);
+      width: 8px;
+      height: 4px;
     }
 
     &-top {
-      bottom: scale-px(-4px);
+      bottom: -4px;
     }
 
     &-bottom {
-      top: scale-px(-4px);
+      top: -4px;
     }
 
     &-left {
-      right: scale-px(-6px);
+      right: -6px;
       transform-origin: center top;
 
       &.nut-popover-arrow-left {
@@ -34,15 +34,15 @@
       }
 
       &.nut-popover-arrow-left-top {
-        top: scale-px(16px);
-        right: scale-px(-8px);
+        top: 16px;
+        right: -8px;
         transform: rotate(90deg) translateY(0%);
       }
 
       &.nut-popover-arrow-left-bottom {
         top: auto;
-        bottom: scale-px(16px);
-        right: scale-px(-8px);
+        bottom: 16px;
+        right: -8px;
         transform: rotate(90deg) translateY(0%);
       }
     }
@@ -51,19 +51,19 @@
       transform-origin: center top;
       &.nut-popover-arrow-right {
         top: 50%;
-        left: scale-px(-6px);
+        left: -6px;
         transform: rotate(-90deg) translateY(-50%);
       }
 
       &.nut-popover-arrow-right-top {
-        top: scale-px(16px);
-        left: scale-px(-8px);
+        top: 16px;
+        left: -8px;
         transform: rotate(-90deg) translateY(0%);
       }
 
       &.nut-popover-arrow-right-bottom {
-        bottom: scale-px(16px);
-        left: scale-px(-8px);
+        bottom: 16px;
+        left: -8px;
         transform: rotate(-90deg) translateY(0%);
       }
     }
@@ -75,7 +75,7 @@
     border-radius: $popover-border-radius;
     font-size: $popover-font-size;
     color: $popover-text-color;
-    line-height: scale-px(28px);
+    line-height: 28px;
     /* #ifndef dynamic*/
     max-height: initial;
     overflow-y: initial;
@@ -89,7 +89,7 @@
       display: flex;
       align-items: center;
       justify-content: center;
-      border-bottom: scale-px(1px) solid $popover-divider-color;
+      border-bottom: 1px solid $popover-divider-color;
       max-width: $popover-item-width;
       word-wrap: break-word;
 
@@ -118,7 +118,7 @@
       }
 
       &-name {
-        width: calc(100% - scale-px(34px));
+        width: calc(100% - 34px);
         word-break: keep-all;
         flex: 1;
       }
@@ -149,8 +149,8 @@
     &-top-right {
       right: 0;
       .nut-popover-arrow-top-right {
-        right: scale-px(16px);
-        bottom: scale-px(-3.5px);
+        right: 16px;
+        bottom: -3.5px;
         transform: rotate(180deg) translateX(0%);
       }
     }
@@ -158,8 +158,8 @@
     &-top-left {
       left: 0;
       .nut-popover-arrow-top-left {
-        left: scale-px(16px);
-        bottom: scale-px(-3.5px);
+        left: 16px;
+        bottom: -3.5px;
         transform: rotate(180deg) translateX(0%);
       }
     }
@@ -174,7 +174,7 @@
     &-bottom-right {
       right: 0;
       .nut-popover-arrow-bottom-right {
-        right: scale-px(16px);
+        right: 16px;
         transform: translateX(0%);
       }
     }
@@ -182,7 +182,7 @@
     &-bottom-left {
       left: 0;
       .nut-popover-arrow-bottom-left {
-        left: scale-px(16px);
+        left: 16px;
         transform: translateX(0%);
       }
     }
@@ -232,7 +232,7 @@
     .nut-popover-item {
       &-name {
         margin-left: 0;
-        margin-right: scale-px(4px);
+        margin-right: 4px;
       }
 
       &-action-icon {
@@ -252,7 +252,7 @@
 
       .nut-popover-arrow-top-right {
         right: auto;
-        left: scale-px(16px);
+        left: 16px;
       }
     }
 
@@ -262,7 +262,7 @@
 
       .nut-popover-arrow-top-left {
         left: auto;
-        right: scale-px(16px);
+        right: 16px;
       }
     }
 
@@ -280,7 +280,7 @@
 
       .nut-popover-arrow-bottom-right {
         right: auto;
-        left: scale-px(16px);
+        left: 16px;
       }
     }
 
@@ -290,7 +290,7 @@
 
       .nut-popover-arrow-bottom-left {
         left: auto;
-        right: scale-px(16px);
+        right: 16px;
       }
     }
   }
@@ -333,5 +333,5 @@
 // Taro
 .nut-popover-content-copy {
   position: absolute;
-  top: scale-px(-99999px);
+  top: -99999px;
 }
diff --git a/src/packages/popup/popup.scss b/src/packages/popup/popup.scss
index 4fce559e70..cfa9ddd001 100644
--- a/src/packages/popup/popup.scss
+++ b/src/packages/popup/popup.scss
@@ -85,7 +85,7 @@
     right: auto;
     bottom: auto;
     min-height: 10%;
-    max-width: scale-px(295px);
+    max-width: 295px;
     transform: translate(-50%, -50%);
 
     &.nut-popup-round {
@@ -114,7 +114,7 @@
     right: 0;
     left: auto;
     bottom: auto;
-    width: scale-px(100px);
+    width: 100px;
     height: 100%;
 
     &.nut-popup-round {
@@ -127,7 +127,7 @@
     left: 0;
     right: auto;
     bottom: auto;
-    width: scale-px(100px);
+    width: 100px;
     height: 100%;
 
     &.nut-popup-round {
diff --git a/src/packages/progress/progress.scss b/src/packages/progress/progress.scss
index 5b95515a79..9b7a7685e3 100644
--- a/src/packages/progress/progress.scss
+++ b/src/packages/progress/progress.scss
@@ -35,7 +35,7 @@
     display: flex;
     align-items: center;
     transition: all 0.4s;
-    margin-left: scale-px(12px);
+    margin-left: 12px;
     color: $color-text-help;
     font-family: PingFang SC;
     font-size: $progress-text-font-size;
diff --git a/src/packages/pulltorefresh/pulltorefresh.scss b/src/packages/pulltorefresh/pulltorefresh.scss
index 5d79d9e4b3..9710b3429b 100644
--- a/src/packages/pulltorefresh/pulltorefresh.scss
+++ b/src/packages/pulltorefresh/pulltorefresh.scss
@@ -18,7 +18,7 @@
       &-icons {
         width: $pulltorefresh-icon-width;
         height: $pulltorefresh-icon-height;
-        margin-bottom: scale-px(4px);
+        margin-bottom: 4px;
       }
     }
   }
diff --git a/src/packages/quickenter/quickenter.scss b/src/packages/quickenter/quickenter.scss
index 3caf986118..aacdbcdd7c 100644
--- a/src/packages/quickenter/quickenter.scss
+++ b/src/packages/quickenter/quickenter.scss
@@ -3,9 +3,9 @@
 .nut-quickenter {
   width: 100%;
   /* 限制弹层最大高度，包含安全区 */
-  max-height: calc(#{$quickenter-max-height} + env(safe-area-inset-top, 0));
+  max-height: calc($quickenter-max-height + env(safe-area-inset-top, 0px));
   background: $quickenter-bg-color;
-  border-radius: 0 0 scale-px(12px) scale-px(12px);
+  border-radius: 0 0 12px 12px;
   overflow: hidden;
   box-sizing: border-box;
   display: flex;
@@ -24,7 +24,7 @@
     display: flex;
     align-items: center;
     justify-content: space-between;
-    padding: scale-px(30px) scale-px(16px) 0;
+    padding: 30px 16px 0;
     box-sizing: border-box;
   }
 
@@ -53,7 +53,7 @@
 
   &-content {
     flex: 1;
-    padding: scale-px(10px) scale-px(28px);
+    padding: 10px 28px;
     overflow-y: hidden; // 始终可滚动，防止内容被遮挡
     box-sizing: border-box;
 
@@ -75,28 +75,28 @@
     flex-direction: column;
     align-items: center;
     justify-content: flex-start;
-    width: scale-px(56px);
-    padding: 0 0 scale-px(12px) 0; // Reduced from 16px to ensure 2 rows fit in 256px
+    width: 56px;
+    padding: 0 0 12px 0; // Reduced from 16px to ensure 2 rows fit in 256px
     box-sizing: border-box;
     cursor: pointer;
 
     // Calculate gap for 4 items per row: (100% - 4 * 56px) / 3
-    margin-right: calc((100% - scale-px(224px)) / 3);
+    margin-right: calc((100% - 224px) / 3);
 
     &:nth-child(4n) {
       margin-right: 0;
     }
 
     &-icon {
-      width: scale-px(56px);
-      height: scale-px(56px);
+      width: 56px;
+      height: 56px;
       display: flex;
       align-items: center;
       justify-content: center;
       border-radius: 50%;
       background: $quickenter-item-icon-bg-color;
       color: $quickenter-item-icon-color;
-      margin-bottom: scale-px(8px);
+      margin-bottom: 8px;
       flex-shrink: 0;
 
       svg,
@@ -114,9 +114,9 @@
       // Allow multi-line if text is long, preventing truncation
       white-space: normal;
       word-wrap: break-word;
-      width: scale-px(72px); // Allow text to be slightly wider than icon
-      margin-left: scale-px(-8px); // Center 72px title over 56px icon
-      margin-right: scale-px(-8px);
+      width: 72px; // Allow text to be slightly wider than icon
+      margin-left: -8px; // Center 72px title over 56px icon
+      margin-right: -8px;
     }
   }
 }
diff --git a/src/packages/radio/radio.scss b/src/packages/radio/radio.scss
index fd0c80b838..ff879e9cc4 100644
--- a/src/packages/radio/radio.scss
+++ b/src/packages/radio/radio.scss
@@ -37,7 +37,7 @@
     &-checked {
       color: $color-primary;
       background-color: $white;
-      box-shadow: 0px scale-px(2px) scale-px(4px) 0px #ff0f2333;
+      box-shadow: 0px 2px 4px 0px #ff0f2333;
       border-radius: 50%;
 
       &.nut-radio-icon-disabled {
@@ -61,14 +61,14 @@
     display: inline-flex;
     /* #endif */
     align-items: center;
-    min-height: scale-px(30px);
+    min-height: 30px;
     padding: $radio-button-padding;
     font-size: $radio-button-font-size;
     background: $radio-button-background;
     border-radius: $radio-button-border-radius;
     color: $radio-label-color;
     box-sizing: border-box;
-    border: scale-px(1px) solid $radio-button-background;
+    border: 1px solid $radio-button-background;
 
     &-active {
       background: $color-primary-light-pressed;
@@ -78,14 +78,14 @@
 
     &-disabled {
       color: $color-text-disabled;
-      border: scale-px(1px) solid $radio-button-background;
+      border: 1px solid $radio-button-background;
     }
   }
 
   .nut-radio-button-active.nut-radio-button-disabled {
     background: $color-text-disabled;
     color: $white;
-    border: scale-px(1px) solid $color-text-disabled;
+    border: 1px solid $color-text-disabled;
   }
 }
 
diff --git a/src/packages/radiogroup/radiogroup.scss b/src/packages/radiogroup/radiogroup.scss
index 7b89fbd7e3..661a6e775e 100644
--- a/src/packages/radiogroup/radiogroup.scss
+++ b/src/packages/radiogroup/radiogroup.scss
@@ -23,7 +23,7 @@
       }
 
       &-button {
-        border: scale-px(1px) solid $radio-button-background;
+        border: 1px solid $radio-button-background;
       }
 
       &-button-active {
@@ -38,7 +38,7 @@
 
     .nut-radio {
       &-button {
-        border: scale-px(1px) solid $white;
+        border: 1px solid $white;
       }
 
       &-button-active {
@@ -55,7 +55,7 @@
   .nut-radio-button-active.nut-radio-button-disabled {
     background: $color-text-disabled;
     color: $white;
-    border: scale-px(1px) solid $color-text-disabled;
+    border: 1px solid $color-text-disabled;
   }
 }
 
diff --git a/src/packages/range/range.scss b/src/packages/range/range.scss
index e07ecbfbc7..adc282be67 100644
--- a/src/packages/range/range.scss
+++ b/src/packages/range/range.scss
@@ -19,13 +19,13 @@
   height: $range-height;
   margin: 0 $range-margin;
   background-color: $range-inactive-color;
-  border-radius: scale-px(2px);
+  border-radius: 2px;
   flex: 1;
   cursor: pointer;
 
   &::before {
     position: absolute;
-    inset-block: scale-px(-8px);
+    inset-block: -8px;
     inset-inline: 0;
     content: '';
   }
@@ -45,7 +45,7 @@
     max-width: 100%;
     max-height: 100%;
     background: $range-active-color;
-    border-radius: scale-px(2px);
+    border-radius: 2px;
 
     &-animate {
       transition: all 0.2s;
@@ -59,7 +59,7 @@
     height: $range-button-height;
     background: $range-button-background;
     border-radius: 50%;
-    box-shadow: 0px scale-px(1px) scale-px(2px) 0px rgba(0, 0, 0, 0.15);
+    box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.15);
     border: $range-button-border;
     outline: none;
     align-items: center;
@@ -98,9 +98,9 @@
     &-number {
       position: relative;
       width: 200%;
-      height: scale-px(24px);
-      line-height: scale-px(14px);
-      padding: scale-px(5px) 0;
+      height: 24px;
+      line-height: 14px;
+      padding: 5px 0;
       left: 50%;
       display: flex;
       align-items: center;
@@ -130,7 +130,7 @@
   &-mark {
     position: absolute;
     width: 100%;
-    height: scale-px(14px);
+    height: 14px;
     overflow: visible;
     top: 50%;
   }
@@ -138,14 +138,14 @@
   &-mark-text-wrapper {
     position: absolute;
     height: 100%;
-    top: scale-px(14px);
+    top: 14px;
     display: inline-block;
-    transform: translateX(scale-px(-10px));
+    transform: translateX(-10px);
   }
 
   &-mark-text {
     position: absolute;
-    line-height: scale-px(16px);
+    line-height: 16px;
     font-size: $font-size-s;
     color: #999;
     text-align: center;
@@ -155,11 +155,11 @@
 
   &-tick {
     position: absolute;
-    top: scale-px(-20px);
-    width: scale-px(11px);
-    height: scale-px(11px);
+    top: -20px;
+    width: 11px;
+    height: 11px;
     left: 0px;
-    border-radius: scale-px(6px);
+    border-radius: 6px;
     background: $range-inactive-color;
 
     &-active {
@@ -171,7 +171,7 @@
 .nut-range-vertical-container {
   height: 100%;
   flex-direction: column;
-  padding: 0px scale-px(15px);
+  padding: 0px 15px;
 }
 
 .nut-range-vertical {
@@ -209,7 +209,7 @@
 
   &-mark {
     position: absolute;
-    width: scale-px(36px);
+    width: 36px;
     height: 100%;
     top: 0px;
     right: 50%;
@@ -219,21 +219,21 @@
   }
 
   &-mark-hm {
-    left: scale-px(-34px);
+    left: -34px;
   }
 
   &-mark-text-wrapper {
-    // width: scale-px(20px);
-    height: scale-px(16px);
+    // width: 20px;
+    height: 16px;
     position: absolute;
     display: inline-block;
     user-select: none;
-    transform: translateY(scale-px(-11px));
+    transform: translateY(-11px);
   }
 
   &-mark-text {
     height: 100%;
-    line-height: scale-px(16px);
+    line-height: 16px;
     color: #999;
     text-align: center;
     word-break: keep-all;
@@ -241,11 +241,11 @@
 
   &-tick {
     position: absolute;
-    top: scale-px(2px);
-    left: scale-px(31px);
-    width: scale-px(10px);
-    height: scale-px(10px);
-    border-radius: scale-px(5px);
+    top: 2px;
+    left: 31px;
+    width: 10px;
+    height: 10px;
+    border-radius: 5px;
     background: $range-inactive-color;
 
     &-active {
@@ -282,7 +282,7 @@
   }
 
   &-mark-text {
-    transform: translateX(scale-px(10px));
+    transform: translateX(10px);
   }
 
   &-vertical {
@@ -316,13 +316,13 @@
 
     &-tick {
       left: auto;
-      right: scale-px(30px);
+      right: 30px;
       margin-left: 0;
-      margin-right: scale-px(-0px);
+      margin-right: -0px;
     }
 
     &-mark-text-wrapper {
-      transform: translateY(scale-px(-11px));
+      transform: translateY(-11px);
     }
   }
 }
diff --git a/src/packages/rate/rate.scss b/src/packages/rate/rate.scss
index 3646328b18..756646adc9 100644
--- a/src/packages/rate/rate.scss
+++ b/src/packages/rate/rate.scss
@@ -44,16 +44,16 @@
     &-large {
       margin-left: calc($rate-item-margin * 2);
       .nut-icon {
-        height: calc($rate-icon-size + scale-px(8px));
-        width: calc($rate-icon-size + scale-px(8px));
+        height: calc($rate-icon-size + 8px);
+        width: calc($rate-icon-size + 8px);
       }
     }
 
     &-small {
       margin-left: calc($rate-item-margin / 2);
       .nut-icon {
-        height: calc($rate-icon-size - scale-px(4px));
-        width: calc($rate-icon-size - scale-px(4px));
+        height: calc($rate-icon-size - 4px);
+        width: calc($rate-icon-size - 4px);
       }
     }
 
@@ -148,7 +148,7 @@
     }
 
     &-small {
-      margin-right: calc($rate-item-margin - scale-px(2px));
+      margin-right: calc($rate-item-margin - 2px);
     }
 
     &:last-child {
@@ -185,7 +185,7 @@
     }
 
     &-small {
-      padding-right: calc($rate-item-margin - scale-px(2px));
+      padding-right: calc($rate-item-margin - 2px);
     }
   }
 }
diff --git a/src/packages/resultpage/resultpage.scss b/src/packages/resultpage/resultpage.scss
index 5961b50466..6842c0b134 100644
--- a/src/packages/resultpage/resultpage.scss
+++ b/src/packages/resultpage/resultpage.scss
@@ -46,7 +46,7 @@
     }
   }
   &-action {
-    margin-left: scale-px(6px);
-    margin-right: scale-px(6px);
+    margin-left: 6px;
+    margin-right: 6px;
   }
 }
diff --git a/src/packages/searchbar/searchbar.scss b/src/packages/searchbar/searchbar.scss
index 629bcffacb..1fdc25bbd6 100644
--- a/src/packages/searchbar/searchbar.scss
+++ b/src/packages/searchbar/searchbar.scss
@@ -25,7 +25,7 @@
     height: $searchbar-input-height;
     background: $searchbar-content-background;
     border-radius: $searchbar-content-border-radius;
-    border: scale-px(1px) solid $color-primary;
+    border: 1px solid $color-primary;
   }
 
   &-icon {
@@ -95,19 +95,19 @@
     flex-direction: row;
     z-index: 2;
     background-color: #fff;
-    top: scale-px(9px);
-    left: scale-px(6px);
+    top: 9px;
+    left: 6px;
     font-size: $font-size-s;
-    line-height: scale-px(12px);
+    line-height: 12px;
 
     .nut-searchbar-value {
       display: flex;
       flex-direction: row;
       align-items: center;
-      padding: scale-px(4px) scale-px(8px);
+      padding: 4px 8px;
       background-color: #f7f8fc;
-      border-radius: scale-px(4px);
-      margin-right: scale-px(2px);
+      border-radius: 4px;
+      margin-right: 2px;
     }
 
     .nut-icon {
@@ -115,7 +115,7 @@
       height: scale-icon-px(6px);
       font-size: scale-font-px(6px);
       color: #c2c4cc;
-      margin-left: scale-px(4px);
+      margin-left: 4px;
     }
   }
 
@@ -130,8 +130,8 @@
     align-items: center;
 
     &.nut-icon {
-      width: scale-px(20px);
-      height: scale-px(20px);
+      width: 20px;
+      height: 20px;
     }
   }
 
@@ -193,10 +193,10 @@
   }
 
   &-focus {
-    padding: scale-px(5px) $searchbar-gap;
+    padding: 5px $searchbar-gap;
 
     .nut-searchbar-content {
-      border: scale-px(0.5px) solid #ff5c67;
+      border: 0.5px solid #ff5c67;
     }
   }
 }
diff --git a/src/packages/segmented/segmented.scss b/src/packages/segmented/segmented.scss
index ebe65addc1..de3f361cca 100644
--- a/src/packages/segmented/segmented.scss
+++ b/src/packages/segmented/segmented.scss
@@ -6,7 +6,7 @@
   display: inline-flex;
   /* #endif */
   height: $segmented-height;
-  min-width: scale-px(24px);
+  min-width: 24px;
   padding: $segmented-padding;
   align-items: center;
   border-radius: $segmented-border-radius;
@@ -34,12 +34,12 @@
 .nut-segmented-icon {
   display: flex;
   align-items: center;
-  height: scale-px(10px);
-  width: scale-px(10px);
+  height: 10px;
+  width: 10px;
   margin-right: $segmented-icon-margin-right;
   .nut-icon {
-    height: scale-px(10px);
-    width: scale-px(10px);
+    height: 10px;
+    width: 10px;
     font-size: $font-size-xxs;
   }
 }
diff --git a/src/packages/shortpassword/shortpassword.scss b/src/packages/shortpassword/shortpassword.scss
index 8003ff02d0..1af54b6f35 100644
--- a/src/packages/shortpassword/shortpassword.scss
+++ b/src/packages/shortpassword/shortpassword.scss
@@ -2,8 +2,8 @@
 
 .nut-shortpassword {
   &-popup {
-    padding: scale-px(32px) scale-px(24px) scale-px(28px) scale-px(24px);
-    border-radius: scale-px(12px);
+    padding: 32px 24px 28px 24px;
+    border-radius: 12px;
     text-align: center;
   }
 
@@ -18,15 +18,15 @@
   &-description {
     display: flex;
     justify-content: center;
-    margin-top: scale-px(12px);
-    margin-bottom: scale-px(24px);
+    margin-top: 12px;
+    margin-bottom: 24px;
     line-height: $font-size-s;
     font-size: $font-size-s;
     color: $color-text;
   }
 
   &-input {
-    padding: 0 0 scale-px(10px);
+    padding: 0 0 10px;
     text-align: center;
     position: relative;
     overflow: hidden;
@@ -34,8 +34,8 @@
     &-real {
       position: absolute;
       right: 0;
-      width: scale-px(247px);
-      height: scale-px(41px);
+      width: 247px;
+      height: 41px;
       outline: 0 none;
       border: 0;
       text-decoration: none;
@@ -43,20 +43,20 @@
     }
 
     &-site {
-      width: scale-px(247px);
-      height: scale-px(41px);
-      border-radius: scale-px(4px);
+      width: 247px;
+      height: 41px;
+      border-radius: 4px;
     }
 
     &-fake {
       top: 5%;
       width: 100%;
-      height: scale-px(41px);
+      height: 41px;
       margin: 0 auto;
       box-sizing: border-box;
       background: $shortpassword-background-color;
-      border-radius: scale-px(4px);
-      border: scale-px(1px) solid $shortpassword-border-color;
+      border-radius: 4px;
+      border: 1px solid $shortpassword-border-color;
       display: flex;
       position: absolute;
       left: 0;
@@ -68,8 +68,8 @@
         align-items: center;
 
         &-icon {
-          height: scale-px(6px);
-          width: scale-px(6px);
+          height: 6px;
+          width: 6px;
           border-radius: 50%;
           background: #000;
           display: inline-block;
@@ -79,10 +79,10 @@
   }
 
   &-message {
-    margin-top: scale-px(9px);
+    margin-top: 9px;
     display: flex;
     justify-content: space-between;
-    width: scale-px(247px);
+    width: 247px;
 
     &-error {
       line-height: $font-size-xs;
@@ -98,7 +98,7 @@
       align-items: center;
 
       .nut-icon {
-        margin-right: scale-px(3px);
+        margin-right: 3px;
       }
     }
   }
@@ -106,13 +106,13 @@
   &-footer {
     display: flex;
     justify-content: space-between;
-    margin-top: scale-px(20px);
+    margin-top: 20px;
 
     &-cancel {
       background: $white;
-      border: scale-px(1px) solid $color-primary;
-      border-radius: scale-px(15px);
-      padding: scale-px(8px) scale-px(38px);
+      border: 1px solid $color-primary;
+      border-radius: 15px;
+      padding: 8px 38px;
       line-height: $font-size-base;
       font-size: $font-size-base;
       color: $color-primary;
@@ -124,8 +124,8 @@
         $color-primary 0%,
         $color-primary-stop-2 100%
       );
-      border-radius: scale-px(15px);
-      padding: scale-px(8px) scale-px(38px);
+      border-radius: 15px;
+      padding: 8px 38px;
       line-height: $font-size-base;
       font-size: $font-size-base;
       color: $color-primary-text;
diff --git a/src/packages/skeleton/skeleton.scss b/src/packages/skeleton/skeleton.scss
index 2f0293501a..d0d5c6956d 100644
--- a/src/packages/skeleton/skeleton.scss
+++ b/src/packages/skeleton/skeleton.scss
@@ -25,7 +25,7 @@
 
     &-small {
       height: $skeleton-line-small-height;
-      margin-top: scale-px(8px);
+      margin-top: 8px;
     }
     &-small-0 {
       margin-top: 0;
diff --git a/src/packages/space/space.scss b/src/packages/space/space.scss
index 9fba1b8b6b..9203872639 100644
--- a/src/packages/space/space.scss
+++ b/src/packages/space/space.scss
@@ -30,7 +30,7 @@
 
     &-wrap {
       flex-wrap: wrap;
-      margin-bottom: calc(#{$space-gap} * -1);
+      margin-bottom: calc($space-gap * -1);
 
       &-item {
         padding-bottom: $space-gap;
diff --git a/src/packages/step/step.scss b/src/packages/step/step.scss
index 0877ed6e9c..f8b782772f 100644
--- a/src/packages/step/step.scss
+++ b/src/packages/step/step.scss
@@ -86,16 +86,16 @@
   }
 
   &-title {
-    height: scale-px(14px);
-    line-height: scale-px(14px);
+    height: 14px;
+    line-height: 14px;
     font-size: $steps-base-title-font-size;
     color: $steps-base-title-color;
     white-space: nowrap;
   }
 
   &-description {
-    height: scale-px(16px);
-    line-height: scale-px(16px);
+    height: 16px;
+    line-height: 16px;
     margin-top: $steps-base-description-margin-top;
     font-size: $steps-base-description-font-size;
     color: $steps-base-description-color;
diff --git a/src/packages/steps/steps.scss b/src/packages/steps/steps.scss
index e00e62aa5a..4dea2eb1e2 100644
--- a/src/packages/steps/steps.scss
+++ b/src/packages/steps/steps.scss
@@ -74,7 +74,7 @@
 
         &-title,
         &-description {
-          padding-left: scale-px(4px);
+          padding-left: 4px;
         }
 
         &-special {
@@ -85,7 +85,7 @@
           }
 
           .nut-step-title {
-            padding-right: scale-px(8px);
+            padding-right: 8px;
             /* #ifndef dynamic*/
             width: fit-content;
             /* #endif */
@@ -131,7 +131,7 @@
 
         &-head {
           justify-content: center;
-          margin-bottom: scale-px(5px);
+          margin-bottom: 5px;
 
           &-dot-wrap,
           &-icon-wrap,
@@ -158,7 +158,7 @@
 
         &-title {
           height: auto;
-          line-height: scale-px(20px);
+          line-height: 20px;
           white-space: normal;
           overflow-wrap: break-word;
           text-align: center;
@@ -210,8 +210,8 @@
       }
 
       &-line {
-        height: calc(100% - scale-px(4px));
-        width: scale-px(1px);
+        height: calc(100% - 4px);
+        width: 1px;
         bottom: 0;
 
         &-inner {
@@ -222,7 +222,7 @@
       &-head {
         align-items: center;
         justify-content: center;
-        height: scale-px(20px);
+        height: 20px;
 
         &-icon {
           width: $steps-vertical-head-icon-size;
@@ -239,7 +239,7 @@
         flex: 1;
         min-width: 0;
         height: auto;
-        margin-left: scale-px(8px);
+        margin-left: 8px;
       }
 
       &-title {
@@ -276,23 +276,23 @@
       }
 
       &-head-dot-wrap {
-        height: calc($steps-base-head-dot-size + scale-px(8px));
+        height: calc($steps-base-head-dot-size + 8px);
       }
 
       &-head-icon-wrap {
-        height: calc($steps-vertical-head-icon-size + scale-px(8px));
+        height: calc($steps-vertical-head-icon-size + 8px);
       }
 
       &-head-text-wrap {
-        height: calc($steps-base-head-text-size + scale-px(8px));
+        height: calc($steps-base-head-text-size + 8px);
       }
     }
 
     &-icon {
       .nut-step {
         &-head {
-          width: calc($steps-vertical-head-icon-size + scale-px(1px));
-          min-width: calc($steps-vertical-head-icon-size + scale-px(1px));
+          width: calc($steps-vertical-head-icon-size + 1px);
+          min-width: calc($steps-vertical-head-icon-size + 1px);
         }
 
         &-line {
@@ -304,7 +304,7 @@
     &-dot {
       .nut-step {
         &-head {
-          width: calc($steps-base-head-dot-size + scale-px(1px));
+          width: calc($steps-base-head-dot-size + 1px);
         }
 
         &-line {
@@ -316,8 +316,8 @@
     &-text {
       .nut-step {
         &-head {
-          width: calc($steps-base-head-text-size + scale-px(1px));
-          min-width: calc($steps-base-head-text-size + scale-px(1px));
+          width: calc($steps-base-head-text-size + 1px);
+          min-width: calc($steps-base-head-text-size + 1px);
         }
 
         &-line {
diff --git a/src/packages/swiper/swiper.scss b/src/packages/swiper/swiper.scss
index 8c9318d3eb..67223cacbf 100644
--- a/src/packages/swiper/swiper.scss
+++ b/src/packages/swiper/swiper.scss
@@ -19,17 +19,17 @@
     flex-direction: row;
     justify-content: center;
     position: absolute;
-    height: scale-px(4px);
+    height: 4px;
     width: 100%;
     top: 89.33%;
     z-index: 10;
   }
 
   &-indicator-vertical {
-    width: scale-px(8px);
+    width: 8px;
     height: 100%;
     top: 0;
-    left: scale-px(12px);
+    left: 12px;
     flex-direction: column;
     justify-content: center;
     z-index: 1;
@@ -68,6 +68,6 @@
 
   &-indicator-vertical {
     left: auto;
-    right: scale-px(12px);
+    right: 12px;
   }
 }
diff --git a/src/packages/switch/switch.scss b/src/packages/switch/switch.scss
index be66d0cfad..0aeb1201d3 100644
--- a/src/packages/switch/switch.scss
+++ b/src/packages/switch/switch.scss
@@ -56,9 +56,9 @@
     background-color: $switch-inactive-background-color;
     &-line {
       width: calc(($switch-height - $switch-border-width * 2) / 2);
-      height: scale-px(2px);
+      height: 2px;
       background: $switch-inactive-line-background-color;
-      border-radius: scale-px(2px);
+      border-radius: 2px;
     }
   }
 
@@ -78,20 +78,16 @@
       color: $switch-label-text-color;
     }
     &-open {
-      margin: 0 calc($switch-height - $switch-border-width + scale-px(3px)) 0
-        scale-px(7px);
+      margin: 0 ($switch-height - $switch-border-width + 3px) 0 7px;
       &-rtl {
-        margin: 0 scale-px(7px) 0
-          calc($switch-height - $switch-border-width + scale-px(3px));
+        margin: 0 7px 0 ($switch-height - $switch-border-width + 3px);
       }
     }
 
     &-close {
-      margin: 0 scale-px(7px) 0
-        calc($switch-height - $switch-border-width + scale-px(3px));
+      margin: 0 7px 0 ($switch-height - $switch-border-width + 3px);
       &-rtl {
-        margin: 0 calc($switch-height - $switch-border-width + scale-px(3px)) 0
-          scale-px(7px);
+        margin: 0 ($switch-height - $switch-border-width + 3px) 0 7px;
       }
     }
 
diff --git a/src/packages/tabbar/tabbar.scss b/src/packages/tabbar/tabbar.scss
index ace561058c..193c5d204d 100644
--- a/src/packages/tabbar/tabbar.scss
+++ b/src/packages/tabbar/tabbar.scss
@@ -13,11 +13,11 @@
     display: flex;
 
     &-3 {
-      padding: 0 scale-px(16px);
+      padding: 0 16px;
     }
 
     &-2 {
-      padding: 0 scale-px(32px);
+      padding: 0 32px;
     }
 
     &-horizontal {
@@ -26,11 +26,11 @@
         flex-direction: row;
         justify-content: center;
         .nut-icon {
-          width: scale-px(20px);
-          height: scale-px(20px);
+          width: 20px;
+          height: 20px;
         }
         .nut-tabbar-item-text {
-          margin: 0 scale-px(4px) 0 scale-px(6px);
+          margin: 0 4px 0 6px;
           font-size: $font-size-base;
         }
         .nut-badge-sup {
diff --git a/src/packages/tabbaritem/tabbaritem.scss b/src/packages/tabbaritem/tabbaritem.scss
index fc20e64d0e..40acfe77ab 100644
--- a/src/packages/tabbaritem/tabbaritem.scss
+++ b/src/packages/tabbaritem/tabbaritem.scss
@@ -5,13 +5,13 @@
   flex-direction: column;
   align-items: center;
   flex: 1;
-  padding: scale-px(6px) 0 scale-px(2px);
+  padding: 6px 0 2px;
   color: $tabbar-inactive-color;
   height: 100%;
 
   .nut-icon {
-    width: scale-px(24px);
-    height: scale-px(24px);
+    width: 24px;
+    height: 24px;
     font-size: $font-size-xxl;
     /* #ifdef harmony dynamic*/
     color: $tabbar-inactive-color;
@@ -31,9 +31,9 @@
 
   .nut-image {
     &-default {
-      width: scale-px(38px);
-      height: scale-px(38px);
-      border-radius: scale-px(38px);
+      width: 38px;
+      height: 38px;
+      border-radius: 38px;
     }
   }
 
diff --git a/src/packages/table/table.scss b/src/packages/table/table.scss
index 4d2cd82e81..5391b1a82a 100644
--- a/src/packages/table/table.scss
+++ b/src/packages/table/table.scss
@@ -12,7 +12,7 @@
     overflow-y: auto;
     overflow-x: hidden;
     position: relative;
-    border: scale-px(1px) solid $table-border-color;
+    border: 1px solid $table-border-color;
 
     &-sticky {
       overflow-x: auto;
@@ -101,15 +101,15 @@
 
           &-nodata {
             display: flex;
-            height: scale-px(50px);
+            height: 50px;
             align-items: center;
             justify-content: center;
           }
         }
 
         &-border {
-          border-right: scale-px(1px) solid $table-border-color;
-          border-bottom: scale-px(1px) solid $table-border-color;
+          border-right: 1px solid $table-border-color;
+          border-bottom: 1px solid $table-border-color;
         }
 
         &-alignleft,
@@ -144,8 +144,8 @@
   &-sticky-right {
     position: absolute;
     top: 0px;
-    width: scale-px(8px);
-    bottom: scale-px(-1px);
+    width: 8px;
+    bottom: -1px;
     overflow-x: hidden;
     overflow-y: hidden;
     box-shadow: none;
@@ -156,12 +156,12 @@
   }
 
   &-sticky-left {
-    left: scale-px(1px);
+    left: 1px;
     box-shadow: $table-sticky-left-shadow;
   }
 
   &-sticky-right {
-    right: scale-px(1px);
+    right: 1px;
     box-shadow: $table-sticky-right-shadow;
   }
 
@@ -186,7 +186,7 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    height: scale-px(30px);
+    height: 30px;
     padding: $table-cols-padding;
     position: relative;
     z-index: 5;
@@ -215,7 +215,7 @@
 
         &-border {
           border-right: none;
-          border-left: scale-px(1px) solid $table-border-color;
+          border-left: 1px solid $table-border-color;
         }
 
         &-alignleft,
@@ -232,13 +232,13 @@
 
   &-sticky-left {
     left: auto;
-    right: scale-px(1px);
+    right: 1px;
     box-shadow: $table-sticky-right-shadow;
   }
 
   &-sticky-right {
     right: auto;
-    left: scale-px(1px);
+    left: 1px;
     box-shadow: $table-sticky-left-shadow;
   }
   &-fixed-left-last {
diff --git a/src/packages/tabs/tabs.scss b/src/packages/tabs/tabs.scss
index 6fe817bc63..9aa1bd101a 100644
--- a/src/packages/tabs/tabs.scss
+++ b/src/packages/tabs/tabs.scss
@@ -34,14 +34,14 @@
   &-left {
     justify-content: flex-start;
     .nut-tabs-titles-item {
-      padding: 0 scale-px(22px);
+      padding: 0 22px;
     }
   }
 
   &-right {
     justify-content: flex-end;
     .nut-tabs-titles-item {
-      padding: 0 scale-px(22px);
+      padding: 0 22px;
     }
   }
 
@@ -123,8 +123,8 @@
         /* #ifndef dynamic*/
         overflow: unset;
         /* #endif */
-        width: scale-px(40px);
-        height: scale-px(20px);
+        width: 40px;
+        height: 20px;
 
         .nut-icon {
           color: $tabs-titles-item-active-color;
@@ -167,14 +167,14 @@
 
   &-button {
     .nut-tabs-titles-item {
-      padding: 0 scale-px(10px);
+      padding: 0 10px;
       .nut-tabs-titles-item-text {
         flex: 1;
-        height: scale-px(28px);
+        height: 28px;
         display: flex;
         align-items: center;
         justify-content: center;
-        padding: 0 scale-px(8px);
+        padding: 0 8px;
       }
     }
     .nut-tabs-titles-item-active {
@@ -190,7 +190,7 @@
   }
 
   &-divider {
-    border-bottom: scale-px(1px) solid $color-border;
+    border-bottom: 1px solid $color-border;
 
     .nut-tabs-titles-item {
       position: relative;
@@ -201,7 +201,7 @@
         right: 0;
         top: 50%;
         height: 50%;
-        width: scale-px(1px);
+        width: 1px;
         background: $color-border;
         transform: translateY(-50%);
       }
@@ -219,12 +219,12 @@
   .nut-tabs-ellipsis {
     white-space: break-spaces;
     /* #ifdef harmony dynamic*/
-    padding-left: scale-px(12px);
+    padding-left: 12px;
     /* #endif */
     /* #ifndef harmony dynamic*/
-    padding-left: scale-px(6px);
+    padding-left: 6px;
     /* #endif */
-    width: scale-px(90px);
+    width: 90px;
     line-height: $font-size-base;
   }
 
@@ -260,14 +260,14 @@
     &-active {
       background-color: $tabs-titles-item-active-background-color;
       .nut-tabs-titles-item-line {
-        left: scale-px(10px);
+        left: 10px;
         width: $tabs-vertical-tab-line-width;
         height: $tabs-vertical-tab-line-height;
         background: $tabs-vertical-tab-line-color;
       }
 
       .nut-tabs-titles-item-smile {
-        right: scale-px(-12px);
+        right: -12px;
         bottom: -2%;
         left: auto;
         transform: rotate(320deg);
@@ -306,7 +306,7 @@
       .nut-tabs-titles-item-smile {
         left: 50%;
         right: auto;
-        bottom: scale-px(-3px);
+        bottom: -3px;
         transform: translate(-50%, 0) rotate(0deg);
       }
     }
@@ -361,7 +361,7 @@
     &-line {
       .nut-tabs-titles-item {
         padding-left: 0;
-        padding-right: scale-px(14px);
+        padding-right: 14px;
       }
     }
   }
@@ -370,11 +370,11 @@
     &-active {
       .nut-tabs-titles-item-line {
         left: auto;
-        right: scale-px(10px);
+        right: 10px;
       }
 
       .nut-tabs-titles-item-smile {
-        left: scale-px(-12px);
+        left: -12px;
         right: auto;
         transform: rotate(-320deg);
       }
diff --git a/src/packages/tag/tag.scss b/src/packages/tag/tag.scss
index 7d1494c819..1aed907217 100644
--- a/src/packages/tag/tag.scss
+++ b/src/packages/tag/tag.scss
@@ -12,7 +12,7 @@
 
   .nut-icon {
     vertical-align: middle;
-    margin-left: scale-px(4px);
+    margin-left: 4px;
     color: $tag-color;
   }
 
@@ -72,7 +72,7 @@
     justify-content: center;
     font-size: $tag-font-size;
     color: $tag-color;
-    margin-left: scale-px(4px);
+    margin-left: 4px;
   }
 
   &-plain {
@@ -90,6 +90,6 @@
 .nut-rtl .nut-tag {
   .nut-icon {
     margin-left: 0;
-    margin-right: scale-px(4px);
+    margin-right: 4px;
   }
 }
diff --git a/src/packages/textarea/textarea.scss b/src/packages/textarea/textarea.scss
index b8a7866dbb..ed09b1816a 100644
--- a/src/packages/textarea/textarea.scss
+++ b/src/packages/textarea/textarea.scss
@@ -13,7 +13,7 @@
   }
 
   &-error {
-    border: scale-px(0.5px) solid $color-danger;
+    border: 0.5px solid $color-danger;
     background-color: $color-danger-light;
   }
 
@@ -34,7 +34,7 @@
     display: block;
     box-sizing: border-box;
     width: 100%;
-    height: scale-px(40px);
+    height: 40px;
     min-width: 0;
     margin: 0;
     padding: 0;
@@ -49,10 +49,10 @@
     // &::after{
     //   content: '';
     //   position: absolute;
-    //   width: scale-px(2px);
-    //   height: scale-px(14px);
+    //   width: 2px;
+    //   height: 14px;
     //   background-color: red;
-    //   // left: scale-px(10px);
+    //   // left: 10px;
     //   // top: 50%;
     //   transform: translateY(-50%);
     //   z-index: 1;
@@ -87,7 +87,7 @@
   &.nut-textarea-rtl {
     &-limit {
       right: auto;
-      left: scale-px(15px);
+      left: 15px;
     }
   }
 }
diff --git a/src/packages/timedetail/timedetail.scss b/src/packages/timedetail/timedetail.scss
index fe7c71715b..71df61245b 100644
--- a/src/packages/timedetail/timedetail.scss
+++ b/src/packages/timedetail/timedetail.scss
@@ -4,7 +4,7 @@
   flex: 1;
   min-width: 0;
   flex-wrap: wrap;
-  padding: 0 0 scale-px(50px) scale-px(12px);
+  padding: 0 0 50px 12px;
 
   &-item {
     width: $timeselect-time-width;
@@ -13,13 +13,13 @@
     text-align: center;
     margin: $timeselect-time-margin;
     background: $timeselect-time-background;
-    border-radius: scale-px(5px);
+    border-radius: 5px;
     font-size: $font-size-base;
-    border: scale-px(1px) solid transparent;
+    border: 1px solid transparent;
 
     &.active {
       background-color: $color-primary-light-pressed;
-      border: scale-px(1px) solid $color-primary;
+      border: 1px solid $color-primary;
       color: $color-primary;
       font-weight: $font-weight-bold;
     }
@@ -28,5 +28,5 @@
 
 [dir='rtl'] .nut-timedetail,
 .nut-rtl .nut-timedetail {
-  padding: 0 scale-px(12px) scale-px(50px) 0;
+  padding: 0 12px 50px 0;
 }
diff --git a/src/packages/timeselect/timeselect.scss b/src/packages/timeselect/timeselect.scss
index fa8552ff76..4cb47454eb 100644
--- a/src/packages/timeselect/timeselect.scss
+++ b/src/packages/timeselect/timeselect.scss
@@ -5,7 +5,7 @@
   background-color: $color-background-overlay;
   display: flex;
   flex-direction: column;
-  height: calc(100% - scale-px(50px));
+  height: calc(100% - 50px);
 
   &-content {
     display: flex;
@@ -24,7 +24,7 @@
 }
 
 .nut-timepannel {
-  padding: 0 scale-px(16px);
+  padding: 0 16px;
   height: $timeselect-date-height;
   line-height: $timeselect-date-height;
   text-align: start;
diff --git a/src/packages/toast/toast.scss b/src/packages/toast/toast.scss
index fd60fff802..05e9364d10 100644
--- a/src/packages/toast/toast.scss
+++ b/src/packages/toast/toast.scss
@@ -44,9 +44,9 @@
     flex-direction: column;
     justify-content: center;
     align-items: center;
-    min-width: scale-px(96px);
+    min-width: 96px;
     max-width: 60%;
-    // max-width: scale-px(224px);
+    // max-width: 224px;
     box-sizing: border-box;
     font-size: $toast-text-font-size;
     text-align: $toast-inner-text-align;
@@ -58,7 +58,7 @@
 
     &-descrption {
       max-width: 68.2%;
-      // max-width: scale-px(256px);
+      // max-width: 256px;
     }
 
     &-normal {
@@ -95,7 +95,7 @@
   &-text {
     color: #ffffff;
     text-align: $toast-inner-text-align;
-    line-height: scale-px(20px);
+    line-height: 20px;
     /* #ifdef harmony dynamic*/
     line-height: normal;
     /* #endif */
@@ -107,15 +107,15 @@
     font-size: $toast-title-font-size;
     font-weight: 600;
     text-align: $toast-inner-text-align;
-    line-height: scale-px(22px);
+    line-height: 22px;
     /* #ifdef harmony dynamic*/
     line-height: normal;
     /* #endif */
   }
 
   .nut-icon {
-    width: scale-px(24px);
-    height: scale-px(24px);
+    width: 24px;
+    height: 24px;
     color: #ffffff;
   }
 
@@ -124,12 +124,12 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    margin: scale-px(3px) 0 scale-px(5px);
+    margin: 3px 0 5px;
     color: #ffffff;
 
     &-icon {
-      width: scale-px(24px);
-      height: scale-px(24px);
+      width: 24px;
+      height: 24px;
     }
   }
 
diff --git a/src/packages/tour/tour.scss b/src/packages/tour/tour.scss
index 1566e018c1..5b81ad72bb 100644
--- a/src/packages/tour/tour.scss
+++ b/src/packages/tour/tour.scss
@@ -29,8 +29,8 @@
       text-align: end;
 
       &-close {
-        width: scale-px(10px);
-        height: scale-px(10px);
+        width: 10px;
+        height: 10px;
       }
     }
 
@@ -51,7 +51,7 @@
 
         &-btn {
           display: inline-block;
-          border: scale-px(1px) solid $color-text-disabled;
+          border: 1px solid $color-text-disabled;
           margin-left: $tour-content-bottom-btn-margin-left;
           padding: $tour-content-bottom-btn-padding;
           font-size: $tour-content-bottom-btn-font-size;
diff --git a/src/packages/uploader/uploader.scss b/src/packages/uploader/uploader.scss
index 372e69fb98..6c9a4097cf 100644
--- a/src/packages/uploader/uploader.scss
+++ b/src/packages/uploader/uploader.scss
@@ -73,7 +73,7 @@
     margin-right: $uploader-preview-margin-right;
     margin-bottom: $uploader-preview-margin-bottom;
     border-radius: $uploader-image-border-radius;
-    box-shadow: 0 scale-px(2px) scale-px(10px) 0 rgb(0 0 0 / 10%);
+    box-shadow: 0 2px 10px 0 rgb(0 0 0 / 10%);
 
     &-progress {
       position: absolute;
@@ -103,26 +103,26 @@
       width: 100%;
       margin-right: 0px;
       margin-bottom: 0px;
-      margin-top: scale-px(10px);
-      box-shadow: 0 scale-px(2px) scale-px(10px) 0 rgb(0 0 0 / 1%);
+      margin-top: 10px;
+      box-shadow: 0 2px 10px 0 rgb(0 0 0 / 1%);
     }
 
     &-list {
       width: 100%;
-      height: scale-px(32px);
+      height: 32px;
       box-sizing: border-box;
       display: flex;
       align-items: center;
       justify-content: space-between;
-      padding: 0 scale-px(10px);
+      padding: 0 10px;
       background-color: $color-background-sunken;
 
       .nut-uploader-preview-img-file-name {
         display: flex;
         align-items: center;
         -webkit-line-clamp: 1;
-        padding: scale-px(2px);
-        height: scale-px(24px);
+        padding: 2px;
+        height: 24px;
         @include text-ellipsis();
       }
 
@@ -133,7 +133,7 @@
         bottom: 0;
 
         .nut-progress-outer {
-          height: scale-px(2px) !important;
+          height: 2px !important;
         }
       }
     }
diff --git a/src/packages/virtuallist/virtuallist.scss b/src/packages/virtuallist/virtuallist.scss
index 818dfc7c55..366747e30e 100644
--- a/src/packages/virtuallist/virtuallist.scss
+++ b/src/packages/virtuallist/virtuallist.scss
@@ -6,8 +6,8 @@
     float: left;
     color: $color-title;
     background: $color-background-overlay;
-    padding: scale-px(10px);
-    margin-right: scale-px(20px);
+    padding: 10px;
+    margin-right: 20px;
   }
 
   &:after {
@@ -23,12 +23,12 @@
     display: block;
     color: $color-title;
     background: $color-background-overlay;
-    border-radius: scale-px(7px);
-    box-shadow: 0 scale-px(1px) scale-px(6px) 0 rgba(237, 238, 241, 1);
-    margin-top: scale-px(20px);
-    padding: scale-px(14px) scale-px(15px);
+    border-radius: 7px;
+    box-shadow: 0 1px 6px 0 rgba(237, 238, 241, 1);
+    margin-top: 20px;
+    padding: 14px 15px;
     font-size: scale-font-px(13px);
-    line-height: scale-px(18px);
+    line-height: 18px;
     font-family: PingFangSC;
     font-weight: 500;
   }
@@ -74,6 +74,6 @@
   li {
     float: right;
     margin-right: 0;
-    margin-left: scale-px(20px);
+    margin-left: 20px;
   }
 }

From f3e2b10e787f1b8c8500f5d3bb7a718afa5f427d Mon Sep 17 00:00:00 2001
From: songchenglin3 <353833373@qq.com>
Date: Tue, 12 May 2026 14:40:04 +0800
Subject: [PATCH 12/18] =?UTF-8?q?chore:=20=E8=BF=98=E5=8E=9F=E9=83=A8?=
 =?UTF-8?q?=E5=88=86=E6=94=B9=E5=8A=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../nutui-proportional-scaling/SKILL.md       | 17 +++++++++++--
 .../avatarcropper/avatarcropper.taro.tsx      |  7 +++---
 src/packages/button/button.taro.tsx           |  5 +++-
 src/packages/checkbox/checkbox.scss           |  2 +-
 src/packages/fixednav/fixednav.scss           |  6 ++---
 src/packages/lottie/lottiemp.taro.tsx         | 24 ++++++++++---------
 src/packages/overlay/overlay.tsx              |  6 +++++
 src/packages/popover/popover.taro.tsx         |  2 +-
 src/packages/rate/rate.taro.tsx               | 11 ++++-----
 src/packages/switch/switch.scss               |  8 +++----
 10 files changed, 55 insertions(+), 33 deletions(-)

diff --git a/.cursor/skills/nutui-proportional-scaling/SKILL.md b/.cursor/skills/nutui-proportional-scaling/SKILL.md
index 5dc70d374e..a38cdedd6a 100644
--- a/.cursor/skills/nutui-proportional-scaling/SKILL.md
+++ b/.cursor/skills/nutui-proportional-scaling/SKILL.md
@@ -8,7 +8,9 @@ description: >-
   scripts/px-to-scale-px-in-component-scss.cjs on component SCSS in memory; profiles standard / large / elderly;
   commit-backed rules e.g. never scale 0px. Use when implementing 多尺寸适配,
   等比适配, 大字版, 老年版, scale-px, viewport or native bridge scaling, or
-  editing component SCSS for resize.
+  editing component SCSS for resize; SCSS: prefer calc($token + Npx) over
+  #{} in calc, use outer calc() when mixing tokens that compile to
+  var(--nutui-*).
 ---
 
 # NutUI React 等比适配
@@ -51,8 +53,9 @@ description: >-
 
 ### 2.1 `npm run build` / `npm run build:taro` 时的 px → `scale-px`
 
-- 与 `package.json` 中顺序一致：先跑 **`scripts/replace-css-var.js`**，再 **`scripts/build.mjs`** 或 **`scripts/build-taro.mjs`**；上述脚本在读取 **`src/packages/**/\*.scss`（不含 demo）** 后，会经 **`scripts/px-to-scale-px-in-component-scss.cjs`** 在**内存**里把声明值中的裸 **`Npx`** 转为 **`scale-px(Npx)`**（规则见 §3），**不写回\*\*仓库文件。
+- 与 `package.json` 中顺序一致：先跑 **`scripts/replace-css-var.js`**，再 **`scripts/build.mjs`** 或 **`scripts/build-taro.mjs`**；上述脚本在读取 **`src/packages/**/\*.scss`（不含 demo）** 后，会经 **`scripts/px-to-scale-px-in-component-scss.cjs`** 在**内存**里把声明值中的裸 **`Npx`** 转为 **`scale-px(Npx)`**（规则见 §3），**不写回\*\*仓库里的组件 SCSS。
 - 源码里可继续手写 **`scale-px` / `scale-font-px` / `scale-icon-px`**；构建不会重复嵌套 `scale-px`。
+- 该脚本对 **`calc(...)` 体内同时含 `$` 与 `/`** 的整段先做占位再替换裸 `px`，避免 postcss-scss 把 **`calc($var / 2)`** 等拆坏；其它 `calc` 内的裸 `Npx` 仍会按规则转为 `scale-px`。
 
 ---
 
@@ -76,6 +79,14 @@ description: >-
 - 图标占位：**`scale-icon-px`** 或已有 `--nut-icon-*`。
 - 保持与 **无障碍/大屏** 相关提交协同：同一文件改尺度时，勿回退 `dialog` 等对大字兼容的改动。
 
+### 3.4 `calc()`、Sass 变量与 `#{}`（与 `variables.scss` / 主题 token 一致）
+
+- **推荐**：在 `calc()` 里直接写 Sass 变量，如 **`calc($steps-vertical-head-icon-size + 1px)`**、**`calc($rate-item-margin / 2)`**，而不是 **`calc(#{$steps-vertical-head-icon-size} + 1px)`**。`#{}` 只在需要把值**硬插成无引号 CSS 片段**、或要避免 Sass 对单位做提前合并时再考虑；普通设计 token 用 **`$var` 作为 `calc` 的操作数**即可。
+- **与 `var(--nutui-*)` 一起运算时**：许多 token 会展开为 **`var(--nutui-…, calc(Npx * var(--nut-scale-f, 1)))`**。此时**不要**指望纯 Sass 括号在声明值里做「减法 + 固定 px」，例如  
+  **`margin: 0 ($switch-height - $switch-border-width + 3px) 0 7px`**  
+  会在编译结果里拼成 **`var(...)var(...)`** 一类**缺少运算符**的非法片段。应写成 **`margin: 0 calc($switch-height - $switch-border-width + 3px) 0 7px`**，让整条长度在**一个** CSS `calc()` 里由浏览器解析。
+- **`100%` 与长度相减**：用 **`calc(100% - Npx)`** 一层即可，避免出现 **`100% - calc(...)`** 这类单位不合法的组合（历史上有过 postcss / 手工替换导致的损坏，以当前组件 SCSS 为准）。
+
 ---
 
 ## 4. 业务接入清单
@@ -91,6 +102,8 @@ description: >-
 
 - [ ] 新增 **0** 尺寸未误用 `scale-px(0px)`。
 - [ ] 字体/图标是否应走 **`scale-font-px` / `scale-icon-px`** 而非误用 `scale-px`。
+- [ ] 含 **`$token` 与裸 `px` 的混合运算**：若 token 会变成 **`var(--nutui-*)`**，是否已用 **`calc($a - $b + Npx)`**，而不是 **`($a - $b + Npx)`** 写在 `margin` / `width` 等非纯编译期长度位置。
+- [ ] `calc()` 内对设计 token 是否优先 **`calc($var + 1px)`**，避免无必要的 **`#{}`**。
 - [ ] TS 侧改 `scale-f*` 已同步考虑 **Taro** 文件。
 - [ ] 修改 `formatScaleValue` / 断点时，已通读 **视口与平板常量** 是否仍与文档、设计一致。
 
diff --git a/src/packages/avatarcropper/avatarcropper.taro.tsx b/src/packages/avatarcropper/avatarcropper.taro.tsx
index f227f259b2..7cf57ef785 100644
--- a/src/packages/avatarcropper/avatarcropper.taro.tsx
+++ b/src/packages/avatarcropper/avatarcropper.taro.tsx
@@ -4,9 +4,8 @@ import React, {
   useMemo,
   useCallback,
   FunctionComponent,
-  useLayoutEffect,
 } from 'react'
-import Taro, { createSelectorQuery } from '@tarojs/taro'
+import Taro, { useReady, createSelectorQuery } from '@tarojs/taro'
 import classNames from 'classnames'
 import { Canvas, CommonEventFunction, View } from '@tarojs/components'
 import { getWindowInfo } from '@/utils/taro/get-system-info'
@@ -138,7 +137,7 @@ export const AvatarCropper: FunctionComponent<
     cropperCanvasContext: null,
   })
 
-  useLayoutEffect(() => {
+  useReady(() => {
     if (showAlipayCanvas2D) {
       const { canvasId } = canvasAll
       createSelectorQuery()
@@ -150,7 +149,7 @@ export const AvatarCropper: FunctionComponent<
         })
         .exec()
     }
-  }, [showAlipayCanvas2D, state.displayHeight, state.displayWidth])
+  })
 
   useEffect(() => {
     setCanvasAll({
diff --git a/src/packages/button/button.taro.tsx b/src/packages/button/button.taro.tsx
index 8bb4286f94..13e2ed6083 100644
--- a/src/packages/button/button.taro.tsx
+++ b/src/packages/button/button.taro.tsx
@@ -1,7 +1,10 @@
 import React, { CSSProperties, useCallback, useMemo } from 'react'
 import type { MouseEvent } from 'react'
 import classNames from 'classnames'
-import { View } from '@tarojs/components'
+import {
+  View,
+  // Button as TaroButton,
+} from '@tarojs/components'
 import { Loading } from '@nutui/icons-react-taro'
 import { ComponentDefaults } from '@/utils/typings'
 import { harmony } from '@/utils/taro/platform'
diff --git a/src/packages/checkbox/checkbox.scss b/src/packages/checkbox/checkbox.scss
index d284ce3c22..63db06585e 100644
--- a/src/packages/checkbox/checkbox.scss
+++ b/src/packages/checkbox/checkbox.scss
@@ -117,7 +117,7 @@
       height: 12px;
       position: absolute;
       color: $white;
-      right: 0px;
+      right: 0;
       bottom: 0;
       transform: translate(-1px, -2px);
     }
diff --git a/src/packages/fixednav/fixednav.scss b/src/packages/fixednav/fixednav.scss
index 0e3a5dc40e..ce1b9300d4 100644
--- a/src/packages/fixednav/fixednav.scss
+++ b/src/packages/fixednav/fixednav.scss
@@ -89,7 +89,7 @@
     right: 0;
     .nut-fixednav-btn {
       right: 0;
-      border-radius: 45px 0 0 45px;
+      border-radius: 45px 0px 0px 45px;
       .nut-icon {
         margin-right: 5px;
         transform: rotate(0deg);
@@ -98,7 +98,7 @@
     .nut-fixednav-list {
       right: 0;
       transform: translateX(100%);
-      border-radius: 25px 0 0 25px;
+      border-radius: 25px 0px 0px 25px;
       padding: {
         left: 20px;
         right: 80px;
@@ -121,7 +121,7 @@
     .nut-fixednav-list {
       transform: translateX(-100%);
       left: 0;
-      border-radius: 0 25px 25px 0;
+      border-radius: 0px 25px 25px 0px;
       padding: {
         left: 80px;
         right: 20px;
diff --git a/src/packages/lottie/lottiemp.taro.tsx b/src/packages/lottie/lottiemp.taro.tsx
index 82790d79e8..3ea6ff1a87 100644
--- a/src/packages/lottie/lottiemp.taro.tsx
+++ b/src/packages/lottie/lottiemp.taro.tsx
@@ -1,5 +1,5 @@
-import React, { useImperativeHandle, useLayoutEffect, useRef } from 'react'
-import { createSelectorQuery, getEnv, useUnload } from '@tarojs/taro'
+import React, { useImperativeHandle, useRef } from 'react'
+import { createSelectorQuery, getEnv, useReady, useUnload } from '@tarojs/taro'
 import lottie from '@nutui/lottie-miniprogram'
 import { getWindowInfo } from '@/utils/taro/get-system-info'
 import { useUuid } from '@/hooks/use-uuid'
@@ -21,9 +21,16 @@ export const Lottie = React.forwardRef((props: TaroLottieProps, ref: any) => {
     dpr = true,
   } = props
 
+  const setSpeed = () => {
+    if (animation.current) {
+      animation.current.setSpeed(Math.abs(speed))
+      animation.current.setDirection(speed > 0 ? 1 : -1)
+    }
+  }
+
   useImperativeHandle(ref, () => animation.current || {})
   const pixelRatio = useRef(getWindowInfo().pixelRatio)
-  useLayoutEffect(() => {
+  useReady(() => {
     createSelectorQuery()
       .select(`#${id}`)
       .fields(
@@ -57,14 +64,9 @@ export const Lottie = React.forwardRef((props: TaroLottieProps, ref: any) => {
                 context,
               },
             })
-            if (onComplete) {
+            onComplete &&
               animation.current.addEventListener('complete', onComplete)
-            }
-
-            if (animation.current) {
-              animation.current.setSpeed(Math.abs(speed))
-              animation.current.setDirection(speed > 0 ? 1 : -1)
-            }
+            setSpeed()
             inited.current = true
           } catch (error) {
             console.error(error)
@@ -72,7 +74,7 @@ export const Lottie = React.forwardRef((props: TaroLottieProps, ref: any) => {
         }
       )
       .exec()
-  }, [autoPlay, dpr, id, loop, onComplete, source, speed, style])
+  })
 
   useUnload(() => {
     onComplete &&
diff --git a/src/packages/overlay/overlay.tsx b/src/packages/overlay/overlay.tsx
index 98667d689b..82ed8211fc 100644
--- a/src/packages/overlay/overlay.tsx
+++ b/src/packages/overlay/overlay.tsx
@@ -10,6 +10,7 @@ import classNames from 'classnames'
 import { ComponentDefaults } from '@/utils/typings'
 import { useLockScroll } from '@/hooks/use-lock-scroll'
 import { WebOverlayProps } from '@/types'
+import { useConfig } from '@/packages/configprovider'
 
 export const defaultOverlayProps: WebOverlayProps = {
   ...ComponentDefaults,
@@ -37,12 +38,14 @@ export const Overlay: FunctionComponent<
     afterShow,
     afterClose,
     onClick,
+    ariaLabel,
     ...rest
   } = { ...defaultOverlayProps, ...props }
 
   const classPrefix = 'nut-overlay'
   const [innerVisible, setInnerVisible] = useState(visible)
   const nodeRef = useRef(null)
+  const { locale } = useConfig()
 
   useEffect(() => {
     setInnerVisible(visible)
@@ -78,6 +81,9 @@ export const Overlay: FunctionComponent<
         style={styles}
         {...rest}
         onClick={handleClick}
+        {...(closeOnOverlayClick
+          ? { ariaLabel: ariaLabel || locale.mask }
+          : {})}
       >
         {children}
       </div>
diff --git a/src/packages/popover/popover.taro.tsx b/src/packages/popover/popover.taro.tsx
index 51c0f83b18..0a26fdb272 100644
--- a/src/packages/popover/popover.taro.tsx
+++ b/src/packages/popover/popover.taro.tsx
@@ -265,7 +265,7 @@ export const Popover: FunctionComponent<
           <View className="nut-popover-content-group" ref={popoverContentRef}>
             {showArrow && (
               <View className={popoverArrow()} style={popoverArrowStyle()}>
-                <ArrowRadius width={8} height={4} />
+                <ArrowRadius />
               </View>
             )}
             {Array.isArray(children) ? children[1] : null}
diff --git a/src/packages/rate/rate.taro.tsx b/src/packages/rate/rate.taro.tsx
index 000c68f296..e2f30008f5 100644
--- a/src/packages/rate/rate.taro.tsx
+++ b/src/packages/rate/rate.taro.tsx
@@ -1,14 +1,13 @@
 import React, {
   FunctionComponent,
   ReactElement,
-  useCallback,
   useEffect,
-  useLayoutEffect,
   useRef,
   useState,
 } from 'react'
 import classNames from 'classnames'
 import { StarFill } from '@nutui/icons-react-taro'
+import { useReady } from '@tarojs/taro'
 import { ITouchEvent, Text, View } from '@tarojs/components'
 import { ComponentDefaults } from '@/utils/typings'
 import { usePropsValue } from '@/hooks/use-props-value'
@@ -132,7 +131,7 @@ export const Rate: FunctionComponent<Partial<TaroRateProps>> = (props) => {
     }
   }
 
-  const updateRects = useCallback(() => {
+  const updateRects = () => {
     for (let index = 0; index < refs.length; index++) {
       const item = refs[index]
       if (item) {
@@ -141,11 +140,11 @@ export const Rate: FunctionComponent<Partial<TaroRateProps>> = (props) => {
         })
       }
     }
-  }, [refs])
+  }
 
-  useLayoutEffect(() => {
+  useReady(() => {
     updateRects()
-  }, [updateRects])
+  })
 
   const handleTouchStart = (e: any) => {
     if (!touchable || readOnly || disabled) {
diff --git a/src/packages/switch/switch.scss b/src/packages/switch/switch.scss
index 0aeb1201d3..089f6688ca 100644
--- a/src/packages/switch/switch.scss
+++ b/src/packages/switch/switch.scss
@@ -78,16 +78,16 @@
       color: $switch-label-text-color;
     }
     &-open {
-      margin: 0 ($switch-height - $switch-border-width + 3px) 0 7px;
+      margin: 0 calc($switch-height - $switch-border-width + 3px) 0 7px;
       &-rtl {
-        margin: 0 7px 0 ($switch-height - $switch-border-width + 3px);
+        margin: 0 7px 0 calc($switch-height - $switch-border-width + 3px);
       }
     }
 
     &-close {
-      margin: 0 7px 0 ($switch-height - $switch-border-width + 3px);
+      margin: 0 7px 0 calc($switch-height - $switch-border-width + 3px);
       &-rtl {
-        margin: 0 ($switch-height - $switch-border-width + 3px) 0 7px;
+        margin: 0 calc($switch-height - $switch-border-width + 3px) 0 7px;
       }
     }
 

From 0dcd2b4db1170b7e8626f119033952f3557eaf29 Mon Sep 17 00:00:00 2001
From: songchenglin3 <353833373@qq.com>
Date: Tue, 12 May 2026 17:01:01 +0800
Subject: [PATCH 13/18] =?UTF-8?q?feat:=20=E5=AD=97=E4=BD=93\=E8=A1=8C?=
 =?UTF-8?q?=E9=AB=98\icon=E7=BB=9F=E4=B8=80=E5=A4=84=E7=90=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../avatarcropper/avatarcropper.taro.tsx      |  1 -
 src/packages/calendarcard/calendarcard.scss   |  2 +-
 src/packages/card/card.scss                   |  4 +-
 src/packages/checkbox/checkbox.scss           |  8 +-
 .../hoverbuttonitem/hoverbuttonitem.scss      |  2 +-
 src/packages/lottie/lottiemp.taro.tsx         |  3 -
 src/packages/menu/menu.scss                   |  4 +-
 src/packages/navbar/navbar.scss               |  2 +-
 .../numberkeyboard/numberkeyboard.scss        |  4 +-
 src/packages/price/price.scss                 | 27 +++---
 src/packages/quickenter/quickenter.scss       |  6 +-
 src/packages/rate/rate.scss                   |  8 +-
 src/packages/searchbar/searchbar.scss         | 10 +-
 src/packages/steps/steps.scss                 | 12 +--
 src/packages/tabs/tabs.scss                   |  2 +-
 src/packages/tag/tag.scss                     |  4 +-
 src/packages/virtuallist/virtuallist.scss     |  2 +-
 src/sites/assets/styles/highlight.scss        |  2 +-
 src/styles/theme-dark.scss                    | 92 ++++++++-----------
 src/styles/theme-default.scss                 | 91 ++++++++----------
 src/styles/variables.scss                     | 82 ++++++++++++++---
 21 files changed, 194 insertions(+), 174 deletions(-)

diff --git a/src/packages/avatarcropper/avatarcropper.taro.tsx b/src/packages/avatarcropper/avatarcropper.taro.tsx
index 7cf57ef785..ee184339f9 100644
--- a/src/packages/avatarcropper/avatarcropper.taro.tsx
+++ b/src/packages/avatarcropper/avatarcropper.taro.tsx
@@ -693,5 +693,4 @@ export const AvatarCropper: FunctionComponent<
     </>
   )
 }
-
 AvatarCropper.displayName = 'NutAvatarCropper'
diff --git a/src/packages/calendarcard/calendarcard.scss b/src/packages/calendarcard/calendarcard.scss
index 9e548f9753..f0a9d6609d 100644
--- a/src/packages/calendarcard/calendarcard.scss
+++ b/src/packages/calendarcard/calendarcard.scss
@@ -3,6 +3,7 @@
   border-radius: 12px;
   overflow: hidden;
   font-size: $calendar-base-font-size;
+  line-height: $line-height-l;
   line-height: $calendar-base-font-size;
   color: $color-title;
 
@@ -19,7 +20,6 @@
       flex-direction: row;
       cursor: pointer;
       margin: 16px;
-      line-height: 1;
 
       .left {
         margin-left: 8px;
diff --git a/src/packages/card/card.scss b/src/packages/card/card.scss
index a820623afe..630a101c51 100644
--- a/src/packages/card/card.scss
+++ b/src/packages/card/card.scss
@@ -27,7 +27,7 @@
 
     &-title {
       @include moreline-ellipsis();
-      line-height: 1.5;
+      line-height: $line-height-xl;
       font-size: $font-size-base;
       color: $color-title;
     }
@@ -69,7 +69,7 @@
       align-items: center;
 
       &-name {
-        line-height: 1.5;
+        line-height: $line-height-xl;
         color: $color-text;
         font-size: $font-size-s;
         padding-top: 4px;
diff --git a/src/packages/checkbox/checkbox.scss b/src/packages/checkbox/checkbox.scss
index 63db06585e..93d3c5ab35 100644
--- a/src/packages/checkbox/checkbox.scss
+++ b/src/packages/checkbox/checkbox.scss
@@ -103,10 +103,10 @@
       bottom: 0;
       width: 0;
       height: 0;
-      border-top: scale-icon-px(10px) solid transparent;
-      border-left: scale-icon-px(10px) solid transparent;
-      border-bottom: scale-icon-px(10px) solid $color-primary;
-      border-right: scale-icon-px(10px) solid $color-primary;
+      border-top: $icon-size-10 solid transparent;
+      border-left: $icon-size-10 solid transparent;
+      border-bottom: $icon-size-10 solid $color-primary;
+      border-right: $icon-size-10 solid $color-primary;
       display: flex;
       align-items: flex-end;
       justify-content: flex-end;
diff --git a/src/packages/hoverbuttonitem/hoverbuttonitem.scss b/src/packages/hoverbuttonitem/hoverbuttonitem.scss
index 17c9fb1129..bb0c1dcdf9 100644
--- a/src/packages/hoverbuttonitem/hoverbuttonitem.scss
+++ b/src/packages/hoverbuttonitem/hoverbuttonitem.scss
@@ -44,7 +44,7 @@
       display: block;
       width: 20px;
       height: 20px;
-      font-size: scale-font-px(20px);
+      font-size: $font-size-2xl;
     }
   }
 
diff --git a/src/packages/lottie/lottiemp.taro.tsx b/src/packages/lottie/lottiemp.taro.tsx
index 3ea6ff1a87..5dd321c581 100644
--- a/src/packages/lottie/lottiemp.taro.tsx
+++ b/src/packages/lottie/lottiemp.taro.tsx
@@ -20,14 +20,12 @@ export const Lottie = React.forwardRef((props: TaroLottieProps, ref: any) => {
     speed = 1,
     dpr = true,
   } = props
-
   const setSpeed = () => {
     if (animation.current) {
       animation.current.setSpeed(Math.abs(speed))
       animation.current.setDirection(speed > 0 ? 1 : -1)
     }
   }
-
   useImperativeHandle(ref, () => animation.current || {})
   const pixelRatio = useRef(getWindowInfo().pixelRatio)
   useReady(() => {
@@ -75,7 +73,6 @@ export const Lottie = React.forwardRef((props: TaroLottieProps, ref: any) => {
       )
       .exec()
   })
-
   useUnload(() => {
     onComplete &&
       animation.current &&
diff --git a/src/packages/menu/menu.scss b/src/packages/menu/menu.scss
index aa24f24c6b..a4942885d3 100644
--- a/src/packages/menu/menu.scss
+++ b/src/packages/menu/menu.scss
@@ -42,8 +42,8 @@
   }
 
   &-icon {
-    width: scale-icon-px(12px);
-    height: scale-icon-px(12px);
+    width: $icon-size-12;
+    height: $icon-size-12;
     flex-shrink: 0;
     transition: all 0.2s linear;
   }
diff --git a/src/packages/navbar/navbar.scss b/src/packages/navbar/navbar.scss
index 66ee85787f..04bbd95fb3 100644
--- a/src/packages/navbar/navbar.scss
+++ b/src/packages/navbar/navbar.scss
@@ -73,7 +73,7 @@
     .nutui-iconfont {
       width: 20px;
       height: 20px;
-      font-size: scale-font-px(20px);
+      font-size: $font-size-2xl;
     }
 
     /* #endif */
diff --git a/src/packages/numberkeyboard/numberkeyboard.scss b/src/packages/numberkeyboard/numberkeyboard.scss
index 244659510e..8b75327c38 100644
--- a/src/packages/numberkeyboard/numberkeyboard.scss
+++ b/src/packages/numberkeyboard/numberkeyboard.scss
@@ -2,8 +2,8 @@
 
 .nut-numberkeyboard {
   &-close-icon {
-    width: scale-icon-px(18px);
-    height: scale-icon-px(18px);
+    width: $icon-size-18;
+    height: $icon-size-18;
   }
 
   width: 100%;
diff --git a/src/packages/price/price.scss b/src/packages/price/price.scss
index d68d30eb56..5535cd8711 100644
--- a/src/packages/price/price.scss
+++ b/src/packages/price/price.scss
@@ -1,6 +1,7 @@
 .nut-price {
   direction: ltr;
   font-size: $font-size-l;
+  line-height: $price-root-line-height;
   display: flex;
   flex-direction: row;
   align-items: baseline;
@@ -17,7 +18,6 @@
       &-symbol,
       &-integer,
       &-decimal {
-        font-family: 'JDZH-Bold';
         color: $price-darkgray-color;
       }
     }
@@ -28,7 +28,6 @@
       &-symbol,
       &-integer,
       &-decimal {
-        font-family: 'JDZH-Bold';
         color: $price-primary-color;
       }
     }
@@ -38,22 +37,22 @@
     padding-right: $price-symbol-padding-right;
     &-xlarge {
       font-size: $price-symbol-xlarge-size;
-      line-height: $price-symbol-xlarge-size;
+      line-height: $price-minor-line-height;
     }
 
     &-large {
       font-size: $price-symbol-large-size;
-      line-height: $price-symbol-large-size;
+      line-height: $price-minor-line-height;
     }
 
     &-normal {
       font-size: $price-symbol-normal-size;
-      line-height: $price-symbol-normal-size;
+      line-height: $price-minor-line-height;
     }
 
     &-small {
       font-size: $price-symbol-small-size;
-      line-height: $price-symbol-small-size;
+      line-height: $price-minor-line-height;
     }
 
     &-rtl {
@@ -65,44 +64,44 @@
   &-integer {
     &-xlarge {
       font-size: $price-integer-xlarge-size;
-      line-height: $price-integer-xlarge-size;
+      line-height: $price-integer-xlarge-line-height;
     }
 
     &-large {
       font-size: $price-integer-large-size;
-      line-height: $price-integer-large-size;
+      line-height: $price-integer-large-line-height;
     }
 
     &-normal {
       font-size: $price-integer-normal-size;
-      line-height: $price-integer-normal-size;
+      line-height: $price-integer-normal-line-height;
     }
 
     &-small {
       font-size: $price-integer-small-size;
-      line-height: $price-integer-small-size;
+      line-height: $price-integer-small-line-height;
     }
   }
 
   &-decimal {
     &-xlarge {
       font-size: $price-decimal-xlarge-size;
-      line-height: $price-decimal-xlarge-size;
+      line-height: $price-minor-line-height;
     }
 
     &-large {
       font-size: $price-decimal-large-size;
-      line-height: $price-decimal-large-size;
+      line-height: $price-minor-line-height;
     }
 
     &-normal {
       font-size: $price-decimal-normal-size;
-      line-height: $price-decimal-normal-size;
+      line-height: $price-minor-line-height;
     }
 
     &-small {
       font-size: $price-decimal-small-size;
-      line-height: $price-decimal-small-size;
+      line-height: $price-minor-line-height;
     }
   }
 
diff --git a/src/packages/quickenter/quickenter.scss b/src/packages/quickenter/quickenter.scss
index aacdbcdd7c..66983ef493 100644
--- a/src/packages/quickenter/quickenter.scss
+++ b/src/packages/quickenter/quickenter.scss
@@ -101,8 +101,8 @@
 
       svg,
       .nut-icon {
-        width: scale-icon-px(22px);
-        height: scale-icon-px(22px);
+        width: $icon-size-22;
+        height: $icon-size-22;
       }
     }
 
@@ -110,7 +110,7 @@
       font-size: $quickenter-item-title-font-size;
       color: $quickenter-item-title-color;
       text-align: center;
-      line-height: scale-font-px(16px);
+      line-height: $line-height-md;
       // Allow multi-line if text is long, preventing truncation
       white-space: normal;
       word-wrap: break-word;
diff --git a/src/packages/rate/rate.scss b/src/packages/rate/rate.scss
index 756646adc9..3280f895cc 100644
--- a/src/packages/rate/rate.scss
+++ b/src/packages/rate/rate.scss
@@ -114,14 +114,14 @@
     }
 
     &-large {
-      font-size: calc($rate-font-size + scale-font-px(6px));
-      line-height: calc($rate-font-size + scale-font-px(6px));
+      font-size: $rate-font-size-large;
+      line-height: $rate-font-size-large;
       padding-left: calc($rate-item-margin * 2);
     }
 
     &-small {
-      font-size: calc($rate-font-size - scale-font-px(2px));
-      line-height: calc($rate-font-size - scale-font-px(2px));
+      font-size: $rate-font-size-small;
+      line-height: $rate-font-size-small;
       padding-left: calc($rate-item-margin / 2);
     }
 
diff --git a/src/packages/searchbar/searchbar.scss b/src/packages/searchbar/searchbar.scss
index 1fdc25bbd6..a3b8482372 100644
--- a/src/packages/searchbar/searchbar.scss
+++ b/src/packages/searchbar/searchbar.scss
@@ -74,8 +74,8 @@
     &.nut-searchbar-icon {
       position: relative;
       .nut-icon {
-        width: scale-icon-px(12px);
-        height: scale-icon-px(12px);
+        width: $icon-size-12;
+        height: $icon-size-12;
         color: var(--nutui-black-5);
         margin-right: $searchbar-inner-gap;
       }
@@ -111,9 +111,9 @@
     }
 
     .nut-icon {
-      width: scale-icon-px(6px);
-      height: scale-icon-px(6px);
-      font-size: scale-font-px(6px);
+      width: $icon-size-6;
+      height: $icon-size-6;
+      font-size: $icon-size-6;
       color: #c2c4cc;
       margin-left: 4px;
     }
diff --git a/src/packages/steps/steps.scss b/src/packages/steps/steps.scss
index 4dea2eb1e2..c5ec372adc 100644
--- a/src/packages/steps/steps.scss
+++ b/src/packages/steps/steps.scss
@@ -13,8 +13,8 @@
 
         &-icon {
           .nut-icon {
-            height: scale-icon-px(10px);
-            width: scale-icon-px(10px);
+            height: $icon-size-10;
+            width: $icon-size-10;
           }
 
           .nut-image {
@@ -146,8 +146,8 @@
           width: $steps-double-head-icon-size;
 
           .nut-icon {
-            height: scale-icon-px(12px);
-            width: scale-icon-px(12px);
+            height: $icon-size-12;
+            width: $icon-size-12;
           }
         }
 
@@ -229,8 +229,8 @@
           height: $steps-vertical-head-icon-size;
 
           .nut-icon {
-            height: scale-icon-px(12px);
-            width: scale-icon-px(12px);
+            height: $icon-size-12;
+            width: $icon-size-12;
           }
         }
       }
diff --git a/src/packages/tabs/tabs.scss b/src/packages/tabs/tabs.scss
index 9aa1bd101a..f6bc579c90 100644
--- a/src/packages/tabs/tabs.scss
+++ b/src/packages/tabs/tabs.scss
@@ -93,7 +93,7 @@
 
       .nut-icon {
         position: absolute;
-        font-size: scale-font-px(20px);
+        font-size: $font-size-2xl;
         width: 100%;
         height: 100%;
       }
diff --git a/src/packages/tag/tag.scss b/src/packages/tag/tag.scss
index 1aed907217..3b23ef41f8 100644
--- a/src/packages/tag/tag.scss
+++ b/src/packages/tag/tag.scss
@@ -81,8 +81,8 @@
   }
 
   &-close-icon {
-    width: scale-icon-px(8px);
-    height: scale-icon-px(8px);
+    width: $icon-size-8;
+    height: $icon-size-8;
   }
 }
 
diff --git a/src/packages/virtuallist/virtuallist.scss b/src/packages/virtuallist/virtuallist.scss
index 366747e30e..857f7829ca 100644
--- a/src/packages/virtuallist/virtuallist.scss
+++ b/src/packages/virtuallist/virtuallist.scss
@@ -27,7 +27,7 @@
     box-shadow: 0 1px 6px 0 rgba(237, 238, 241, 1);
     margin-top: 20px;
     padding: 14px 15px;
-    font-size: scale-font-px(13px);
+    font-size: $font-size-m;
     line-height: 18px;
     font-family: PingFangSC;
     font-weight: 500;
diff --git a/src/sites/assets/styles/highlight.scss b/src/sites/assets/styles/highlight.scss
index 11df75e2fd..e558825a1b 100644
--- a/src/sites/assets/styles/highlight.scss
+++ b/src/sites/assets/styles/highlight.scss
@@ -5,7 +5,7 @@ code {
   overflow-x: auto;
   color: $nutui-doc-code-color;
   font-weight: 400;
-  font-size: scale-font-px(13px);
+  font-size: 13px;
   font-family: $nutui-doc-code-font-family;
   line-height: 1.8;
   white-space: pre-wrap;
diff --git a/src/styles/theme-dark.scss b/src/styles/theme-dark.scss
index fa1191768d..f756fe4a62 100644
--- a/src/styles/theme-dark.scss
+++ b/src/styles/theme-dark.scss
@@ -228,59 +228,25 @@ page {
   --nutui-color-border-disabled: var(--nutui-color-content-gray-1);
 
   // 字体 ok
-  --nutui-font-size-8: calc(8px * var(--nut-scale-font, var(--nut-scale-f, 1)));
-  --nutui-font-size-9: calc(9px * var(--nut-scale-font, var(--nut-scale-f, 1)));
-  --nutui-font-size-10: calc(
-    10px * var(--nut-scale-font, var(--nut-scale-f, 1))
-  );
-  --nutui-font-size-11: calc(
-    11px * var(--nut-scale-font, var(--nut-scale-f, 1))
-  );
-  --nutui-font-size-12: calc(
-    12px * var(--nut-scale-font, var(--nut-scale-f, 1))
-  );
-  --nutui-font-size-13: calc(
-    13px * var(--nut-scale-font, var(--nut-scale-f, 1))
-  );
-  --nutui-font-size-14: calc(
-    14px * var(--nut-scale-font, var(--nut-scale-f, 1))
-  );
-  --nutui-font-size-15: calc(
-    15px * var(--nut-scale-font, var(--nut-scale-f, 1))
-  );
-  --nutui-font-size-16: calc(
-    16px * var(--nut-scale-font, var(--nut-scale-f, 1))
-  );
-  --nutui-font-size-17: calc(
-    17px * var(--nut-scale-font, var(--nut-scale-f, 1))
-  );
-  --nutui-font-size-18: calc(
-    18px * var(--nut-scale-font, var(--nut-scale-f, 1))
-  );
-  --nutui-font-size-19: calc(
-    19px * var(--nut-scale-font, var(--nut-scale-f, 1))
-  );
-  --nutui-font-size-20: calc(
-    20px * var(--nut-scale-font, var(--nut-scale-f, 1))
-  );
-  --nutui-font-size-21: calc(
-    21px * var(--nut-scale-font, var(--nut-scale-f, 1))
-  );
-  --nutui-font-size-22: calc(
-    22px * var(--nut-scale-font, var(--nut-scale-f, 1))
-  );
-  --nutui-font-size-23: calc(
-    23px * var(--nut-scale-font, var(--nut-scale-f, 1))
-  );
-  --nutui-font-size-24: calc(
-    24px * var(--nut-scale-font, var(--nut-scale-f, 1))
-  );
-  --nutui-font-size-25: calc(
-    25px * var(--nut-scale-font, var(--nut-scale-f, 1))
-  );
-  --nutui-font-size-26: calc(
-    26px * var(--nut-scale-font, var(--nut-scale-f, 1))
-  );
+  --nutui-font-size-8: 8px;
+  --nutui-font-size-9: 9px;
+  --nutui-font-size-10: 10px;
+  --nutui-font-size-11: 11px;
+  --nutui-font-size-12: 12px;
+  --nutui-font-size-13: 13px;
+  --nutui-font-size-14: 14px;
+  --nutui-font-size-15: 15px;
+  --nutui-font-size-16: 16px;
+  --nutui-font-size-17: 17px;
+  --nutui-font-size-18: 18px;
+  --nutui-font-size-19: 19px;
+  --nutui-font-size-20: 20px;
+  --nutui-font-size-21: 21px;
+  --nutui-font-size-22: 22px;
+  --nutui-font-size-23: 23px;
+  --nutui-font-size-24: 24px;
+  --nutui-font-size-25: 25px;
+  --nutui-font-size-26: 26px;
 
   // 字号语义化
   // 徽标文字
@@ -291,12 +257,18 @@ page {
   --nutui-font-size-xs: var(--nutui-font-size-11);
   // 汉字：次要内容、辅助类信息 数字：羊角符号、小数点及角分
   --nutui-font-size-s: var(--nutui-font-size-12);
+  --nutui-font-size-m: var(--nutui-font-size-13);
   // 标准内容、名称类关键信息
   --nutui-font-size-base: var(--nutui-font-size-14);
   // 汉字：楼层标题、卡片标题 数字：重复型价格，如搜推商卡
   --nutui-font-size-l: var(--nutui-font-size-16);
+  // 16px 字阶（与 l 同档数值，供 --nutui-font-size-md 语义）
+  --nutui-font-size-md: var(--nutui-font-size-16);
+  --nutui-font-size-icon: var(--nutui-font-size-16);
   // 汉字：页面标题、页面级最重要内容 数字：模块级主价格，如购物车、结算、底导
   --nutui-font-size-xl: var(--nutui-font-size-18);
+  // xl(18) 与 xxl(24) 之间（20px）
+  --nutui-font-size-2xl: var(--nutui-font-size-20);
   // 数字：页面级主价格，如商详、收银台
   --nutui-font-size-xxl: var(--nutui-font-size-24);
   // zanwu
@@ -311,7 +283,19 @@ page {
   --nutui-font-weight-bold: 600;
 
   // 行高
-  --nutui-line-height-base: 1.5;
+  --nutui-line-height-xxxs: var(--nutui-font-size-xxxs);
+  --nutui-line-height-xxs: var(--nutui-font-size-xxs);
+  --nutui-line-height-xs: var(--nutui-font-size-xs);
+  --nutui-line-height-s: var(--nutui-font-size-s);
+  --nutui-line-height-m: var(--nutui-font-size-m);
+  --nutui-line-height-base: var(--nutui-font-size-base);
+  --nutui-line-height-l: var(--nutui-font-size-l);
+  --nutui-line-height-md: var(--nutui-font-size-md);
+  --nutui-line-height-icon: var(--nutui-font-size-icon);
+  --nutui-line-height-xl: var(--nutui-font-size-xl);
+  --nutui-line-height-2xl: var(--nutui-font-size-2xl);
+  --nutui-line-height-xxl: var(--nutui-font-size-xxl);
+  --nutui-line-height-xxxl: var(--nutui-font-size-xxxl);
 
   // 对齐方式
   --nutui-text-align: left;
diff --git a/src/styles/theme-default.scss b/src/styles/theme-default.scss
index 831650b859..8a6e02923c 100644
--- a/src/styles/theme-default.scss
+++ b/src/styles/theme-default.scss
@@ -227,59 +227,25 @@ page {
   --nutui-color-border-disabled: var(--nutui-color-content-gray-1);
 
   // 字体 ok
-  --nutui-font-size-8: calc(8px * var(--nut-scale-font, var(--nut-scale-f, 1)));
-  --nutui-font-size-9: calc(9px * var(--nut-scale-font, var(--nut-scale-f, 1)));
-  --nutui-font-size-10: calc(
-    10px * var(--nut-scale-font, var(--nut-scale-f, 1))
-  );
-  --nutui-font-size-11: calc(
-    11px * var(--nut-scale-font, var(--nut-scale-f, 1))
-  );
-  --nutui-font-size-12: calc(
-    12px * var(--nut-scale-font, var(--nut-scale-f, 1))
-  );
-  --nutui-font-size-13: calc(
-    13px * var(--nut-scale-font, var(--nut-scale-f, 1))
-  );
-  --nutui-font-size-14: calc(
-    14px * var(--nut-scale-font, var(--nut-scale-f, 1))
-  );
-  --nutui-font-size-15: calc(
-    15px * var(--nut-scale-font, var(--nut-scale-f, 1))
-  );
-  --nutui-font-size-16: calc(
-    16px * var(--nut-scale-font, var(--nut-scale-f, 1))
-  );
-  --nutui-font-size-17: calc(
-    17px * var(--nut-scale-font, var(--nut-scale-f, 1))
-  );
-  --nutui-font-size-18: calc(
-    18px * var(--nut-scale-font, var(--nut-scale-f, 1))
-  );
-  --nutui-font-size-19: calc(
-    19px * var(--nut-scale-font, var(--nut-scale-f, 1))
-  );
-  --nutui-font-size-20: calc(
-    20px * var(--nut-scale-font, var(--nut-scale-f, 1))
-  );
-  --nutui-font-size-21: calc(
-    21px * var(--nut-scale-font, var(--nut-scale-f, 1))
-  );
-  --nutui-font-size-22: calc(
-    22px * var(--nut-scale-font, var(--nut-scale-f, 1))
-  );
-  --nutui-font-size-23: calc(
-    23px * var(--nut-scale-font, var(--nut-scale-f, 1))
-  );
-  --nutui-font-size-24: calc(
-    24px * var(--nut-scale-font, var(--nut-scale-f, 1))
-  );
-  --nutui-font-size-25: calc(
-    25px * var(--nut-scale-font, var(--nut-scale-f, 1))
-  );
-  --nutui-font-size-26: calc(
-    26px * var(--nut-scale-font, var(--nut-scale-f, 1))
-  );
+  --nutui-font-size-8: 8px;
+  --nutui-font-size-9: 9px;
+  --nutui-font-size-10: 10px;
+  --nutui-font-size-11: 11px;
+  --nutui-font-size-12: 12px;
+  --nutui-font-size-13: 13px;
+  --nutui-font-size-14: 14px;
+  --nutui-font-size-15: 15px;
+  --nutui-font-size-16: 16px;
+  --nutui-font-size-17: 17px;
+  --nutui-font-size-18: 18px;
+  --nutui-font-size-19: 19px;
+  --nutui-font-size-20: 20px;
+  --nutui-font-size-21: 21px;
+  --nutui-font-size-22: 22px;
+  --nutui-font-size-23: 23px;
+  --nutui-font-size-24: 24px;
+  --nutui-font-size-25: 25px;
+  --nutui-font-size-26: 26px;
 
   // 字号语义化
   // 徽标文字
@@ -290,13 +256,18 @@ page {
   --nutui-font-size-xs: var(--nutui-font-size-11);
   // 汉字：次要内容、辅助类信息 数字：羊角符号、小数点及角分
   --nutui-font-size-s: var(--nutui-font-size-12);
+  --nutui-font-size-m: var(--nutui-font-size-13);
   // 标准内容、名称类关键信息
   --nutui-font-size-base: var(--nutui-font-size-14);
   // 汉字：楼层标题、卡片标题 数字：重复型价格，如搜推商卡
   --nutui-font-size-l: var(--nutui-font-size-15);
+  // l(15) 与 xl(18) 之间，价格整数 normal 等（16px，字阶缩放）
+  --nutui-font-size-md: var(--nutui-font-size-16);
   --nutui-font-size-icon: var(--nutui-font-size-16);
   // 汉字：页面标题、页面级最重要内容 数字：模块级主价格，如购物车、结算、底导
   --nutui-font-size-xl: var(--nutui-font-size-18);
+  // xl(18) 与 xxl(24) 之间（20px）
+  --nutui-font-size-2xl: var(--nutui-font-size-20);
   // 数字：页面级主价格，如商详、收银台
   --nutui-font-size-xxl: var(--nutui-font-size-24);
   // zanwu
@@ -313,7 +284,19 @@ page {
   --nutui-font-weight-bold: 600;
 
   // 行高
-  --nutui-line-height-base: 1.5;
+  --nutui-line-height-xxxs: var(--nutui-font-size-xxxs);
+  --nutui-line-height-xxs: var(--nutui-font-size-xxs);
+  --nutui-line-height-xs: var(--nutui-font-size-xs);
+  --nutui-line-height-s: var(--nutui-font-size-s);
+  --nutui-line-height-m: var(--nutui-font-size-m);
+  --nutui-line-height-base: var(--nutui-font-size-base);
+  --nutui-line-height-l: var(--nutui-font-size-l);
+  --nutui-line-height-md: var(--nutui-font-size-md);
+  --nutui-line-height-icon: var(--nutui-font-size-icon);
+  --nutui-line-height-xl: var(--nutui-font-size-xl);
+  --nutui-line-height-2xl: var(--nutui-font-size-2xl);
+  --nutui-line-height-xxl: var(--nutui-font-size-xxl);
+  --nutui-line-height-xxxl: var(--nutui-font-size-xxxl);
 
   // 对齐方式
   --nutui-text-align: left;
diff --git a/src/styles/variables.scss b/src/styles/variables.scss
index d58edb529a..6ed9840ebf 100644
--- a/src/styles/variables.scss
+++ b/src/styles/variables.scss
@@ -176,23 +176,39 @@ $font-size-xxxs: var(--nutui-font-size-xxxs, scale-font-px(9px)) !default;
 $font-size-xxs: var(--nutui-font-size-xxs, scale-font-px(10px)) !default;
 $font-size-xs: var(--nutui-font-size-xs, scale-font-px(11px)) !default;
 $font-size-s: var(--nutui-font-size-s, scale-font-px(12px)) !default;
+$font-size-m: var(--nutui-font-size-m, scale-font-px(13px)) !default;
 $font-size-base: var(--nutui-font-size-base, scale-font-px(14px)) !default;
 $font-size-l: var(--nutui-font-size-l, scale-font-px(15px)) !default;
+$font-size-md: var(--nutui-font-size-md, scale-font-px(16px)) !default;
 $font-size-icon: var(--nutui-font-size-icon, scale-icon-px(16px)) !default;
 $font-size-xl: var(--nutui-font-size-xl, scale-font-px(18px)) !default;
+$font-size-2xl: var(--nutui-font-size-2xl, scale-font-px(20px)) !default;
 $font-size-xxl: var(--nutui-font-size-xxl, scale-font-px(24px)) !default;
 $font-size-xxxl: var(--nutui-font-size-10, scale-font-px(26px)) !default;
 $font-size-xxxxl: var(--nutui-font-size-11, scale-font-px(28px)) !default;
 
+// 行高（与各字号 token 一一对应，与同档字号等值）
+$line-height-xxxs: var(--nutui-line-height-xxxs, $font-size-xxxs) !default;
+$line-height-xxs: var(--nutui-line-height-xxs, $font-size-xxs) !default;
+$line-height-xs: var(--nutui-line-height-xs, $font-size-xs) !default;
+$line-height-s: var(--nutui-line-height-s, $font-size-s) !default;
+$line-height-m: var(--nutui-line-height-m, $font-size-m) !default;
+$line-height-base: var(--nutui-line-height-base, $font-size-base) !default;
+$line-height-l: var(--nutui-line-height-l, $font-size-l) !default;
+$line-height-md: var(--nutui-line-height-md, $font-size-md) !default;
+$line-height-icon: var(--nutui-line-height-icon, $font-size-icon) !default;
+$line-height-xl: var(--nutui-line-height-xl, $font-size-xl) !default;
+$line-height-2xl: var(--nutui-line-height-2xl, $font-size-2xl) !default;
+$line-height-xxl: var(--nutui-line-height-xxl, $font-size-xxl) !default;
+$line-height-xxxl: var(--nutui-line-height-xxxl, $font-size-xxxl) !default;
+$line-height-xxxxl: var(--nutui-line-height-xxxxl, $font-size-xxxxl) !default;
+
 // 字重 ok
 $font-weight-light: var(--nutui-font-weight-light, 300) !default;
 $font-weight: var(--nutui-font-weight, 400) !default;
 $font-weight-medium: var(--nutui-font-weight-medium, 500) !default;
 $font-weight-bold: var(--nutui-font-weight-bold, 600) !default;
 
-// 行高
-$line-height-base: var(--nutui-line-height-base, 1.5) !default;
-
 // 间距 space
 $spacing-xxxs: var(--nutui-spacing-xxxs, scale-px(2px)) !default;
 $spacing-xxs: var(--nutui-spacing-xxs, scale-px(4px)) !default;
@@ -552,9 +568,17 @@ $divider-vertical-margin: var(
 
 // icon（✅）
 
-$icon-height: var(--nutui-icon-height, scale-icon-px(20px)) !default;
-$icon-width: var(--nutui-icon-width, scale-icon-px(20px)) !default;
-$icon-line-height: var(--nutui-icon-line-height, scale-icon-px(20px)) !default;
+$icon-size-6: var(--nutui-icon-size-6, scale-icon-px(6px)) !default;
+$icon-size-8: var(--nutui-icon-size-8, scale-icon-px(8px)) !default;
+$icon-size-10: var(--nutui-icon-size-10, scale-icon-px(10px)) !default;
+$icon-size-12: var(--nutui-icon-size-12, scale-icon-px(12px)) !default;
+$icon-size-18: var(--nutui-icon-size-18, scale-icon-px(18px)) !default;
+$icon-size-20: var(--nutui-icon-size-20, scale-icon-px(20px)) !default;
+$icon-size-22: var(--nutui-icon-size-22, scale-icon-px(22px)) !default;
+
+$icon-height: var(--nutui-icon-height, $icon-size-20) !default;
+$icon-width: var(--nutui-icon-width, $icon-size-20) !default;
+$icon-line-height: var(--nutui-icon-line-height, $icon-size-20) !default;
 
 // uploader（✅）
 $uploader-image-width: var(
@@ -965,7 +989,7 @@ $price-symbol-normal-size: var(
 ) !default;
 $price-integer-normal-size: var(
   --nutui-price-integer-normal-size,
-  scale-font-px(16px)
+  $font-size-md
 ) !default;
 $price-decimal-normal-size: var(
   --nutui-price-decimal-normal-size,
@@ -986,6 +1010,32 @@ $price-decimal-small-size: var(
   $font-size-s
 ) !default;
 
+// price 行高
+$price-root-line-height: var(
+  --nutui-price-root-line-height,
+  $line-height-l
+) !default;
+$price-minor-line-height: var(
+  --nutui-price-minor-line-height,
+  $line-height-s
+) !default;
+$price-integer-xlarge-line-height: var(
+  --nutui-price-integer-xlarge-line-height,
+  $line-height-xxl
+) !default;
+$price-integer-large-line-height: var(
+  --nutui-price-integer-large-line-height,
+  $line-height-xl
+) !default;
+$price-integer-normal-line-height: var(
+  --nutui-price-integer-normal-line-height,
+  $line-height-md
+) !default;
+$price-integer-small-line-height: var(
+  --nutui-price-integer-small-line-height,
+  $line-height-s
+) !default;
+
 //avatar（✅）
 $avatar-square: var(--nutui-avatar-square, scale-px(5px)) !default;
 $avatar-large-width: var(--nutui-avatar-large-width, scale-px(60px)) !default;
@@ -1062,7 +1112,7 @@ $switch-inactive-disabled-label-text-color: var(
 $toast-inner-text-align: var(--nutui-toast-inner-text-align, center) !default;
 $toast-title-font-size: var(
   --nutui-toast-title-font-size,
-  scale-font-px(16px)
+  $font-size-md
 ) !default;
 $toast-text-font-size: var(
   --nutui-toast-text-font-size,
@@ -1273,6 +1323,14 @@ $rate-icon-inactive-color: var(
 $rate-icon-size: var(--nutui-rate-icon-size, scale-font-px(12px)) !default;
 $rate-font-color: var(--nutui-rate-font-color, $color-primary-icon) !default;
 $rate-font-size: var(--nutui-rate-font-size, $font-size-s) !default;
+$rate-font-size-large: var(
+  --nutui-rate-font-size-large,
+  calc($rate-font-size + scale-font-px(6px))
+) !default;
+$rate-font-size-small: var(
+  --nutui-rate-font-size-small,
+  calc($rate-font-size - scale-font-px(2px))
+) !default;
 
 // tabbar（✅）
 $tabbar-height: var(--nutui-tabbar-height, scale-px(46px)) !default;
@@ -1384,7 +1442,7 @@ $steps-base-head-color: var(
 ) !default;
 $steps-base-head-dot-size: var(
   --nutui-steps-base-head-dot-size,
-  scale-icon-px(6px)
+  $icon-size-6
 ) !default;
 $steps-base-head-dot-background-color: var(
   --nutui-steps-base-head-dot-background-color,
@@ -1392,7 +1450,7 @@ $steps-base-head-dot-background-color: var(
 ) !default;
 $steps-base-head-icon-size: var(
   --nutui-steps-base-head-icon-size,
-  scale-font-px(16px)
+  $font-size-md
 ) !default;
 $steps-double-head-icon-size: var(
   --nutui-steps-base-head-icon-size-right,
@@ -2740,7 +2798,7 @@ $addresslist-border: var(--nutui-addresslist-border, #f0f0f0) !default;
 $addresslist-font-color: var(--nutui-addresslist-font-color, #333333) !default;
 $addresslist-font-size: var(
   --nutui-addresslist-font-size,
-  scale-font-px(16px)
+  $font-size-md
 ) !default;
 $addresslist-mask-bg: var(
   --nutui-addresslist-mask-bg,
@@ -2939,7 +2997,7 @@ $quickenter-item-icon-color: var(
 ) !default;
 $quickenter-close-icon-size: var(
   --nutui-quickenter-close-icon-size,
-  scale-icon-px(12px)
+  $icon-size-12
 ) !default;
 $quickenter-close-icon-color: var(
   --nutui-quickenter-close-icon-color,

From e606a0bf975f148b48e7cea298bc4d81dd21dc58 Mon Sep 17 00:00:00 2001
From: songchenglin3 <353833373@qq.com>
Date: Tue, 12 May 2026 17:48:54 +0800
Subject: [PATCH 14/18] =?UTF-8?q?feat:=20=E7=BB=84=E4=BB=B6=E5=9B=BE?=
 =?UTF-8?q?=E6=A0=87=E5=B0=BA=E5=AF=B8=E6=B2=BB=E7=90=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../skills/nutui-proportional-scaling/SKILL.md  |  8 ++++++++
 src/packages/calendarcard/calendarcard.scss     |  3 +--
 src/packages/card/card.scss                     |  2 +-
 src/packages/inputnumber/inputnumber.taro.tsx   |  2 --
 src/packages/menuitem/menuitem.taro.tsx         |  1 -
 src/packages/noticebar/noticebar.scss           |  5 +++++
 src/packages/noticebar/noticebar.taro.tsx       |  6 ++++--
 src/packages/noticebar/noticebar.tsx            | 11 ++++++++---
 src/packages/notify/notify.scss                 |  5 +++++
 src/packages/notify/notify.taro.tsx             |  5 ++++-
 src/packages/numberkeyboard/numberkeyboard.scss |  5 +++++
 src/packages/numberkeyboard/numberkeyboard.tsx  |  2 +-
 src/packages/rate/rate.scss                     |  6 +++---
 src/packages/segmented/segmented.scss           |  2 +-
 src/packages/shortpassword/shortpassword.scss   | 17 +++++++++++------
 .../shortpassword/shortpassword.taro.tsx        |  2 +-
 src/packages/shortpassword/shortpassword.tsx    |  2 +-
 src/packages/tabs/tabs.scss                     |  5 +++++
 src/packages/tabs/tabs.taro.tsx                 |  5 ++++-
 src/packages/tabs/tabs.tsx                      |  5 ++++-
 src/styles/variables.scss                       |  2 ++
 21 files changed, 74 insertions(+), 27 deletions(-)

diff --git a/.cursor/skills/nutui-proportional-scaling/SKILL.md b/.cursor/skills/nutui-proportional-scaling/SKILL.md
index a38cdedd6a..4c2fcc482d 100644
--- a/.cursor/skills/nutui-proportional-scaling/SKILL.md
+++ b/.cursor/skills/nutui-proportional-scaling/SKILL.md
@@ -79,6 +79,13 @@ description: >-
 - 图标占位：**`scale-icon-px`** 或已有 `--nut-icon-*`。
 - 保持与 **无障碍/大屏** 相关提交协同：同一文件改尺度时，勿回退 `dialog` 等对大字兼容的改动。
 
+### 3.5 组件 `.tsx` 图标尺寸治理（props → class → 变量）
+
+- 对 `@nutui/icons-react` / `@nutui/icons-react-taro`：尽量避免在组件上写死 `size={12}`、`width={16}`、`height={16}`。
+- **推荐模式**：在 `.tsx` 里只加语义化 `className`，到对应 `.scss` 里用变量控制尺寸（优先 `$icon-size-*` 阶梯，或组件专用变量）。
+- 若是内联 `<svg>`（非 NutUI 图标组件）也遵循同一规则：移除 `width/height` 字面量，改为 class，并在 SCSS 用变量（可新增如 `$xxx-icon-size`，默认 `scale-icon-px(Npx)`）。
+- 新增尺寸档优先沉淀到 `variables.scss`（如 `$icon-size-11`、`$icon-size-16`），避免同一像素值在多个组件重复散落。
+
 ### 3.4 `calc()`、Sass 变量与 `#{}`（与 `variables.scss` / 主题 token 一致）
 
 - **推荐**：在 `calc()` 里直接写 Sass 变量，如 **`calc($steps-vertical-head-icon-size + 1px)`**、**`calc($rate-item-margin / 2)`**，而不是 **`calc(#{$steps-vertical-head-icon-size} + 1px)`**。`#{}` 只在需要把值**硬插成无引号 CSS 片段**、或要避免 Sass 对单位做提前合并时再考虑；普通设计 token 用 **`$var` 作为 `calc` 的操作数**即可。
@@ -104,6 +111,7 @@ description: >-
 - [ ] 字体/图标是否应走 **`scale-font-px` / `scale-icon-px`** 而非误用 `scale-px`。
 - [ ] 含 **`$token` 与裸 `px` 的混合运算**：若 token 会变成 **`var(--nutui-*)`**，是否已用 **`calc($a - $b + Npx)`**，而不是 **`($a - $b + Npx)`** 写在 `margin` / `width` 等非纯编译期长度位置。
 - [ ] `calc()` 内对设计 token 是否优先 **`calc($var + 1px)`**，避免无必要的 **`#{}`**。
+- [ ] 组件 `.tsx` 是否仍有写死图标尺寸（`size/width/height`）；如有，是否已改为 **class + SCSS 变量**（内联 `svg` 同理）。
 - [ ] TS 侧改 `scale-f*` 已同步考虑 **Taro** 文件。
 - [ ] 修改 `formatScaleValue` / 断点时，已通读 **视口与平板常量** 是否仍与文档、设计一致。
 
diff --git a/src/packages/calendarcard/calendarcard.scss b/src/packages/calendarcard/calendarcard.scss
index f0a9d6609d..ccd2667370 100644
--- a/src/packages/calendarcard/calendarcard.scss
+++ b/src/packages/calendarcard/calendarcard.scss
@@ -3,8 +3,6 @@
   border-radius: 12px;
   overflow: hidden;
   font-size: $calendar-base-font-size;
-  line-height: $line-height-l;
-  line-height: $calendar-base-font-size;
   color: $color-title;
 
   &-header {
@@ -13,6 +11,7 @@
     align-items: center;
     justify-content: space-between;
     font-weight: normal;
+    line-height: $line-height-l;
 
     &-left,
     &-right {
diff --git a/src/packages/card/card.scss b/src/packages/card/card.scss
index 630a101c51..a940cbb596 100644
--- a/src/packages/card/card.scss
+++ b/src/packages/card/card.scss
@@ -27,7 +27,7 @@
 
     &-title {
       @include moreline-ellipsis();
-      line-height: $line-height-xl;
+      line-height: $line-height-2xl;
       font-size: $font-size-base;
       color: $color-title;
     }
diff --git a/src/packages/inputnumber/inputnumber.taro.tsx b/src/packages/inputnumber/inputnumber.taro.tsx
index 1a8ada7528..eb4769fb72 100644
--- a/src/packages/inputnumber/inputnumber.taro.tsx
+++ b/src/packages/inputnumber/inputnumber.taro.tsx
@@ -184,7 +184,6 @@ export const InputNumber: FunctionComponent<
     <View className={classes} style={style}>
       <View className={`${classPrefix}-minus`} onClick={handleReduce}>
         <Minus
-          size={10}
           className={classNames(
             `${classPrefix}-icon ${classPrefix}-icon-minus`,
             {
@@ -211,7 +210,6 @@ export const InputNumber: FunctionComponent<
 
       <View className={`${classPrefix}-add`} onClick={handlePlus}>
         <Plus
-          size={10}
           className={classNames(
             `${classPrefix}-icon ${classPrefix}-icon-plus`,
             {
diff --git a/src/packages/menuitem/menuitem.taro.tsx b/src/packages/menuitem/menuitem.taro.tsx
index fb50e8ab8a..c4659bad1e 100644
--- a/src/packages/menuitem/menuitem.taro.tsx
+++ b/src/packages/menuitem/menuitem.taro.tsx
@@ -233,7 +233,6 @@ export const MenuItem = forwardRef((props: Partial<WebMenuItemProps>, ref) => {
                       ) : (
                         <Check
                           color={activeColor}
-                          size={16}
                           className={`nut-menu-container-item-icon ${getIconCName(item.value, value)}`}
                         />
                       )}
diff --git a/src/packages/noticebar/noticebar.scss b/src/packages/noticebar/noticebar.scss
index 4c98dc203b..ca406526d2 100644
--- a/src/packages/noticebar/noticebar.scss
+++ b/src/packages/noticebar/noticebar.scss
@@ -74,6 +74,11 @@
       }
     }
 
+    &-right-icon-default {
+      width: $icon-size-12;
+      height: $icon-size-12;
+    }
+
     &-wrap {
       display: flex;
       flex: 1;
diff --git a/src/packages/noticebar/noticebar.taro.tsx b/src/packages/noticebar/noticebar.taro.tsx
index 93f479a1ae..ac9acb7d87 100644
--- a/src/packages/noticebar/noticebar.taro.tsx
+++ b/src/packages/noticebar/noticebar.taro.tsx
@@ -26,7 +26,7 @@ const defaultProps = {
   content: '',
   closeable: false,
   wrap: false,
-  leftIcon: <Notice size={16} />,
+  leftIcon: <Notice />,
   rightIcon: null,
   right: null,
   delay: 1,
@@ -490,7 +490,9 @@ export const NoticeBar: FunctionComponent<
             className="nut-noticebar-box-right-icon"
             onClick={handleClickIcon}
           >
-            {rightIcon || <Close size={12} />}
+            {rightIcon || (
+              <Close className="nut-noticebar-box-right-icon-default" />
+            )}
           </View>
         ) : null}
       </>
diff --git a/src/packages/noticebar/noticebar.tsx b/src/packages/noticebar/noticebar.tsx
index a371e56538..ccf99c42c5 100644
--- a/src/packages/noticebar/noticebar.tsx
+++ b/src/packages/noticebar/noticebar.tsx
@@ -24,7 +24,7 @@ const defaultProps = {
   content: '',
   closeable: false,
   wrap: false,
-  leftIcon: <Notice width={16} height={16} />,
+  leftIcon: <Notice />,
   rightIcon: null,
   right: null,
   delay: 1,
@@ -475,7 +475,9 @@ export const NoticeBar: FunctionComponent<
           ) : null}
           {closeable || rightIcon ? (
             <div className="nut-noticebar-box-right-icon" onClick={onClickIcon}>
-              {rightIcon || <Close width={12} height={12} />}
+              {rightIcon || (
+                <Close className="nut-noticebar-box-right-icon-default" />
+              )}
             </div>
           ) : null}
         </div>
@@ -534,7 +536,10 @@ export const NoticeBar: FunctionComponent<
               handleClickIcon(e)
             }}
           >
-            {rightIcon || (closeable ? <Close width={12} height={12} /> : null)}
+            {rightIcon ||
+              (closeable ? (
+                <Close className="nut-noticebar-box-right-icon-default" />
+              ) : null)}
           </div>
         </div>
       ) : null}
diff --git a/src/packages/notify/notify.scss b/src/packages/notify/notify.scss
index 9c7bf6e5a4..56937a7dd3 100644
--- a/src/packages/notify/notify.scss
+++ b/src/packages/notify/notify.scss
@@ -98,4 +98,9 @@
       width: 12px;
     }
   }
+
+  &-close-icon {
+    height: $icon-size-12;
+    width: $icon-size-12;
+  }
 }
diff --git a/src/packages/notify/notify.taro.tsx b/src/packages/notify/notify.taro.tsx
index 4b1e62df97..33ab4eed87 100644
--- a/src/packages/notify/notify.taro.tsx
+++ b/src/packages/notify/notify.taro.tsx
@@ -142,7 +142,10 @@ export const Notify: FunctionComponent<Partial<TaroNotifyProps>> & {
             className={`${classPrefix}-right-icon`}
             onClick={handleClickIcon}
           >
-            {rightIcon || (closeable ? <Close size={12} /> : null)}
+            {rightIcon ||
+              (closeable ? (
+                <Close className={`${classPrefix}-close-icon`} />
+              ) : null)}
           </View>
         ) : null}
       </View>
diff --git a/src/packages/numberkeyboard/numberkeyboard.scss b/src/packages/numberkeyboard/numberkeyboard.scss
index 8b75327c38..089c1085ad 100644
--- a/src/packages/numberkeyboard/numberkeyboard.scss
+++ b/src/packages/numberkeyboard/numberkeyboard.scss
@@ -6,6 +6,11 @@
     height: $icon-size-18;
   }
 
+  &-delete-icon {
+    width: 28px;
+    height: 28px;
+  }
+
   width: 100%;
   padding: $numberkeyboard-padding;
   user-select: none;
diff --git a/src/packages/numberkeyboard/numberkeyboard.tsx b/src/packages/numberkeyboard/numberkeyboard.tsx
index 8cc8ac73bd..7c6969967e 100644
--- a/src/packages/numberkeyboard/numberkeyboard.tsx
+++ b/src/packages/numberkeyboard/numberkeyboard.tsx
@@ -71,7 +71,7 @@ export const NumberKeyboard: FunctionComponent<
 
   const DeleteIcon = () => {
     return (
-      <svg viewBox="0 0 1024 1024" width="28" height="28">
+      <svg viewBox="0 0 1024 1024" className={`${classPrefix}-delete-icon`}>
         <path
           d="M875.594 186.122H390.803a51.162 51.162 0 0 0-36.18 14.986L79.91 475.821a51.166 51.166 0 0 0 0 72.358l274.714 274.712a51.164 51.164 0 0 0 36.179 14.986h484.791c46.033 0 83.484-37.45 83.484-83.483V269.606c.001-46.033-37.45-83.484-83.483-83.484zm32.32 568.274c0 17.85-14.473 32.318-32.32 32.318H390.803L116.089 512l274.714-274.714h484.791c17.849 0 32.32 14.47 32.32 32.32v484.789z"
           fill="currentColor"
diff --git a/src/packages/rate/rate.scss b/src/packages/rate/rate.scss
index 3280f895cc..319f5d60da 100644
--- a/src/packages/rate/rate.scss
+++ b/src/packages/rate/rate.scss
@@ -110,18 +110,18 @@
     &-normal {
       padding-left: $rate-item-margin;
       font-size: $rate-font-size;
-      line-height: $rate-font-size;
+      line-height: $line-height-s;
     }
 
     &-large {
       font-size: $rate-font-size-large;
-      line-height: $rate-font-size-large;
+      line-height: $line-height-xl;
       padding-left: calc($rate-item-margin * 2);
     }
 
     &-small {
       font-size: $rate-font-size-small;
-      line-height: $rate-font-size-small;
+      line-height: $line-height-xxs;
       padding-left: calc($rate-item-margin / 2);
     }
 
diff --git a/src/packages/segmented/segmented.scss b/src/packages/segmented/segmented.scss
index de3f361cca..373976ce8d 100644
--- a/src/packages/segmented/segmented.scss
+++ b/src/packages/segmented/segmented.scss
@@ -23,7 +23,7 @@
   border-radius: $segmented-item-radius;
   color: $segmented-item-color;
   font-size: $segmented-item-fontsize;
-  line-height: $segmented-item-fontsize;
+  line-height: $line-height-s;
   box-sizing: border-box;
 }
 
diff --git a/src/packages/shortpassword/shortpassword.scss b/src/packages/shortpassword/shortpassword.scss
index 1af54b6f35..04a13eb785 100644
--- a/src/packages/shortpassword/shortpassword.scss
+++ b/src/packages/shortpassword/shortpassword.scss
@@ -10,7 +10,7 @@
   &-title {
     display: flex;
     justify-content: center;
-    line-height: $font-size-l;
+    line-height: $line-height-l;
     font-size: $font-size-l;
     color: $color-title;
   }
@@ -20,7 +20,7 @@
     justify-content: center;
     margin-top: 12px;
     margin-bottom: 24px;
-    line-height: $font-size-s;
+    line-height: $line-height-s;
     font-size: $font-size-s;
     color: $color-text;
   }
@@ -85,13 +85,13 @@
     width: 247px;
 
     &-error {
-      line-height: $font-size-xs;
+      line-height: $line-height-xs;
       font-size: $font-size-xs;
       color: $shortpassword-error;
     }
 
     &-forget {
-      line-height: $font-size-s;
+      line-height: $line-height-s;
       font-size: $font-size-s;
       color: $shortpassword-forget;
       display: flex;
@@ -101,6 +101,11 @@
         margin-right: 3px;
       }
     }
+
+    &-tips-icon {
+      width: $icon-size-11;
+      height: $icon-size-11;
+    }
   }
 
   &-footer {
@@ -113,7 +118,7 @@
       border: 1px solid $color-primary;
       border-radius: 15px;
       padding: 8px 38px;
-      line-height: $font-size-base;
+      line-height: $line-height-base;
       font-size: $font-size-base;
       color: $color-primary;
     }
@@ -126,7 +131,7 @@
       );
       border-radius: 15px;
       padding: 8px 38px;
-      line-height: $font-size-base;
+      line-height: $line-height-base;
       font-size: $font-size-base;
       color: $color-primary-text;
     }
diff --git a/src/packages/shortpassword/shortpassword.taro.tsx b/src/packages/shortpassword/shortpassword.taro.tsx
index a22528970b..f86b013206 100644
--- a/src/packages/shortpassword/shortpassword.taro.tsx
+++ b/src/packages/shortpassword/shortpassword.taro.tsx
@@ -142,7 +142,7 @@ export const InternalShortPassword: ForwardRefRenderFunction<
           <View className={`${classPrefix}-message-forget`} onClick={onTips}>
             {tips || (
               <>
-                <Tips size={11} />
+                <Tips className={`${classPrefix}-message-tips-icon`} />
                 {locale.shortpassword.tips}
               </>
             )}
diff --git a/src/packages/shortpassword/shortpassword.tsx b/src/packages/shortpassword/shortpassword.tsx
index 4e7cc02da5..0873a87ace 100644
--- a/src/packages/shortpassword/shortpassword.tsx
+++ b/src/packages/shortpassword/shortpassword.tsx
@@ -141,7 +141,7 @@ export const InternalShortPassword: ForwardRefRenderFunction<
           <div className={`${classPrefix}-message-forget`} onClick={onTips}>
             {tips || (
               <>
-                <Tips width={11} height={11} />
+                <Tips className={`${classPrefix}-message-tips-icon`} />
                 {locale.shortpassword.tips}
               </>
             )}
diff --git a/src/packages/tabs/tabs.scss b/src/packages/tabs/tabs.scss
index f6bc579c90..a98beb4e36 100644
--- a/src/packages/tabs/tabs.scss
+++ b/src/packages/tabs/tabs.scss
@@ -99,6 +99,11 @@
       }
     }
 
+    &-smile-icon {
+      width: 40px;
+      height: 20px;
+    }
+
     &-active {
       .nut-icon {
         color: $tabs-titles-item-active-color;
diff --git a/src/packages/tabs/tabs.taro.tsx b/src/packages/tabs/tabs.taro.tsx
index d5edb93b94..f30e38754d 100644
--- a/src/packages/tabs/tabs.taro.tsx
+++ b/src/packages/tabs/tabs.taro.tsx
@@ -282,7 +282,10 @@ export const Tabs: FunctionComponent<Partial<TaroTabsProps>> & {
                         // @ts-ignore
                         ariaHidden
                       >
-                        <JoySmile color={activeColor} />
+                        <JoySmile
+                          color={activeColor}
+                          className={`${classPrefix}-titles-item-smile-icon`}
+                        />
                       </View>
                     )}
                     <View
diff --git a/src/packages/tabs/tabs.tsx b/src/packages/tabs/tabs.tsx
index 7569e44c38..7d86a4fdf4 100644
--- a/src/packages/tabs/tabs.tsx
+++ b/src/packages/tabs/tabs.tsx
@@ -189,7 +189,10 @@ export const Tabs: FunctionComponent<Partial<WebTabsProps>> & {
                       className={`${classPrefix}-titles-item-smile`}
                       aria-hidden="true"
                     >
-                      <JoySmile color={activeColor} width={40} height={20} />
+                      <JoySmile
+                        color={activeColor}
+                        className={`${classPrefix}-titles-item-smile-icon`}
+                      />
                     </div>
                   )}
                   <div
diff --git a/src/styles/variables.scss b/src/styles/variables.scss
index 6ed9840ebf..e111fa0d27 100644
--- a/src/styles/variables.scss
+++ b/src/styles/variables.scss
@@ -571,7 +571,9 @@ $divider-vertical-margin: var(
 $icon-size-6: var(--nutui-icon-size-6, scale-icon-px(6px)) !default;
 $icon-size-8: var(--nutui-icon-size-8, scale-icon-px(8px)) !default;
 $icon-size-10: var(--nutui-icon-size-10, scale-icon-px(10px)) !default;
+$icon-size-11: var(--nutui-icon-size-11, scale-icon-px(11px)) !default;
 $icon-size-12: var(--nutui-icon-size-12, scale-icon-px(12px)) !default;
+$icon-size-16: var(--nutui-icon-size-16, scale-icon-px(16px)) !default;
 $icon-size-18: var(--nutui-icon-size-18, scale-icon-px(18px)) !default;
 $icon-size-20: var(--nutui-icon-size-20, scale-icon-px(20px)) !default;
 $icon-size-22: var(--nutui-icon-size-22, scale-icon-px(22px)) !default;

From 607d7c6255b4816ad278e8a9610efcffb954cfd5 Mon Sep 17 00:00:00 2001
From: songchenglin3 <353833373@qq.com>
Date: Tue, 12 May 2026 20:09:50 +0800
Subject: [PATCH 15/18] =?UTF-8?q?feat:=20=E8=A7=A3=E5=86=B3build=E9=AA=8C?=
 =?UTF-8?q?=E8=AF=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/packages/configprovider/types.ts | 35 ++++++++++++-
 src/styles/variables-daojia.scss     | 20 +++++++-
 src/styles/variables-jmapp.scss      | 77 ++++++++++++++++++++++++++--
 src/styles/variables-jrkf.scss       | 77 ++++++++++++++++++++++++++--
 4 files changed, 198 insertions(+), 11 deletions(-)

diff --git a/src/packages/configprovider/types.ts b/src/packages/configprovider/types.ts
index 3abbf27a8a..8709501775 100644
--- a/src/packages/configprovider/types.ts
+++ b/src/packages/configprovider/types.ts
@@ -54,18 +54,34 @@ export type NutCSSVariables =
   | 'nutuiFontSizeXxs'
   | 'nutuiFontSizeXs'
   | 'nutuiFontSizeS'
+  | 'nutuiFontSizeM'
   | 'nutuiFontSizeBase'
   | 'nutuiFontSizeL'
+  | 'nutuiFontSizeMd'
   | 'nutuiFontSizeIcon'
   | 'nutuiFontSizeXl'
+  | 'nutuiFontSize2Xl'
   | 'nutuiFontSizeXxl'
   | 'nutuiFontSize10'
   | 'nutuiFontSize11'
+  | 'nutuiLineHeightXxxs'
+  | 'nutuiLineHeightXxs'
+  | 'nutuiLineHeightXs'
+  | 'nutuiLineHeightS'
+  | 'nutuiLineHeightM'
+  | 'nutuiLineHeightBase'
+  | 'nutuiLineHeightL'
+  | 'nutuiLineHeightMd'
+  | 'nutuiLineHeightIcon'
+  | 'nutuiLineHeightXl'
+  | 'nutuiLineHeight2Xl'
+  | 'nutuiLineHeightXxl'
+  | 'nutuiLineHeightXxxl'
+  | 'nutuiLineHeightXxxxl'
   | 'nutuiFontWeightLight'
   | 'nutuiFontWeight'
   | 'nutuiFontWeightMedium'
   | 'nutuiFontWeightBold'
-  | 'nutuiLineHeightBase'
   | 'nutuiSpacingXxxs'
   | 'nutuiSpacingXxs'
   | 'nutuiSpacingXs'
@@ -166,6 +182,15 @@ export type NutCSSVariables =
   | 'nutuiDividerSideWidth'
   | 'nutuiDividerVerticalHeight'
   | 'nutuiDividerVerticalMargin'
+  | 'nutuiIconSize6'
+  | 'nutuiIconSize8'
+  | 'nutuiIconSize10'
+  | 'nutuiIconSize11'
+  | 'nutuiIconSize12'
+  | 'nutuiIconSize16'
+  | 'nutuiIconSize18'
+  | 'nutuiIconSize20'
+  | 'nutuiIconSize22'
   | 'nutuiIconHeight'
   | 'nutuiIconWidth'
   | 'nutuiIconLineHeight'
@@ -287,6 +312,12 @@ export type NutCSSVariables =
   | 'nutuiPriceSymbolSmallSize'
   | 'nutuiPriceIntegerSmallSize'
   | 'nutuiPriceDecimalSmallSize'
+  | 'nutuiPriceRootLineHeight'
+  | 'nutuiPriceMinorLineHeight'
+  | 'nutuiPriceIntegerXlargeLineHeight'
+  | 'nutuiPriceIntegerLargeLineHeight'
+  | 'nutuiPriceIntegerNormalLineHeight'
+  | 'nutuiPriceIntegerSmallLineHeight'
   | 'nutuiAvatarSquare'
   | 'nutuiAvatarLargeWidth'
   | 'nutuiAvatarLargeHeight'
@@ -378,6 +409,8 @@ export type NutCSSVariables =
   | 'nutuiRateIconSize'
   | 'nutuiRateFontColor'
   | 'nutuiRateFontSize'
+  | 'nutuiRateFontSizeLarge'
+  | 'nutuiRateFontSizeSmall'
   | 'nutuiTabbarHeight'
   | 'nutuiTabbarActiveColor'
   | 'nutuiTabbarInactiveColor'
diff --git a/src/styles/variables-daojia.scss b/src/styles/variables-daojia.scss
index 9a9e62e432..8417bccaca 100644
--- a/src/styles/variables-daojia.scss
+++ b/src/styles/variables-daojia.scss
@@ -151,10 +151,13 @@ $font-size-xxxs: var(--nutui-font-size-xxxs, 9px) !default;
 $font-size-xxs: var(--nutui-font-size-xxs, 10px) !default;
 $font-size-xs: var(--nutui-font-size-xs, 11px) !default;
 $font-size-s: var(--nutui-font-size-s, 12px) !default;
+$font-size-m: var(--nutui-font-size-m, 13px) !default;
 $font-size-base: var(--nutui-font-size-base, 14px) !default;
 $font-size-l: var(--nutui-font-size-l, 15px) !default;
+$font-size-md: var(--nutui-font-size-md, 16px) !default;
 $font-size-icon: var(--nutui-font-size-icon, 16px) !default;
 $font-size-xl: var(--nutui-font-size-xl, 18px) !default;
+$font-size-2xl: var(--nutui-font-size-2xl, 20px) !default;
 $font-size-xxl: var(--nutui-font-size-xxl, 24px) !default;
 $font-size-xxxl: var(--nutui-font-size-10, 26px) !default;
 $font-size-xxxxl: var(--nutui-font-size-11, 28px) !default;
@@ -165,8 +168,21 @@ $font-weight: var(--nutui-font-weight, 400) !default;
 $font-weight-medium: var(--nutui-font-weight-medium, 500) !default;
 $font-weight-bold: var(--nutui-font-weight-bold, 600) !default;
 
-// 行高
-$line-height-base: var(--nutui-line-height-base, 1.5) !default;
+// 行高（与同档字号等值；不经 scale）
+$line-height-xxxs: var(--nutui-line-height-xxxs, $font-size-xxxs) !default;
+$line-height-xxs: var(--nutui-line-height-xxs, $font-size-xxs) !default;
+$line-height-xs: var(--nutui-line-height-xs, $font-size-xs) !default;
+$line-height-s: var(--nutui-line-height-s, $font-size-s) !default;
+$line-height-m: var(--nutui-line-height-m, $font-size-m) !default;
+$line-height-base: var(--nutui-line-height-base, $font-size-base) !default;
+$line-height-l: var(--nutui-line-height-l, $font-size-l) !default;
+$line-height-md: var(--nutui-line-height-md, $font-size-md) !default;
+$line-height-icon: var(--nutui-line-height-icon, $font-size-icon) !default;
+$line-height-xl: var(--nutui-line-height-xl, $font-size-xl) !default;
+$line-height-2xl: var(--nutui-line-height-2xl, $font-size-2xl) !default;
+$line-height-xxl: var(--nutui-line-height-xxl, $font-size-xxl) !default;
+$line-height-xxxl: var(--nutui-line-height-xxxl, $font-size-xxxl) !default;
+$line-height-xxxxl: var(--nutui-line-height-xxxxl, $font-size-xxxxl) !default;
 
 // 间距 space
 $spacing-xxxs: var(--nutui-spacing-xxxs, 2px) !default;
diff --git a/src/styles/variables-jmapp.scss b/src/styles/variables-jmapp.scss
index cc8e386609..771ad1c2af 100644
--- a/src/styles/variables-jmapp.scss
+++ b/src/styles/variables-jmapp.scss
@@ -106,9 +106,6 @@ $font-weight: var(--nutui-font-weight);
 $font-weight-medium: var(--nutui-font-weight-medium, 500) !default;
 $font-weight-bold: var(--nutui-font-weight-bold);
 
-// 行高
-$line-height-base: var(--nutui-line-height) !default;
-
 // 圆角 corners
 $radius-xxs: var(
   --nutui-radius-xxs
@@ -169,16 +166,54 @@ $font-family:
   SimSun,
   sans-serif !default;
 
-// Font
+// Font（token 与 variables.scss 对齐；回落为 px / 设计 token，不经 scale 函数）
 $font-size-xxxs: var(--nutui-font-size-xxxs, 9px) !default;
 $font-size-xxs: $font-text-mini !default;
 $font-size-xs: $font-text-xs !default;
 $font-size-s: $font-text-small !default;
+$font-size-m: var(--nutui-font-size-m, $font-text-small) !default;
 $font-size-base: $font-text !default;
 $font-size-l: $font-text-large !default;
+$font-size-md: var(--nutui-font-size-md, 16px) !default;
+$font-size-icon: var(--nutui-font-size-icon, 16px) !default;
 $font-size-xl: $font-h2 !default;
+$font-size-2xl: var(--nutui-font-size-2xl, 20px) !default;
 $font-size-xxl: var(--nutui-font-size-8) !default;
 $font-size-xxxl: var(--nutui-font-size-10) !default;
+$font-size-xxxxl: var(--nutui-font-size-11, 28px) !default;
+
+// 行高（与同档字号等值；不经 scale）
+$line-height-xxxs: var(--nutui-line-height-xxxs, $font-size-xxxs) !default;
+$line-height-xxs: var(--nutui-line-height-xxs, $font-size-xxs) !default;
+$line-height-xs: var(--nutui-line-height-xs, $font-size-xs) !default;
+$line-height-s: var(--nutui-line-height-s, $font-size-s) !default;
+$line-height-m: var(--nutui-line-height-m, $font-size-m) !default;
+$line-height-base: var(
+  --nutui-line-height-base,
+  var(--nutui-line-height, $font-size-base)
+) !default;
+$line-height-l: var(--nutui-line-height-l, $font-size-l) !default;
+$line-height-md: var(--nutui-line-height-md, $font-size-md) !default;
+$line-height-icon: var(--nutui-line-height-icon, $font-size-icon) !default;
+$line-height-xl: var(--nutui-line-height-xl, $font-size-xl) !default;
+$line-height-2xl: var(--nutui-line-height-2xl, $font-size-2xl) !default;
+$line-height-xxl: var(--nutui-line-height-xxl, $font-size-xxl) !default;
+$line-height-xxxl: var(--nutui-line-height-xxxl, $font-size-xxxl) !default;
+$line-height-xxxxl: var(--nutui-line-height-xxxxl, $font-size-xxxxl) !default;
+
+// icon 尺寸（与 variables.scss 对齐；回落为 px，不经 scale-icon-px）
+$icon-size-6: var(--nutui-icon-size-6, 6px) !default;
+$icon-size-8: var(--nutui-icon-size-8, 8px) !default;
+$icon-size-10: var(--nutui-icon-size-10, 10px) !default;
+$icon-size-11: var(--nutui-icon-size-11, 11px) !default;
+$icon-size-12: var(--nutui-icon-size-12, 12px) !default;
+$icon-size-16: var(--nutui-icon-size-16, 16px) !default;
+$icon-size-18: var(--nutui-icon-size-18, 18px) !default;
+$icon-size-20: var(--nutui-icon-size-20, 20px) !default;
+$icon-size-22: var(--nutui-icon-size-22, 22px) !default;
+$icon-height: var(--nutui-icon-height, $icon-size-20) !default;
+$icon-width: var(--nutui-icon-width, $icon-size-20) !default;
+$icon-line-height: var(--nutui-icon-line-height, $icon-size-20) !default;
 
 // 间距 space
 $spacing-xxxs: var(--nutui-spacing-xxxs) !default; // 多用于文本与图标之间的间距
@@ -913,6 +948,32 @@ $price-symbol-small-size: var(--nutui-price-symbol-small-size, 10px) !default;
 $price-integer-small-size: var(--nutui-price-integer-small-size, 12px) !default;
 $price-decimal-small-size: var(--nutui-price-decimal-small-size, 10px) !default;
 
+// price 行高（与 variables.scss 对齐）
+$price-root-line-height: var(
+  --nutui-price-root-line-height,
+  $line-height-l
+) !default;
+$price-minor-line-height: var(
+  --nutui-price-minor-line-height,
+  $line-height-s
+) !default;
+$price-integer-xlarge-line-height: var(
+  --nutui-price-integer-xlarge-line-height,
+  $line-height-xxl
+) !default;
+$price-integer-large-line-height: var(
+  --nutui-price-integer-large-line-height,
+  $line-height-xl
+) !default;
+$price-integer-normal-line-height: var(
+  --nutui-price-integer-normal-line-height,
+  $line-height-md
+) !default;
+$price-integer-small-line-height: var(
+  --nutui-price-integer-small-line-height,
+  $line-height-s
+) !default;
+
 //avatar（✅）
 $avatar-square: var(--nutui-avatar-square, $radius-base) !default;
 $avatar-large-width: var(--nutui-avatar-large-width, 48px) !default;
@@ -1221,6 +1282,14 @@ $rate-icon-inactive-color: var(
 $rate-icon-size: var(--nutui-rate-icon-size, 12px) !default;
 $rate-font-color: var(--nutui-rate-font-color, $color-primary-icon) !default;
 $rate-font-size: var(--nutui-rate-font-size, 12px) !default;
+$rate-font-size-large: var(
+  --nutui-rate-font-size-large,
+  calc(#{$rate-font-size} + 6px)
+) !default;
+$rate-font-size-small: var(
+  --nutui-rate-font-size-small,
+  calc(#{$rate-font-size} - 2px)
+) !default;
 
 // tabbar（✅）
 $tabbar-height: var(--nutui-tabbar-height, 50px) !default;
diff --git a/src/styles/variables-jrkf.scss b/src/styles/variables-jrkf.scss
index 8c51b238a3..5b001961d3 100644
--- a/src/styles/variables-jrkf.scss
+++ b/src/styles/variables-jrkf.scss
@@ -129,9 +129,6 @@ $font-weight: var(--nutui-font-weight) !default;
 $font-weight-medium: var(--nutui-font-weight-medium, 500) !default;
 $font-weight-bold: var(--nutui-font-weight-bold) !default;
 
-// 行高
-$line-height-base: var(--nutui-line-height) !default;
-
 // 间距 space
 $spacing-xxxs: var(--nutui-spacing-xxxs, 2px) !default;
 $spacing-xxs: var(--nutui-spacing-xxs) !default; // 多用于文本与图标之间的间距
@@ -205,16 +202,54 @@ $font-family:
   SimSun,
   sans-serif !default;
 
-// Font
+// Font（token 与 variables.scss 对齐；回落为 px / 设计 token，不经 scale 函数）
 $font-size-xxxs: var(--nutui-font-size-xxxs, 9px) !default;
 $font-size-xxs: $font-text-mini !default;
 $font-size-xs: $font-text-xs !default;
 $font-size-s: $font-text-small !default;
+$font-size-m: var(--nutui-font-size-m, $font-text-small) !default;
 $font-size-base: $font-text !default;
 $font-size-l: $font-text-large !default;
+$font-size-md: var(--nutui-font-size-md, 16px) !default;
+$font-size-icon: var(--nutui-font-size-icon, 16px) !default;
 $font-size-xl: $font-h2 !default;
+$font-size-2xl: var(--nutui-font-size-2xl, 20px) !default;
 $font-size-xxl: var(--nutui-font-size-8) !default;
 $font-size-xxxl: var(--nutui-font-size-10) !default;
+$font-size-xxxxl: var(--nutui-font-size-11, 28px) !default;
+
+// 行高（与同档字号等值；不经 scale）
+$line-height-xxxs: var(--nutui-line-height-xxxs, $font-size-xxxs) !default;
+$line-height-xxs: var(--nutui-line-height-xxs, $font-size-xxs) !default;
+$line-height-xs: var(--nutui-line-height-xs, $font-size-xs) !default;
+$line-height-s: var(--nutui-line-height-s, $font-size-s) !default;
+$line-height-m: var(--nutui-line-height-m, $font-size-m) !default;
+$line-height-base: var(
+  --nutui-line-height-base,
+  var(--nutui-line-height, $font-size-base)
+) !default;
+$line-height-l: var(--nutui-line-height-l, $font-size-l) !default;
+$line-height-md: var(--nutui-line-height-md, $font-size-md) !default;
+$line-height-icon: var(--nutui-line-height-icon, $font-size-icon) !default;
+$line-height-xl: var(--nutui-line-height-xl, $font-size-xl) !default;
+$line-height-2xl: var(--nutui-line-height-2xl, $font-size-2xl) !default;
+$line-height-xxl: var(--nutui-line-height-xxl, $font-size-xxl) !default;
+$line-height-xxxl: var(--nutui-line-height-xxxl, $font-size-xxxl) !default;
+$line-height-xxxxl: var(--nutui-line-height-xxxxl, $font-size-xxxxl) !default;
+
+// icon 尺寸（与 variables.scss 对齐；回落为 px，不经 scale-icon-px）
+$icon-size-6: var(--nutui-icon-size-6, 6px) !default;
+$icon-size-8: var(--nutui-icon-size-8, 8px) !default;
+$icon-size-10: var(--nutui-icon-size-10, 10px) !default;
+$icon-size-11: var(--nutui-icon-size-11, 11px) !default;
+$icon-size-12: var(--nutui-icon-size-12, 12px) !default;
+$icon-size-16: var(--nutui-icon-size-16, 16px) !default;
+$icon-size-18: var(--nutui-icon-size-18, 18px) !default;
+$icon-size-20: var(--nutui-icon-size-20, 20px) !default;
+$icon-size-22: var(--nutui-icon-size-22, 22px) !default;
+$icon-height: var(--nutui-icon-height, $icon-size-20) !default;
+$icon-width: var(--nutui-icon-width, $icon-size-20) !default;
+$icon-line-height: var(--nutui-icon-line-height, $icon-size-20) !default;
 
 $space-mini: $spacing-xs !default;
 $space-large: $spacing-l !default;
@@ -1002,6 +1037,32 @@ $price-symbol-small-size: var(--nutui-price-symbol-small-size, 10px) !default;
 $price-integer-small-size: var(--nutui-price-integer-small-size, 12px) !default;
 $price-decimal-small-size: var(--nutui-price-decimal-small-size, 10px) !default;
 
+// price 行高（与 variables.scss 对齐）
+$price-root-line-height: var(
+  --nutui-price-root-line-height,
+  $line-height-l
+) !default;
+$price-minor-line-height: var(
+  --nutui-price-minor-line-height,
+  $line-height-s
+) !default;
+$price-integer-xlarge-line-height: var(
+  --nutui-price-integer-xlarge-line-height,
+  $line-height-xxl
+) !default;
+$price-integer-large-line-height: var(
+  --nutui-price-integer-large-line-height,
+  $line-height-xl
+) !default;
+$price-integer-normal-line-height: var(
+  --nutui-price-integer-normal-line-height,
+  $line-height-md
+) !default;
+$price-integer-small-line-height: var(
+  --nutui-price-integer-small-line-height,
+  $line-height-s
+) !default;
+
 //avatar（✅）
 $avatar-square: var(--nutui-avatar-square, $radius-base) !default;
 $avatar-large-width: var(--nutui-avatar-large-width, 48px) !default;
@@ -1320,6 +1381,14 @@ $notify-background-color: var(--nutui-notify-background-color, $white) !default;
 $rate-icon-size: var(--nutui-rate-icon-size, 12px) !default;
 $rate-font-color: var(--nutui-rate-font-color, $color-primary-icon) !default;
 $rate-font-size: var(--nutui-rate-font-size, 12px) !default;
+$rate-font-size-large: var(
+  --nutui-rate-font-size-large,
+  calc(#{$rate-font-size} + 6px)
+) !default;
+$rate-font-size-small: var(
+  --nutui-rate-font-size-small,
+  calc(#{$rate-font-size} - 2px)
+) !default;
 $rate-item-margin: var(--nutui-rate-item-margin, 14px) !default;
 $rate-icon-color: var(--nutui-rate-icon-color, $color-primary) !default;
 $rate-icon-inactive-color: var(

From adac5376e33d0e0df289c3f95f5bf53ce3db416a Mon Sep 17 00:00:00 2001
From: songchenglin3 <353833373@qq.com>
Date: Tue, 12 May 2026 20:26:07 +0800
Subject: [PATCH 16/18] =?UTF-8?q?feat:=20=E6=9C=AC=E5=9C=B0=E6=A0=A1?=
 =?UTF-8?q?=E9=AA=8C=E8=84=9A=E6=9C=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../skills/nutui-build-local-verify/SKILL.md  |  62 ++++++++
 .../scripts/verify-scale-generation.mjs       | 132 ++++++++++++++++++
 package.json                                  |   4 +-
 3 files changed, 197 insertions(+), 1 deletion(-)
 create mode 100644 .cursor/skills/nutui-build-local-verify/SKILL.md
 create mode 100644 .cursor/skills/nutui-build-local-verify/scripts/verify-scale-generation.mjs

diff --git a/.cursor/skills/nutui-build-local-verify/SKILL.md b/.cursor/skills/nutui-build-local-verify/SKILL.md
new file mode 100644
index 0000000000..3bf8c38ffa
--- /dev/null
+++ b/.cursor/skills/nutui-build-local-verify/SKILL.md
@@ -0,0 +1,62 @@
+---
+name: nutui-build-local-verify
+description: NutUI 比例缩放本地验证——默认就地覆盖：每个组件 SCSS 写回 src/packages 下同一路径（如 actionsheet/actionsheet.scss→同文件）；--mirror 才写到 scale-verify/ 对照。不写 build。
+disable-model-invocation: true
+---
+
+# NutUI Build Local Verify
+
+## 在做什么
+
+**只做一步**：用 `scripts/px-to-scale-px-in-component-scss.cjs` 把组件 SCSS 里裸 `px` 转成 `scale-px` 等，并把结果写回磁盘。
+
+- **默认（就地覆盖）**：对每个匹配的 `.scss`，**读、写都是同一路径**——相对 `src/packages` 的路径不变。例如 `src/packages/actionsheet/actionsheet.scss` 转换后仍写回该文件，不会改到别的目录或改名。
+- **`--mirror`**：不写源码；结果写到 **`scale-verify/<与 src/packages 相同的相对路径>`**（例如 `scale-verify/actionsheet/actionsheet.scss`），便于 diff。
+
+之后是否再跑 `pnpm run build`、是否用别的工具核对，由你自行决定；本 skill **不要求** build。
+
+## 覆盖原 SCSS（推荐）
+
+在 **nutui-react 仓库根目录** 执行。**务必先 commit / stash**，用完 `git restore src/packages` 或 `git checkout -- src/packages` 恢复。
+
+```bash
+pnpm run verify-scale
+```
+
+等价：
+
+```bash
+node .cursor/skills/nutui-build-local-verify/scripts/verify-scale-generation.mjs
+```
+
+（`--in-place` / `-i` 与默认等价。）
+
+## 报告
+
+路径：**`scale-verify/report.json`**。覆盖模式下看 `overwriteSource === true`、`changedFileCount`、`changedFiles`。
+
+## 其它命令
+
+```bash
+# 删除仓库根下 scale-verify/ 整目录（含 report；不还原已覆盖的 src/packages）
+node .cursor/skills/nutui-build-local-verify/scripts/verify-scale-generation.mjs --clean
+```
+
+**可选**（只镜像、不覆盖源码）：
+
+```bash
+pnpm run verify-scale:mirror
+```
+
+`--mirror` 与 `--in-place` 不能同时使用。
+
+## 核对清单
+
+- [ ] 覆盖前已 git 可回滚
+- [ ] `changedFiles` 抽样无 `scale-px(0px)`、无重复嵌套 `scale-px`
+- [ ] `font-size` / `font` 未被误改（转换器会跳过）
+
+## 给用户的一句话结论
+
+- 脚本跑完 + `changedFileCount` + 列 2～3 个 `changedFiles`
+- **覆盖的是真实源码**时，验证完用 **git 恢复**
diff --git a/.cursor/skills/nutui-build-local-verify/scripts/verify-scale-generation.mjs b/.cursor/skills/nutui-build-local-verify/scripts/verify-scale-generation.mjs
new file mode 100644
index 0000000000..92dc337a82
--- /dev/null
+++ b/.cursor/skills/nutui-build-local-verify/scripts/verify-scale-generation.mjs
@@ -0,0 +1,132 @@
+#!/usr/bin/env node
+/**
+ * 默认：每个文件读自且写回 src/packages 下同一路径（如 …/actionsheet/actionsheet.scss）。
+ * 不包含 build；自行 git diff / 恢复即可。
+ */
+import fs from 'node:fs/promises'
+import path from 'path'
+import { createRequire } from 'node:module'
+
+const require = createRequire(import.meta.url)
+const transform = require(path.resolve(process.cwd(), 'scripts/px-to-scale-px-in-component-scss.cjs'))
+
+const repoRoot = process.cwd()
+const packagesRoot = path.resolve(repoRoot, 'src/packages')
+const outRoot = path.resolve(repoRoot, 'scale-verify')
+const reportPath = path.resolve(outRoot, 'report.json')
+
+const argv = new Set(process.argv.slice(2))
+const shouldClean = argv.has('--clean')
+const mirrorMode = argv.has('--mirror')
+/** 默认覆盖 src/packages 原 .scss；传 --mirror 则只写 scale-verify/ */
+const inPlace = !mirrorMode
+
+if (mirrorMode && (argv.has('--in-place') || argv.has('-i'))) {
+  console.error('[scale-verify] 不能同时使用 --mirror 与 --in-place / -i')
+  process.exit(1)
+}
+
+function isScssFile(name) {
+  return name.endsWith('.scss')
+}
+
+function shouldSkip(relPath) {
+  const p = relPath.replaceAll('\\', '/')
+  if (p.includes('/demos/')) return true
+  if (p.includes('/__test__/')) return true
+  if (p.includes('/__tests__/')) return true
+  if (p.includes('/__snapshots__/')) return true
+  if (p.startsWith('.scale-verify/')) return true
+  return false
+}
+
+async function walkScssFiles(dir, base = dir, list = []) {
+  const entries = await fs.readdir(dir, { withFileTypes: true })
+  for (const entry of entries) {
+    const abs = path.resolve(dir, entry.name)
+    const rel = path.relative(base, abs)
+    if (entry.isDirectory()) {
+      await walkScssFiles(abs, base, list)
+      continue
+    }
+    if (!entry.isFile() || !isScssFile(entry.name)) continue
+    if (shouldSkip(rel)) continue
+    list.push(abs)
+  }
+  return list
+}
+
+async function ensureReportDir() {
+  await fs.mkdir(outRoot, { recursive: true })
+}
+
+async function prepareOutputLayout() {
+  if (shouldClean) {
+    await fs.rm(outRoot, { recursive: true, force: true })
+    console.log('[scale-verify] cleaned:', path.relative(repoRoot, outRoot))
+    return
+  }
+
+  await fs.rm(outRoot, { recursive: true, force: true })
+  await fs.mkdir(outRoot, { recursive: true })
+}
+
+async function main() {
+  await prepareOutputLayout()
+  if (shouldClean) {
+    return
+  }
+
+  const files = await walkScssFiles(packagesRoot)
+  files.sort()
+
+  const changed = []
+  for (const absFile of files) {
+    const rel = path.relative(packagesRoot, absFile)
+    const source = await fs.readFile(absFile, 'utf8')
+    const transformed = transform(source)
+    if (source === transformed) continue
+
+    const targetFile = inPlace ? absFile : path.resolve(outRoot, rel)
+    if (!inPlace) {
+      await fs.mkdir(path.dirname(targetFile), { recursive: true })
+    }
+    await fs.writeFile(targetFile, transformed, 'utf8')
+    changed.push(rel.replaceAll('\\', '/'))
+  }
+
+  await ensureReportDir()
+  const scssWriteRoot = inPlace
+    ? path.relative(repoRoot, packagesRoot).replaceAll('\\', '/')
+    : path.relative(repoRoot, outRoot).replaceAll('\\', '/')
+
+  const report = {
+    generatedAt: new Date().toISOString(),
+    mode: inPlace ? 'in-place' : 'mirror',
+    overwriteSource: inPlace,
+    /** 本次写入的 SCSS 根路径：原地为 src/packages，镜像为仓库根下 scale-verify */
+    scssWriteRoot,
+    /** 镜像模式下的实验目录；原地模式为 null */
+    outDir: inPlace ? null : path.relative(repoRoot, outRoot).replaceAll('\\', '/'),
+    reportPath: path.relative(repoRoot, reportPath).replaceAll('\\', '/'),
+    totalScssFiles: files.length,
+    changedFileCount: changed.length,
+    changedFiles: changed,
+  }
+  await fs.writeFile(reportPath, `${JSON.stringify(report, null, 2)}\n`, 'utf8')
+
+  console.log('[scale-verify] mode:', report.mode)
+  if (!inPlace) {
+    console.log('[scale-verify] outDir:', report.outDir)
+  } else {
+    console.log('[scale-verify] wrote into:', path.relative(repoRoot, packagesRoot))
+  }
+  console.log('[scale-verify] totalScssFiles:', report.totalScssFiles)
+  console.log('[scale-verify] changedFileCount:', report.changedFileCount)
+  console.log('[scale-verify] report:', path.relative(repoRoot, reportPath))
+}
+
+main().catch((err) => {
+  console.error('[scale-verify] failed:', err)
+  process.exitCode = 1
+})
diff --git a/package.json b/package.json
index def1792648..823e6fc138 100644
--- a/package.json
+++ b/package.json
@@ -101,7 +101,9 @@
     "e2e:run:taro": "start-server-and-test dev:taro:h5 http://localhost:10086 cypress:run:taro",
     "e2e:open:taro": "start-server-and-test dev:taro:h5 http://localhost:10086 cypress:open:taro",
     "update:taro:entry": "node ./scripts/harmony/update-taro-entry",
-    "upgradeTaro": "pnpm --dir ./packages/nutui-taro-demo upgradeTaro"
+    "upgradeTaro": "pnpm --dir ./packages/nutui-taro-demo upgradeTaro",
+    "verify-scale": "node .cursor/skills/nutui-build-local-verify/scripts/verify-scale-generation.mjs",
+    "verify-scale:mirror": "node .cursor/skills/nutui-build-local-verify/scripts/verify-scale-generation.mjs --mirror"
   },
   "lint-staged": {
     "*.{scss,md}": "prettier --write",

From 02c5b050afd7d7cf8718bb851e9a2aaa8b938388 Mon Sep 17 00:00:00 2001
From: songchenglin3 <353833373@qq.com>
Date: Tue, 12 May 2026 20:45:53 +0800
Subject: [PATCH 17/18] =?UTF-8?q?feat:=20=E6=9C=AC=E5=9C=B0=E8=84=9A?=
 =?UTF-8?q?=E6=9C=AC=E9=AA=8C=E8=AF=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .cursor/skills/nutui-build-local-verify/SKILL.md     | 12 +++++++++++-
 .../scripts/verify-scale-generation.mjs              |  8 ++++++--
 2 files changed, 17 insertions(+), 3 deletions(-)

diff --git a/.cursor/skills/nutui-build-local-verify/SKILL.md b/.cursor/skills/nutui-build-local-verify/SKILL.md
index 3bf8c38ffa..d498ff7afc 100644
--- a/.cursor/skills/nutui-build-local-verify/SKILL.md
+++ b/.cursor/skills/nutui-build-local-verify/SKILL.md
@@ -1,6 +1,6 @@
 ---
 name: nutui-build-local-verify
-description: NutUI 比例缩放本地验证——默认就地覆盖：每个组件 SCSS 写回 src/packages 下同一路径（如 actionsheet/actionsheet.scss→同文件）；--mirror 才写到 scale-verify/ 对照。不写 build。
+description: NutUI 比例缩放本地验证——写回 src/packages 下同路径组件 SCSS（跳过 src/packages/**/demo.scss 与 demos）；--mirror 写 scale-verify/；不写 build。
 disable-model-invocation: true
 ---
 
@@ -10,6 +10,8 @@ disable-model-invocation: true
 
 **只做一步**：用 `scripts/px-to-scale-px-in-component-scss.cjs` 把组件 SCSS 里裸 `px` 转成 `scale-px` 等，并把结果写回磁盘。
 
+**不扫描、不写入**：**`src/packages/<组件名>/demo.scss`**（各组件目录根下的单文件）、`**/demos/**`、路径中含 **`/demo/`**、测试与快照目录下的 `.scss`（与官方 `build.mjs` 里对 `**/demo.scss` 的 ignore 一致）。
+
 - **默认（就地覆盖）**：对每个匹配的 `.scss`，**读、写都是同一路径**——相对 `src/packages` 的路径不变。例如 `src/packages/actionsheet/actionsheet.scss` 转换后仍写回该文件，不会改到别的目录或改名。
 - **`--mirror`**：不写源码；结果写到 **`scale-verify/<与 src/packages 相同的相对路径>`**（例如 `scale-verify/actionsheet/actionsheet.scss`），便于 diff。
 
@@ -19,6 +21,14 @@ disable-model-invocation: true
 
 在 **nutui-react 仓库根目录** 执行。**务必先 commit / stash**，用完 `git restore src/packages` 或 `git checkout -- src/packages` 恢复。
 
+若只需还原 **`src/packages/<组件>/demo.scss`**（当前脚本已跳过；若曾被旧版本误改）：
+
+```bash
+find src/packages -name 'demo.scss' -exec git restore -- {} \;
+```
+
+**然后**在仓库根执行验证：
+
 ```bash
 pnpm run verify-scale
 ```
diff --git a/.cursor/skills/nutui-build-local-verify/scripts/verify-scale-generation.mjs b/.cursor/skills/nutui-build-local-verify/scripts/verify-scale-generation.mjs
index 92dc337a82..e3922ada2e 100644
--- a/.cursor/skills/nutui-build-local-verify/scripts/verify-scale-generation.mjs
+++ b/.cursor/skills/nutui-build-local-verify/scripts/verify-scale-generation.mjs
@@ -1,7 +1,8 @@
 #!/usr/bin/env node
 /**
- * 默认：每个文件读自且写回 src/packages 下同一路径（如 …/actionsheet/actionsheet.scss）。
- * 不包含 build；自行 git diff / 恢复即可。
+ * 本地验证：默认就地写回 src/packages 下同一路径的组件 .scss（如 …/actionsheet/actionsheet.scss）。
+ * 跳过 src/packages/**/demo.scss、demos、测试与快照（与 build.mjs ignore 一致）。
+ * --mirror 只写 scale-verify/；不包含 build；自行 git diff / 恢复即可。
  */
 import fs from 'node:fs/promises'
 import path from 'path'
@@ -32,6 +33,9 @@ function isScssFile(name) {
 
 function shouldSkip(relPath) {
   const p = relPath.replaceAll('\\', '/')
+  // 与 build.mjs 的 ignore 一致：**/demo.scss 不参与 px→scale 写回
+  if (path.posix.basename(p) === 'demo.scss') return true
+  if (p.includes('/demo/')) return true
   if (p.includes('/demos/')) return true
   if (p.includes('/__test__/')) return true
   if (p.includes('/__tests__/')) return true

From 2d7eac193174d4085fe3f41bedd954f03eab5dfc Mon Sep 17 00:00:00 2001
From: songchenglin3 <353833373@qq.com>
Date: Thu, 14 May 2026 14:27:35 +0800
Subject: [PATCH 18/18] =?UTF-8?q?style:=20=E5=9F=BA=E7=A1=80=E4=B8=BB?=
 =?UTF-8?q?=E9=A2=98=E5=8F=98=E6=9B=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/styles/theme-dark.scss    | 152 +++++++++++++++++++++-------------
 src/styles/theme-default.scss | 152 +++++++++++++++++++++-------------
 src/styles/variables.scss     |   4 +-
 src/utils/scale-f.ts          |  10 +--
 4 files changed, 192 insertions(+), 126 deletions(-)

diff --git a/src/styles/theme-dark.scss b/src/styles/theme-dark.scss
index f756fe4a62..934a2e263a 100644
--- a/src/styles/theme-dark.scss
+++ b/src/styles/theme-dark.scss
@@ -228,25 +228,59 @@ page {
   --nutui-color-border-disabled: var(--nutui-color-content-gray-1);
 
   // 字体 ok
-  --nutui-font-size-8: 8px;
-  --nutui-font-size-9: 9px;
-  --nutui-font-size-10: 10px;
-  --nutui-font-size-11: 11px;
-  --nutui-font-size-12: 12px;
-  --nutui-font-size-13: 13px;
-  --nutui-font-size-14: 14px;
-  --nutui-font-size-15: 15px;
-  --nutui-font-size-16: 16px;
-  --nutui-font-size-17: 17px;
-  --nutui-font-size-18: 18px;
-  --nutui-font-size-19: 19px;
-  --nutui-font-size-20: 20px;
-  --nutui-font-size-21: 21px;
-  --nutui-font-size-22: 22px;
-  --nutui-font-size-23: 23px;
-  --nutui-font-size-24: 24px;
-  --nutui-font-size-25: 25px;
-  --nutui-font-size-26: 26px;
+  --nutui-font-size-8: calc(8px * var(--nut-scale-font, var(--nut-scale-f, 1)));
+  --nutui-font-size-9: calc(9px * var(--nut-scale-font, var(--nut-scale-f, 1)));
+  --nutui-font-size-10: calc(
+    10px * var(--nut-scale-font, var(--nut-scale-f, 1))
+  );
+  --nutui-font-size-11: calc(
+    11px * var(--nut-scale-font, var(--nut-scale-f, 1))
+  );
+  --nutui-font-size-12: calc(
+    12px * var(--nut-scale-font, var(--nut-scale-f, 1))
+  );
+  --nutui-font-size-13: calc(
+    13px * var(--nut-scale-font, var(--nut-scale-f, 1))
+  );
+  --nutui-font-size-14: calc(
+    14px * var(--nut-scale-font, var(--nut-scale-f, 1))
+  );
+  --nutui-font-size-15: calc(
+    15px * var(--nut-scale-font, var(--nut-scale-f, 1))
+  );
+  --nutui-font-size-16: calc(
+    16px * var(--nut-scale-font, var(--nut-scale-f, 1))
+  );
+  --nutui-font-size-17: calc(
+    17px * var(--nut-scale-font, var(--nut-scale-f, 1))
+  );
+  --nutui-font-size-18: calc(
+    18px * var(--nut-scale-font, var(--nut-scale-f, 1))
+  );
+  --nutui-font-size-19: calc(
+    19px * var(--nut-scale-font, var(--nut-scale-f, 1))
+  );
+  --nutui-font-size-20: calc(
+    20px * var(--nut-scale-font, var(--nut-scale-f, 1))
+  );
+  --nutui-font-size-21: calc(
+    21px * var(--nut-scale-font, var(--nut-scale-f, 1))
+  );
+  --nutui-font-size-22: calc(
+    22px * var(--nut-scale-font, var(--nut-scale-f, 1))
+  );
+  --nutui-font-size-23: calc(
+    23px * var(--nut-scale-font, var(--nut-scale-f, 1))
+  );
+  --nutui-font-size-24: calc(
+    24px * var(--nut-scale-font, var(--nut-scale-f, 1))
+  );
+  --nutui-font-size-25: calc(
+    25px * var(--nut-scale-font, var(--nut-scale-f, 1))
+  );
+  --nutui-font-size-26: calc(
+    26px * var(--nut-scale-font, var(--nut-scale-f, 1))
+  );
 
   // 字号语义化
   // 徽标文字
@@ -301,22 +335,22 @@ page {
   --nutui-text-align: left;
 
   // space
-  --nutui-spacing-1: 1px;
-  --nutui-spacing-2: 2px;
-  --nutui-spacing-3: 3px;
-  --nutui-spacing-4: 4px;
-  --nutui-spacing-5: 5px;
-  --nutui-spacing-6: 6px;
-  --nutui-spacing-7: 7px;
-  --nutui-spacing-8: 8px;
-  --nutui-spacing-9: 9px;
-  --nutui-spacing-10: 10px;
-  --nutui-spacing-11: 11px;
-  --nutui-spacing-12: 12px;
-  --nutui-spacing-13: 13px;
-  --nutui-spacing-14: 14px;
-  --nutui-spacing-15: 15px;
-  --nutui-spacing-16: 16px;
+  --nutui-spacing-1: calc(1px * var(--nut-scale-f, 1));
+  --nutui-spacing-2: calc(2px * var(--nut-scale-f, 1));
+  --nutui-spacing-3: calc(3px * var(--nut-scale-f, 1));
+  --nutui-spacing-4: calc(4px * var(--nut-scale-f, 1));
+  --nutui-spacing-5: calc(5px * var(--nut-scale-f, 1));
+  --nutui-spacing-6: calc(6px * var(--nut-scale-f, 1));
+  --nutui-spacing-7: calc(7px * var(--nut-scale-f, 1));
+  --nutui-spacing-8: calc(8px * var(--nut-scale-f, 1));
+  --nutui-spacing-9: calc(9px * var(--nut-scale-f, 1));
+  --nutui-spacing-10: calc(10px * var(--nut-scale-f, 1));
+  --nutui-spacing-11: calc(11px * var(--nut-scale-f, 1));
+  --nutui-spacing-12: calc(12px * var(--nut-scale-f, 1));
+  --nutui-spacing-13: calc(13px * var(--nut-scale-f, 1));
+  --nutui-spacing-14: calc(14px * var(--nut-scale-f, 1));
+  --nutui-spacing-15: calc(15px * var(--nut-scale-f, 1));
+  --nutui-spacing-16: calc(16px * var(--nut-scale-f, 1));
 
   // space 语义化
   // 狭小空间内的紧密关联内容
@@ -338,30 +372,30 @@ page {
 
   // radius ok
   --nutui-radius-0: 0px;
-  --nutui-radius-1: 1px;
-  --nutui-radius-2: 2px;
-  --nutui-radius-3: 3px;
-  --nutui-radius-4: 4px;
-  --nutui-radius-5: 5px;
-  --nutui-radius-6: 6px;
-  --nutui-radius-7: 7px;
-  --nutui-radius-8: 8px;
-  --nutui-radius-9: 9px;
-  --nutui-radius-10: 10px;
-  --nutui-radius-11: 11px;
-  --nutui-radius-12: 12px;
-  --nutui-radius-13: 13px;
-  --nutui-radius-14: 14px;
-  --nutui-radius-15: 15px;
-  --nutui-radius-16: 16px;
-  --nutui-radius-17: 17px;
-  --nutui-radius-18: 18px;
-  --nutui-radius-19: 19px;
-  --nutui-radius-20: 20px;
-  --nutui-radius-21: 21px;
-  --nutui-radius-22: 22px;
-  --nutui-radius-23: 23px;
-  --nutui-radius-24: 24px;
+  --nutui-radius-1: calc(1px * var(--nut-scale-f, 1));
+  --nutui-radius-2: calc(2px * var(--nut-scale-f, 1));
+  --nutui-radius-3: calc(3px * var(--nut-scale-f, 1));
+  --nutui-radius-4: calc(4px * var(--nut-scale-f, 1));
+  --nutui-radius-5: calc(5px * var(--nut-scale-f, 1));
+  --nutui-radius-6: calc(6px * var(--nut-scale-f, 1));
+  --nutui-radius-7: calc(7px * var(--nut-scale-f, 1));
+  --nutui-radius-8: calc(8px * var(--nut-scale-f, 1));
+  --nutui-radius-9: calc(9px * var(--nut-scale-f, 1));
+  --nutui-radius-10: calc(10px * var(--nut-scale-f, 1));
+  --nutui-radius-11: calc(11px * var(--nut-scale-f, 1));
+  --nutui-radius-12: calc(12px * var(--nut-scale-f, 1));
+  --nutui-radius-13: calc(13px * var(--nut-scale-f, 1));
+  --nutui-radius-14: calc(14px * var(--nut-scale-f, 1));
+  --nutui-radius-15: calc(15px * var(--nut-scale-f, 1));
+  --nutui-radius-16: calc(16px * var(--nut-scale-f, 1));
+  --nutui-radius-17: calc(17px * var(--nut-scale-f, 1));
+  --nutui-radius-18: calc(18px * var(--nut-scale-f, 1));
+  --nutui-radius-19: calc(19px * var(--nut-scale-f, 1));
+  --nutui-radius-20: calc(20px * var(--nut-scale-f, 1));
+  --nutui-radius-21: calc(21px * var(--nut-scale-f, 1));
+  --nutui-radius-22: calc(22px * var(--nut-scale-f, 1));
+  --nutui-radius-23: calc(23px * var(--nut-scale-f, 1));
+  --nutui-radius-24: calc(24px * var(--nut-scale-f, 1));
 
   // radius 语义化
   // 内容描述型的详情页面通栏结构
diff --git a/src/styles/theme-default.scss b/src/styles/theme-default.scss
index 8a6e02923c..118f158f1f 100644
--- a/src/styles/theme-default.scss
+++ b/src/styles/theme-default.scss
@@ -227,25 +227,59 @@ page {
   --nutui-color-border-disabled: var(--nutui-color-content-gray-1);
 
   // 字体 ok
-  --nutui-font-size-8: 8px;
-  --nutui-font-size-9: 9px;
-  --nutui-font-size-10: 10px;
-  --nutui-font-size-11: 11px;
-  --nutui-font-size-12: 12px;
-  --nutui-font-size-13: 13px;
-  --nutui-font-size-14: 14px;
-  --nutui-font-size-15: 15px;
-  --nutui-font-size-16: 16px;
-  --nutui-font-size-17: 17px;
-  --nutui-font-size-18: 18px;
-  --nutui-font-size-19: 19px;
-  --nutui-font-size-20: 20px;
-  --nutui-font-size-21: 21px;
-  --nutui-font-size-22: 22px;
-  --nutui-font-size-23: 23px;
-  --nutui-font-size-24: 24px;
-  --nutui-font-size-25: 25px;
-  --nutui-font-size-26: 26px;
+  --nutui-font-size-8: calc(8px * var(--nut-scale-font, var(--nut-scale-f, 1)));
+  --nutui-font-size-9: calc(9px * var(--nut-scale-font, var(--nut-scale-f, 1)));
+  --nutui-font-size-10: calc(
+    10px * var(--nut-scale-font, var(--nut-scale-f, 1))
+  );
+  --nutui-font-size-11: calc(
+    11px * var(--nut-scale-font, var(--nut-scale-f, 1))
+  );
+  --nutui-font-size-12: calc(
+    12px * var(--nut-scale-font, var(--nut-scale-f, 1))
+  );
+  --nutui-font-size-13: calc(
+    13px * var(--nut-scale-font, var(--nut-scale-f, 1))
+  );
+  --nutui-font-size-14: calc(
+    14px * var(--nut-scale-font, var(--nut-scale-f, 1))
+  );
+  --nutui-font-size-15: calc(
+    15px * var(--nut-scale-font, var(--nut-scale-f, 1))
+  );
+  --nutui-font-size-16: calc(
+    16px * var(--nut-scale-font, var(--nut-scale-f, 1))
+  );
+  --nutui-font-size-17: calc(
+    17px * var(--nut-scale-font, var(--nut-scale-f, 1))
+  );
+  --nutui-font-size-18: calc(
+    18px * var(--nut-scale-font, var(--nut-scale-f, 1))
+  );
+  --nutui-font-size-19: calc(
+    19px * var(--nut-scale-font, var(--nut-scale-f, 1))
+  );
+  --nutui-font-size-20: calc(
+    20px * var(--nut-scale-font, var(--nut-scale-f, 1))
+  );
+  --nutui-font-size-21: calc(
+    21px * var(--nut-scale-font, var(--nut-scale-f, 1))
+  );
+  --nutui-font-size-22: calc(
+    22px * var(--nut-scale-font, var(--nut-scale-f, 1))
+  );
+  --nutui-font-size-23: calc(
+    23px * var(--nut-scale-font, var(--nut-scale-f, 1))
+  );
+  --nutui-font-size-24: calc(
+    24px * var(--nut-scale-font, var(--nut-scale-f, 1))
+  );
+  --nutui-font-size-25: calc(
+    25px * var(--nut-scale-font, var(--nut-scale-f, 1))
+  );
+  --nutui-font-size-26: calc(
+    26px * var(--nut-scale-font, var(--nut-scale-f, 1))
+  );
 
   // 字号语义化
   // 徽标文字
@@ -302,22 +336,22 @@ page {
   --nutui-text-align: left;
 
   // space
-  --nutui-spacing-1: 1px;
-  --nutui-spacing-2: 2px;
-  --nutui-spacing-3: 3px;
-  --nutui-spacing-4: 4px;
-  --nutui-spacing-5: 5px;
-  --nutui-spacing-6: 6px;
-  --nutui-spacing-7: 7px;
-  --nutui-spacing-8: 8px;
-  --nutui-spacing-9: 9px;
-  --nutui-spacing-10: 10px;
-  --nutui-spacing-11: 11px;
-  --nutui-spacing-12: 12px;
-  --nutui-spacing-13: 13px;
-  --nutui-spacing-14: 14px;
-  --nutui-spacing-15: 15px;
-  --nutui-spacing-16: 16px;
+  --nutui-spacing-1: calc(1px * var(--nut-scale-f, 1));
+  --nutui-spacing-2: calc(2px * var(--nut-scale-f, 1));
+  --nutui-spacing-3: calc(3px * var(--nut-scale-f, 1));
+  --nutui-spacing-4: calc(4px * var(--nut-scale-f, 1));
+  --nutui-spacing-5: calc(5px * var(--nut-scale-f, 1));
+  --nutui-spacing-6: calc(6px * var(--nut-scale-f, 1));
+  --nutui-spacing-7: calc(7px * var(--nut-scale-f, 1));
+  --nutui-spacing-8: calc(8px * var(--nut-scale-f, 1));
+  --nutui-spacing-9: calc(9px * var(--nut-scale-f, 1));
+  --nutui-spacing-10: calc(10px * var(--nut-scale-f, 1));
+  --nutui-spacing-11: calc(11px * var(--nut-scale-f, 1));
+  --nutui-spacing-12: calc(12px * var(--nut-scale-f, 1));
+  --nutui-spacing-13: calc(13px * var(--nut-scale-f, 1));
+  --nutui-spacing-14: calc(14px * var(--nut-scale-f, 1));
+  --nutui-spacing-15: calc(15px * var(--nut-scale-f, 1));
+  --nutui-spacing-16: calc(16px * var(--nut-scale-f, 1));
 
   // space 语义化
   // 狭小空间内的紧密关联内容
@@ -339,30 +373,30 @@ page {
 
   // radius ok
   --nutui-radius-0: 0px;
-  --nutui-radius-1: 1px;
-  --nutui-radius-2: 2px;
-  --nutui-radius-3: 3px;
-  --nutui-radius-4: 4px;
-  --nutui-radius-5: 5px;
-  --nutui-radius-6: 6px;
-  --nutui-radius-7: 7px;
-  --nutui-radius-8: 8px;
-  --nutui-radius-9: 9px;
-  --nutui-radius-10: 10px;
-  --nutui-radius-11: 11px;
-  --nutui-radius-12: 12px;
-  --nutui-radius-13: 13px;
-  --nutui-radius-14: 14px;
-  --nutui-radius-15: 15px;
-  --nutui-radius-16: 16px;
-  --nutui-radius-17: 17px;
-  --nutui-radius-18: 18px;
-  --nutui-radius-19: 19px;
-  --nutui-radius-20: 20px;
-  --nutui-radius-21: 21px;
-  --nutui-radius-22: 22px;
-  --nutui-radius-23: 23px;
-  --nutui-radius-24: 24px;
+  --nutui-radius-1: calc(1px * var(--nut-scale-f, 1));
+  --nutui-radius-2: calc(2px * var(--nut-scale-f, 1));
+  --nutui-radius-3: calc(3px * var(--nut-scale-f, 1));
+  --nutui-radius-4: calc(4px * var(--nut-scale-f, 1));
+  --nutui-radius-5: calc(5px * var(--nut-scale-f, 1));
+  --nutui-radius-6: calc(6px * var(--nut-scale-f, 1));
+  --nutui-radius-7: calc(7px * var(--nut-scale-f, 1));
+  --nutui-radius-8: calc(8px * var(--nut-scale-f, 1));
+  --nutui-radius-9: calc(9px * var(--nut-scale-f, 1));
+  --nutui-radius-10: calc(10px * var(--nut-scale-f, 1));
+  --nutui-radius-11: calc(11px * var(--nut-scale-f, 1));
+  --nutui-radius-12: calc(12px * var(--nut-scale-f, 1));
+  --nutui-radius-13: calc(13px * var(--nut-scale-f, 1));
+  --nutui-radius-14: calc(14px * var(--nut-scale-f, 1));
+  --nutui-radius-15: calc(15px * var(--nut-scale-f, 1));
+  --nutui-radius-16: calc(16px * var(--nut-scale-f, 1));
+  --nutui-radius-17: calc(17px * var(--nut-scale-f, 1));
+  --nutui-radius-18: calc(18px * var(--nut-scale-f, 1));
+  --nutui-radius-19: calc(19px * var(--nut-scale-f, 1));
+  --nutui-radius-20: calc(20px * var(--nut-scale-f, 1));
+  --nutui-radius-21: calc(21px * var(--nut-scale-f, 1));
+  --nutui-radius-22: calc(22px * var(--nut-scale-f, 1));
+  --nutui-radius-23: calc(23px * var(--nut-scale-f, 1));
+  --nutui-radius-24: calc(24px * var(--nut-scale-f, 1));
 
   // radius 语义化
   // 内容描述型的详情页面通栏结构
diff --git a/src/styles/variables.scss b/src/styles/variables.scss
index e111fa0d27..05c8c4ada1 100644
--- a/src/styles/variables.scss
+++ b/src/styles/variables.scss
@@ -1,9 +1,11 @@
 // ----------------------------------------------------
 // 缩放系数
-:root {
+:root,
+page {
   --nut-scale-f: 1;
   --nut-scale-font: var(--nut-scale-f, 1);
   --nut-scale-icon: var(--nut-scale-f, 1);
+
   // ---- icon size ----
   --nut-icon-height: calc(
     16px * var(--nut-scale-icon, var(--nut-scale-f, 1))
diff --git a/src/utils/scale-f.ts b/src/utils/scale-f.ts
index 104e3f1634..c05cfc4ee6 100644
--- a/src/utils/scale-f.ts
+++ b/src/utils/scale-f.ts
@@ -39,10 +39,6 @@ export type ScaleProfile = 'standard' | 'large' | 'elderly'
 export type ScaleScene = 'layout' | 'font' | 'icon' | 'lego'
 export type ScaleDevice = 'phone' | 'pad'
 
-/** 视口大于等于该宽度时按平板处理 */
-const PAD_BREAKPOINT = 600
-/** 平板默认整体缩放倍数 */
-const PAD_SCALE = 1.2
 /** 大字模式下仅 font 场景的相对倍率 */
 const LARGE_FONT_RATIO = 1.15
 /** 老年模式下 font/icon/lego 场景的相对倍率 */
@@ -88,7 +84,7 @@ function formatScaleValue(nextScale: number) {
 /** 根据屏宽粗略区分 phone / pad */
 function getCurrentDevice(): ScaleDevice {
   if (!canUseDom) return 'phone'
-  return window.innerWidth >= PAD_BREAKPOINT ? 'pad' : 'phone'
+  return window.innerWidth >= 600 ? 'pad' : 'phone'
 }
 
 /** 在 profile 与 scene 维度上叠加额外倍率（与全局 scale 相乘） */
@@ -124,8 +120,8 @@ function getScaleByViewport() {
 
   if (!deviceWidth) return 1
 
-  if (deviceWidth >= PAD_BREAKPOINT) {
-    return PAD_SCALE
+  if (deviceWidth >= 600) {
+    return 1.2
   }
 
   if (deviceWidth >= 375 && deviceWidth < 600) {