tmui-cli 2.0.2 → 2.0.4

package/data/uni-app-x-docs/css/common/at-rules.md

@@ -0,0 +1,293 @@
+# At-rules
+
+<!-- CSSJSON.at_rules_values.compatibility -->
+
+不支持的css功能，并不影响业务开发。因为css本质是一种编写元素的样式属性的一种描述性写法。元素的所有样式设置，都可以脱离css这种写法，由API完成。
+
+- `@keyframes关键帧动画`，在App平台，可以使用API方式实现，暂不支持通过css方式实现。详见[UniElement的animate方法](../../dom/unielement.md#animate)
+
+## 字体 @font
+
+@font-face 这个at-rule用于自定义字体。
+
+以下示例为加载一个字体文件，加载成功后，在text组件上设置相应的字体名称就可以按该字体渲染文字内容：
+
+```html
+<style>
+@font-face {
+    font-family: AlimamaDaoLiTiOTF;
+    src: url('/static/font/AlimamaDaoLiTi.ttf');
+}
+</style>
+```
+
+### 字体图标@iconfont
+
+@font-face 还有一个常见用途是加载字体图标。
+
+web中加载字体图标，有 `unicode直显` 和 `伪元素+content` 2种方式。
+
+由于App平台不支持伪元素，所以跨平台的写法就是 unicode直显。
+
+有些字体图标网站导出代码时，默认使用`伪元素+content`方式，需要注意这个坑，改用 unicode直显。
+
+unicode直显方式的性能优于伪元素方式，但源码阅读的直观性略差。
+
+注意text组件直显unicode，需要用 <code v-pre>{{'\u'}}</code> 的方式包裹。
+另外注意实体字符和unicode的区别。
+
+```html
+<style>
+  @font-face {
+  font-family: UniFontFamily;
+  src: url('./uni.ttf');
+}
+</style>
+
+<!-- 直接在 text 里放 Unicode 实体 -->
+<text style="font-family: UniFontFamily;">{{'\ue100'}}</text>
+<!-- 使用实体字符 -->
+<text style="font-family: UniFontFamily;">&#xe100;</text>
+```
+
+### App平台内置字体图标 uni-icon @uniicon
+> HBuilderX4.33+
+
+app平台的内置组件和API用到了一些字体，同时共享出来给开发者，也可以使用这些内置字体。
+
+内置 `uni-icon` 字体图标示例：
+```html
+<template>
+  <!-- 静态字体图标 -->
+  <text style="font-family: uni-icon;font-size: 64px;">{{'\uEA08'}}</text>
+  <!-- 动态赋值字体图标 -->
+  <text style="font-family: uni-icon;font-size: 64px;">{{uniIcon}}</text>
+</template>
+
+<script setup lang="uts">
+  const uniIcon = ref<string>('\ue601')
+</script>
+```
+
+内置 `uni-icon` 包括以下图标：
+
+<div class="iconSample">
+  <div class="iconContainer">
+    <div class="iconItem" v-for="item in uniIconItems" :key="item.code">
+      <div class="iconPreview"><span class="icon" v-html="item.entity"></span></div>
+      <button
+        type="button"
+        class="copyIconCode"
+        :data-copy="item.code"
+        :title="'复制 ' + item.code"
+        :aria-label="'复制 ' + item.name + ' 图标编码'"
+        @click="copyUniIconCode"
+      >
+        <span class="code">{{ item.code }}</span>
+        <span class="copyText">复制</span>
+      </button>
+      <span class="name">{{ item.name }}</span>
+    </div>
+  </div>
+</div>
+
+### Tips
+- `字体路径`支持**网络**和**本地**，本地字体请注意放在项目或uni_modules的static目录下。
+- 全平台均支持ttf和otf字体格式，其他字体格式在不同平台支持度有差异，另见[css字体](../font-family.md)
+- @font-face是不可编程的，如需编程控制，另见[uni.loadFontFace](../../api/load-font-face.md)
+- @font-face下仅支持 font-family 和 src，不支持通过font-weight 、 font-style等属性控制该字体统一样式，如果需要设置字体样式，请在具体的text组件上使用class或style定义字体样式。
+
+<script>
+export default {
+  data() {
+    return {
+      uniIconItems: [
+        { entity: '&#xE600;', code: '\\uE600', name: 'forward' },
+        { entity: '&#xE601;', code: '\\uE601', name: 'back' },
+        { entity: '&#xE602;', code: '\\uE602', name: 'share' },
+        { entity: '&#xE604;', code: '\\uE604', name: 'favorites' },
+        { entity: '&#xE605;', code: '\\uE605', name: 'home' },
+        { entity: '&#xE606;', code: '\\uE606', name: 'more' },
+        { entity: '&#xE650;', code: '\\uE650', name: 'close' },
+        { entity: '&#xE661;', code: '\\uE661', name: 'down' },
+        { entity: '&#xEA01;', code: '\\uEA01', name: 'circle' },
+        { entity: '&#xEA03;', code: '\\uEA03', name: 'info' },
+        { entity: '&#xEA04;', code: '\\uEA04', name: 'info circle' },
+        { entity: '&#xEA06;', code: '\\uEA06', name: 'success' },
+        { entity: '&#xEA07;', code: '\\uEA07', name: 'success circle' },
+        { entity: '&#xEA08;', code: '\\uEA08', name: 'success no circle' },
+        { entity: '&#xEA0B;', code: '\\uEA0B', name: 'cancel circle' },
+        { entity: '&#xEA0F;', code: '\\uEA0F', name: 'warn' },
+        { entity: '&#xEA14;', code: '\\uEA14', name: 'clear' },
+        { entity: '&#xEA19;', code: '\\uEA19', name: 'download' },
+        { entity: '&#xEA1E;', code: '\\uEA1E', name: 'waiting' },
+        { entity: '&#xEA23;', code: '\\uEA23', name: 'search' }
+      ]
+    }
+  },
+  methods: {
+    copyUniIconCode(event) {
+      const button = event.currentTarget
+      const value = button.getAttribute('data-copy')
+      const setCopied = () => {
+        const text = button.querySelector('.copyText')
+        button.classList.add('isCopied')
+        if (text) text.textContent = '已复制'
+
+        clearTimeout(button._copyTimer)
+        button._copyTimer = setTimeout(() => {
+          button.classList.remove('isCopied')
+          if (text) text.textContent = '复制'
+        }, 1200)
+      }
+      const fallbackCopy = () => {
+        const input = document.createElement('textarea')
+        input.value = value
+        input.setAttribute('readonly', '')
+        input.style.position = 'fixed'
+        input.style.opacity = '0'
+        document.body.appendChild(input)
+        input.select()
+        try {
+          document.execCommand('copy')
+        } catch (error) {}
+        document.body.removeChild(input)
+        setCopied()
+      }
+
+      if (navigator.clipboard && navigator.clipboard.writeText) {
+        navigator.clipboard.writeText(value).then(setCopied, fallbackCopy)
+      } else {
+        fallbackCopy()
+      }
+    }
+  }
+}
+</script>
+
+<style type="text/css">
+@font-face {
+    font-family: 'uni-icon';
+    src: url(data:font/ttf;charset=utf-8;base64,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) format('truetype');
+}
+.iconSample {
+  margin: 18px 0 28px;
+  padding: 18px;
+  background: #f7f9fc;
+  border: 1px solid #e6ebf2;
+  border-radius: 8px;
+}
+.iconSample .iconContainer {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
+  gap: 14px;
+}
+.iconSample .iconItem {
+  min-height: 152px;
+  padding: 16px 12px 14px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  background: #fff;
+  border: 1px solid #e8edf4;
+  border-radius: 8px;
+  box-shadow: 0 2px 8px rgba(31, 45, 61, 0.05);
+  transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
+}
+.iconSample .iconItem:hover {
+  border-color: #c8d8f0;
+  box-shadow: 0 8px 22px rgba(31, 45, 61, 0.1);
+  transform: translateY(-2px);
+}
+.iconSample .iconPreview {
+  width: 64px;
+  height: 64px;
+  margin-bottom: 12px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: #f3f7ff;
+  border-radius: 8px;
+}
+.iconSample .icon {
+  font-family: uni-icon;
+  font-size: 38px;
+  line-height: 1;
+  display: block;
+}
+.iconSample .copyIconCode {
+  width: 100%;
+  min-height: 34px;
+  padding: 0 8px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  appearance: none;
+  cursor: pointer;
+  background: #f8fafc;
+  border: 1px solid #dce4ef;
+  border-radius: 6px;
+  color: #334155;
+  font: inherit;
+  transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease;
+}
+.iconSample .copyIconCode:hover {
+  background: #eef5ff;
+  border-color: #b9ccef;
+  color: #1f56c5;
+}
+.iconSample .copyIconCode:focus {
+  outline: 2px solid rgba(47, 95, 208, 0.28);
+  outline-offset: 2px;
+}
+.iconSample .copyIconCode.isCopied {
+  background: #edf8f1;
+  border-color: #9bd9ae;
+  color: #198754;
+}
+.iconSample .code {
+  font-size: 13px;
+  font-family: Consolas, Monaco, "Andale Mono", monospace;
+  font-weight: 600;
+  display: block;
+}
+.iconSample .copyText {
+  flex: 0 0 auto;
+  font-size: 12px;
+  color: inherit;
+}
+.iconSample .name {
+  width: 100%;
+  margin-top: 10px;
+  font-size: 13px;
+  line-height: 18px;
+  color: #475569;
+  text-align: center;
+  display: block;
+  word-break: break-word;
+}
+</style>
+
+## 媒体查询 @media
+
+`@media` 用于根据媒体查询结果应用一组样式。Web 和小程序平台支持媒体查询，具体能力由对应平台决定。
+
+HBuilderX 5.25+，App 平台蒸汽模式支持通过 `prefers-color-scheme` 媒体查询来适配应用暗黑主题：
+
+```css
+.page {
+  background-color: #ffffff;
+}
+
+@media (prefers-color-scheme: dark) {
+  .page {
+    background-color: #111111;
+  }
+}
+```
+
+详见 [暗黑主题适配教程](https://doc.dcloud.net.cn/uni-app-x/api/theme-change.html)。
+
+目前App平台`@media`暂不支持尺寸、宽高、屏幕方向、分辨率等其他媒体特性的匹配，如需适配宽屏，请使用专门的`<match-media>组件`，[详见](../../component/match-media.md)。

package/data/uni-app-x-docs/css/common/color.md

@@ -0,0 +1,9 @@
+# 颜色 @color
+
+css中颜色的表达方式及兼容性表格
+
+<!-- CSSJSON.color_values.compatibility -->
+
+**注意**
+
+- 在pages.json中，仅支持设置16进制颜色hex-color。

package/data/uni-app-x-docs/css/common/function.md

@@ -0,0 +1,161 @@
+# CSS 方法
+
+## var
+
+<!-- CSSJSON.variables_values.compatibility -->
+
+> uni-app x 4.0+ 提供内置 CSS 变量。
+> uni-app x 4.52+ 全平台提供了安全区域相关 CSS 变量 --uni-safe-area-inset-* 。
+> uni-app x 4.71+ App平台补充了自定义css变量
+> uni-app x 5.25+ App平台 蒸汽模式 useComputedStyle 支持 css 变量。同时基于useComputedStyle的input、textarea、loading也支持了css变量
+
+### 预置的 CSS 变量 @preset-var
+
+- `--status-bar-height`的使用场景：当设置pages.json中的 `"navigationStyle":"custom"` 取消原生导航栏后，由于窗体为沉浸式，占据了状态栏位置。此时可以使用一个高度为 `var(--status-bar-height)` 的 view 放在页面顶部，避免页面内容出现在状态栏上。App平台自4.61版本开始自动响应状态栏高度的变化动态调整页面布局
+- `--uni-safe-area-inset-xxx` 的使用场景：
+  1. `--uni-safe-area-inset-xxx`为安全区域边界到`position: fixed;`定位相对的区域边界距离。其中安全区域已规避LeftWindow、TopWindow、RightWindow、NavigationBar、TabBar。
+  2. 在 App 和 小程序 平台，pages.json中配置的导航栏和tabbar是原生的，页面内容只能在这个区域中间。而在 Web 端，不存在原生导航栏和 tabBar，由前端 view 模拟，所以页面内容如果使用绝对定位的话，就会和 Web 平台的导航栏、tabbar重叠。为了避免重叠，可以使用`--uni-safe-area-inset-xxx`系列css变量来设置位置。例如，在有tabbar页面的需要设置了一个固定位置的居底 view，如果单纯的在css中设置 bottom 为 0 ，那么在小程序和 App 端是在 tabBar 上方，但在 Web 端会与 tabBar 重叠。此时可设置 bottom 为 css变量 `--uni-safe-area-inset-bottom`，不管在哪个端，都是固定在 tabBar 上方。因为该值在 Web 平台，会自动避让导航栏高度。
+  3. Web 平台有 LeftWindow 、TopWindow、RightWindow 等宽屏适配时的页面，绝对定位时也需要避让，避免把内容显示在其他页面上。`--uni-safe-area-inset-xxx` 系列css变量也已经内部自动处理各种Window。
+  4. 除了兼容处理导航栏和tabbar、兼容LeftWindow等宽屏Window之外，`--uni-safe-area-inset-xxx` 系列css变量，还兼容了手机屏幕的安全区，避让了底部手势横条、摄像头挖孔区等。确保使用了本系列变量的内容不会和屏幕上这些内容重叠。
+
+- `--window-top` 和 `--window-bottom` 已经废弃，推荐使用 `--uni-safe-area-inset-top` 和 `--uni-safe-area-inset-bottom` 替代。废弃原因是：
+  1. 这2个css变量仅处理了导航栏和tabbar，未处理LeftWindow等Window、未处理手机屏幕的底部手势横条和摄像头挖孔区等内容。
+  2. 这2个css变量未包含left、right，宽屏适配和横屏时无法友好兼容
+  3. 这2个css变量的命名未包含 `uni` 前缀，容易和开发者的代码中的自定义css变量命名冲突。
+- 小程序平台目前支持 `--status-bar-height` 和 `--uni-safe-area-inset-bottom`，其他css变量均为0px。
+
+### 自定义 CSS 变量 @customvar
+> HBuilderX4.71起 App平台支持自定义变量
+
+CSS自定义变量规范参考[MDN Reference](https://developer.mozilla.org/zh-CN/docs/Web/CSS/--*)
+
+**注意：**
+App平台相比web平台，有以下差异：
+- 定义变量时不支持值为var(--*) ex: --color: var(--color)
+- 回退值不支持var(--*) ex: --height: var(--height1 , var(--height2))
+- App平台 VDOM模式transtion暂不支持使用var，App平台 蒸汽模式仅transtion长写属性支持var
+- App平台 VDOM模式的部分组件的样式不支持CSS变量：input、textarea 的 placeholder-style、placeholder-class；picker-view 的 indicator-style、indicator-class、mask-style、mask-class。
+- 蒸汽模式的部分组件使用了useComputedStyle，这类组件的样式支持CSS变量需HBuilderX 5.25+，包括input、textarea、loading组件的class。
+- App平台不支持:root伪类。蒸汽模式可以使用page选择器替代。vdom模式需要自行在页面根元素或合适的父级元素的class中定义css变量，以便在子元素生效。
+
+<!-- CSSJSON.variables_values.example -->
+
+## env @env
+
+<!-- CSSJSON.function-env_values.compatibility -->
+
+内置 CSS 环境变量，即`env()`。
+
+**注意：**\
+env()主要用于在App平台补齐 web 规范。但浏览器的env不会考虑 uni-app x 的pages.json中配置的顶部导航栏和底部tabbar。\
+所以实际开发中处理安全区时，更推荐使用本文档上方的 [--uni-safe-area-inset-xxx 系列css变量](#var)。
+
+### 语法
+```css
+/* Using the four safe area inset values with no fallback values */
+env(safe-area-inset-top);
+env(safe-area-inset-right);
+env(safe-area-inset-bottom);
+env(safe-area-inset-left);
+
+/* Using them with fallback values */
+env(safe-area-inset-top, 20px);
+env(safe-area-inset-right, 20px);
+env(safe-area-inset-bottom, 20px);
+env(safe-area-inset-left, 20px);
+```
+
+### uni-app x 兼容性
+#### app平台
+
+> app平台的 CSS 环境变量是页面相关的，即根据 uvue 页面原生导航栏和tabBar的配置自动计算。
+
+app平台仅以下CSS属性支持使用环境变量
+- padding （不支持缩写，只支持展开值，明确到具体方向，比如 padding-left）
+- margin（不支持缩写，只支持展开值，明确到具体方向，比如 margin-left）
+- width
+- height
+- top
+- right
+- bottom
+- left
+
+#### web平台
+
+web平台的 CSS环境变量是应用全局值，由浏览器自动计算，与 uvue 页面无关，无法干预处理对导航栏、tabbar、leftWindow、TopWindow的兼容支持。所以不推荐使用。建议使用跨端的`--uni-safe-area-inset-xxx` 系列css变量。
+
+web平台的 CSS环境变量规范参考[MDN Reference](https://developer.mozilla.org/zh-CN/docs/Web/CSS/env)
+
+<!-- CSSJSON.function-env_values.example -->
+
+## rgb
+
+<!-- CSSJSON.function-rgb_values.description -->
+
+<!-- CSSJSON.function-rgb_values.compatibility -->
+
+<!-- CSSJSON.function-rgb_values.example -->
+
+## rgba
+
+<!-- CSSJSON.function-rgba_values.description -->
+
+<!-- CSSJSON.function-rgba_values.compatibility -->
+
+<!-- CSSJSON.function-rgba_values.example -->
+
+## url
+
+<!-- CSSJSON.function-url_values.description -->
+
+<!-- CSSJSON.function-url_values.compatibility -->
+
+<!-- CSSJSON.function-url_values.example -->
+
+
+## calc @calc
+> uni-app x 5.27+ App平台 蒸汽模式支持calc方法
+
+calc() 函数允许在声明 CSS 属性值时执行计算。
+
+### 语法
+`calc()` 函数使用表达式作为参数，并将表达式的计算结果作为属性值。表达式可以由以下运算符组合而成，并遵循标准运算符的处理规则。
+
+- `+`：加法。
+- `-`：减法。
+- `*`：乘法，乘数中至少有一个是 `<number>`。
+- `/`：除法，除数（`/` 右侧的数）必须是 `<number>`。
+
+表达式中的运算对象可以使用任意 `<length>` 值，也可以混用不同单位。必要时，可以使用括号控制计算顺序。
+
+`+` 和 `-` 运算符的两边必须有空白字符。例如，`calc(50% -8px)` 会被解析为无效表达式，结果相当于一个百分比后跟一个负数长度值；带空白的有效表达式 `calc(8px + -50%)` 则会被解析为一个长度、一个加号和一个负百分比。
+`*` 和 `/` 运算符前后不要求空白字符，但为了保持格式统一，仍然建议添加空白。
+
+单位必填：在 calc() 中，像 10 这样的纯数字不能直接与长度单位相加（例如 calc(100% - 10) 是错误的，必须写成 calc(100% - 10px)）。
+混合单位：它支持跨单位计算，比如用百分比减去固定像素（100% - 20px）
+优先级控制：乘除法的优先级高于加减法，如果你想先算加减，必须用圆括号 () 括起来，例如 calc((100% - 20px) / 2)
+
+### 形式化语法
+```css 
+<calc()> =
+  calc( <calc-sum> )
+
+<calc-sum> =
+  <calc-product> [ [ '+' | '-' ] <calc-product> ]*
+
+<calc-product> =
+  <calc-value> [ [ '*' | / ] <calc-value> ]*
+
+<calc-value> =
+  <number> |
+  <dimension> |
+  <percentage> |
+  ( <calc-sum> )
+```
+
+**注意：**
+App平台相比web平台，calc有以下差异：
+- `calc`中只支持`var` 方法, 不支持 `<frequency>`, `<angle>`, `<time>`, `<color-function>`,`<resolution>`, `<flex>`
+- 支持的属性`<width>`,`<height>`,`<padding-*>`,`<maring-*>`,`<border-*>`,`<top>`,`<left>`,`<right>`,`<bottom>`,`<flex-basis>`
+- `border-*-radius`目前不支持两值，如：border-bottom-right-radius: 10px 20px; 如果使用了 `calc` 且含百分比会根据width进行计算，如：border-bottom-right-radius: calc(50%); 且宽为 40px 计算之后的样式为:border-bottom-right-radius: 20px;
+- `border-width-*` 目前不支持百分比，该属性的calc也不支持

package/data/uni-app-x-docs/css/common/length.md

@@ -0,0 +1,89 @@
+## 长度单位 @length
+
+长度单位用于定义元素在页面中的尺寸、间距、位置和大小等视觉表现。
+
+### 类型  
+
+#### length @lengthvalue
+CSS 长度数据类型 `<length>` 表述一个表示距离值，由一个 `<number>` 和一个长度单位构成，在单位的字面值与数字之间没有空格。  
+许多 CSS 属性会用到长度，比如 [width](../width.md)、[height](../height.md)、[margin](../margin.md)、[padding](../padding.md)、[border-width](../border-width.md) 等。
+
+**注意**  
+- App平台长度 `<length>` 可以不设置单位，不设置单位时当做 px 处理
+- Web平台长度 `<length>` 必须设置单位，不设置单位时当做无效值处理
+
+#### percentage @lengthpercentage
+CSS 长度数据类型 `<percentage>` 表述一个百分比值。许多 CSS 属性 可以取百分比值，用以根据父元素来确定大小。百分比值由一个`<number>`具体数值后跟着%符号构成，在%和数值之间是不允许有空格。  
+许多 CSS 属性支持使用百分比，如 [width](../width.md)、[height](../height.md)、[margin](../margin.md)、[padding](../padding.md) 等。
+
+
+### 兼容性
+<!-- CSSJSON.length_values.compatibility -->
+
+### rpx
+`rpx` 是一个以设备750px为基准的单位，`750rpx`即为屏幕宽度，相当于100%；`375rpx`即为屏幕一半宽度，相当于50%。
+
+因为很多设计稿是以750px为基准出图的，所以使用rpx可以比较好的在不同屏幕宽度下还原设计稿。
+
+但是，机械的照搬设计图，是无法自适应不同宽度的屏幕的。尤其是pc宽屏、pad、折叠屏、横屏。
+
+在移动互联网早期，手机屏幕宽度都差不多，rpx曾经广泛流行。但随着宽屏适配需求越来越强，rpx使用范围已经非常少了。
+
+有些开发者误以为只有rpx才能在适配好大小屏幕，他们担心使用px，会在小屏幕上超级大。这个理解恰恰反了。
+
+其实px不是物理像素，px也是逻辑像素。正常使用px，在所有屏幕上都有合适的大小。\
+比如不设置font-size时，text组件默认字号是16px，这个字号在各种大小的屏幕上都和OS系统默认字号大小一致。\
+设置了rpx，反而在大屏幕上，比如pad、折叠屏、横屏、pc宽屏上，字体显得特别的大。
+
+除了宽屏适配问题，rpx的性能和精度也不如px，但优于百分比。
+
+不管是rpx还是百分比单位，都需要在运行时计算，转换为实际的px才能渲染。
+
+rpx需要根据屏幕宽度做一次计算转换；而百分比需要根据父容器的宽度做计算转换。屏幕宽度是固定的，取一次即可。父容器宽度的计算更复杂，所以百分比单位比rpx的转换逻辑更耗时。
+
+**所以推荐开发者尽量使用px。**
+
+- 在需要根据屏幕宽度适应的场景，使用rpx
+- 在需要根据父容器宽度按百分比适应的场景，使用百分比
+
+有些开发者，在font-size，height、padding、margin、边框、阴影，都在使用rpx。这是非常不推荐的行为，性能差且屏幕适配能力差。
+
+rpx仅适用于需要根据屏幕宽度变化的view或image的宽度width设置。
+
+那么不用rpx的话，设计师如何出图、如何切图？
+
+推荐设计师在设计软件中使用1x画布，按390px出普通竖屏图、按834px或1280px出宽屏图。
+
+竖屏图中需根据情况标注不同内容：
+1. 弹性容器，即屏幕变宽后，哪块区域向右填充。填充常使用`flex:1`铺满剩余空间
+2. 普通限宽小组件，比如按钮，就按设计师标准的px做，图中要求60px宽，那就直接写`width:60px`。
+3. 字体规范，默认字体不标，就选用系统默认字体（16px），然后设几个固定字号规范，较大、大、较小、小，都是多少px都要说明。不要让设计图随意给出无限种字号。
+4. 间距、圆角规范。同样固定几个枚举值，整个应用所有css中的单位都在这几个固定的值域中。
+
+宽屏图在大多数情况就是一个示意图，无需切图。
+除非有特殊的图片，在宽屏下要请求不同的图源、设不同的宽度，此时可放在[match-media组件](../../component/match-media.md)中，为不同的屏幕宽度设不同的内容宽度。
+
+宽屏适配指南[另见](../../adapt.md)
+
+如果坚持不适配宽屏，那么为了防止在宽屏上出问题，可以在app.uvue的page选择器中全局设置页面宽度的max-width，但同时仍需放弃rpx。（注意app平台需蒸汽模式才支持page选择器）
+
+### 不同单位的差异
+- 长度默认值差异
+	* App平台长度 `<length>` 可以不设置单位，不设置单位时当做 px 处理
+	* Web平台长度 `<length>` 必须设置单位，不设置单位时当做无效值处理 \
+	App平台允许设置纯数字是为了性能考虑，在需要频繁更改长度时，使用纯数字会比"数字+px"稍微快一点。\
+	日常开发为了更好的跨端兼容，还是推荐给长度 `<length>` 指定明确单位。
+
+- 单位精度差异
+	- px、rpx属于逻辑像素，在不同dpi的设备上，需要转换为物理像素。当产生浮点数时，由于精度保留策略的不同，在不同浏览器和手机OS，可能造成细微的误差。\
+	尤其是浏览器对于小数点的px兼容不够好，早期浏览器很难正常显示`0.5px`。但app可以正常显示。\
+	另外`rpx`和`百分比`，比`px`更容易产生浮点数，所以**如果px能满足需求，尽量不用rpx和百分比**。
+
+- 性能差异
+   * 性能 px > rpx > 百分比。rpx需要根据屏幕宽度换算为px，而百分比需要根据父容器的高或宽换算为px，计算复杂度高于rpx。
+
+
+
+## 字体大小单位
+
+<!-- CSSJSON.font-length_values.compatibility -->

package/data/uni-app-x-docs/css/common/selector.md

@@ -0,0 +1,48 @@
+# 选择器 @selector
+
+- web和小程序支持page元素选择器，以替代body元素选择器。
+- web端可以使用`html`、`body`、`:root`等选择器。由于页面的css样式隔离，且html节点并未添加data-xxx属性，`html`、`:root`写在页面style内无效，只能写在App.uvue内。
+- 深度选择器 `:deep()/::v-deep` 用法参考 [单文件 style - 深度选择器](/vue/index#scoped) 文档。
+
+<!-- CSSJSON.selector_values.compatibility -->
+
+::: warning 注意
+1. 选择器声明的变化可能会导致元素重新绘制。为了减少选择器变化引起的 DOM 更新数量，**当前只支持：CSS 声明的多个选择器中最后一个规则的变更对 DOM 的更新**。
+2. :active伪类来实现点击态，很容易触发，并且滚动或滑动时点击态不会消失，体验较差。小程序平台均给view组件引入了`hover-class`，考虑到跨端兼容和体验，建议使用 `hover-class` 属性来实现点击态效果。[详见](../../component/view.md#hover-class)
+3. 不推荐使用伪元素来创建不占宽度的边框，W3C标准推荐使用 box-sizing 来控制边框是否占宽度。
+4. 关系类选择器（分组选择器、直接子代选择器、后代选择器、一般兄弟选择器、紧邻兄弟选择），无法在编译期处理，必须运行时动态计算，在App上有额外的性能损耗。推荐尽量使用简单的选择器来解决问题。
+:::
+
+## 示例
+
+```vue
+<template>
+  <view :class="docBody">
+    <text :class="rowDesc">描述内容</text>
+  </view>
+</template>
+
+<style>
+  .doc-body1 .row-desc1 {
+    color: #ff0000;
+  }
+  .doc-body1 .row-desc2 {
+    color: #0000ff;
+  }
+  .doc-body2 .row-desc1 {
+    color: #00ff00;
+  }
+</style>
+
+<script setup lang="uts">
+  const rowDesc = ref('row-desc1')
+  const docBody = ref('doc-body1')
+</script>
+```
+
+以上代码示例，当我们把 `rowDesc` 变量从 `row-desc1` 变为 `row-desc2` 时，会更新 `text` 节点样式，但是如果把 `docBody` 变量从 `doc-body1` 变为 `doc-body2`，是不会更新 `text` 节点样式的。\
+因为 `doc-body` 不是最后一个选择器，非末尾的选择器变更有可能影响很多 DOM 元素，从而影响到渲染性能。
+
+::: warning 注意
+App端相邻选择器暂不支持动态新增或删减节点，为了优化性能减少一些重新渲染工作，示例 [https://issues.dcloud.net.cn/pages/issues/detail?id=1452](https://issues.dcloud.net.cn/pages/issues/detail?id=1452)
+:::