同一份代码，为什么在别人手机上全乱了
你有没有遇到过这种崩溃时刻：在自己的模拟器上调得好好的页面，按钮大小、间距都很完美，可一换到别人的手机上，按钮要么撑爆屏幕，要么缩成一团，文字也挤作一坨。你检查了半天布局，发现哪儿都没错。
问题其实出在一个最不起眼的地方：你给 size 写尺寸时，用错了单位。在华为鸿蒙系统的 ArkUI 框架里，页面适配不是靠什么高深的框架，而是从你写下第一个宽高数字时就开始了。今天用华为仓颉编程语言把这件事讲透，你会明白：size 属性别乱写，单位选对，适配就成了一大半。
先认识 size 家族：width、height 和 size
设置尺寸的属性其实很简单，就三个。`width` 设宽度，`height` 设高度，如果想一次性把宽高都设了，用 `size`：
Text("登录") .width(120) .height(48) // 等价于一次设置 Text("登录") .size(width: 120, height: 48)
跟它们一起出现的，还有管间距的 `padding`（内边距）和 `margin`（外边距）。这几个属性你应该都见过，看起来平平无奇。但真正的玄机不在这些函数名上，而在你传给它们的那个数字，到底是什么单位。
关键转折：那个数字，默认是 vp 不是像素
这是全篇最重要的一句话：当你写 `width(120)` 时，这个 120 默认的单位不是物理像素，而是 vp。
vp 是虚拟像素，也叫屏幕密度无关像素。它的妙处在于：系统会根据每台设备的屏幕密度，自动把 vp 换算成对应的物理像素。同样写 120 vp，在高清屏上系统会用更多物理像素去渲染，在普通屏上用较少的，但你肉眼看到的实际大小是一致的。
// 这两种写法完全等价，120 默认就是 vp .width(120) .width(120.vp)
这就是适配的基石。你只管按一个标准屏幕去写 vp 值，跨设备的换算交给系统。所以第一条铁律就是：日常写尺寸，用 vp，也就是直接写数字就行。
千万要当心：用 px 写死尺寸
既然默认是 vp，那为什么还会乱？因为有人会手动改成 px。
px 是物理像素，是实打实的屏幕点。一旦你写了 `width(120.px)`，就等于钉死了 120 个物理点，系统不再帮你换算。结果就是：在高密度屏幕上，120 个物理点非常小，按钮缩成一团；在低密度屏幕上又偏大。这正是开头那个页面错乱的元凶。
// 危险写法：写死物理像素，换屏幕必乱 .width(120.px)
记住：除非你有非常特殊的、需要精确对齐物理像素的需求，否则不要用 px 写布局尺寸。把 px 当成一个需要警惕的信号，看到它就该问自己一句，这里真的需要写死吗。
percent：让组件跟着容器一起伸缩
vp 解决了密度差异，但屏幕还有宽窄之分。手机窄、平板宽，固定的 vp 值在宽屏上可能显得太小。这时候请出第二个单位，percent，百分比。
百分比是相对父容器的尺寸来计算的。写 `width(100.percent)` 就是占满父容器的全部宽度，写 50 就是占一半：
// 按钮永远占满容器宽度，无论屏幕多宽 Button("提交") .width(100.percent) .height(48)
这是弹性适配的关键。一个登录按钮如果用固定 vp，在平板上会显得很局促；改成百分比宽度，它就能在任何宽度的屏幕上自动撑满，始终保持合理的比例。常见的做法是：高度用 vp 固定，宽度用 percent 弹性，兼顾稳定和适配。
fp：文字大小要单独对待
还有一个容易忽略的单位，专门给文字用，叫 fp，字体像素。
fp 和 vp 很像，都会随屏幕密度换算，但它多了一层：它还会跟随用户在系统设置里调整的字体大小。也就是说，一个把系统字体调大的视障用户或老年用户，你用 fp 设置的文字会自动变大，而用 vp 设置的不会。
所以设置字号时，优先用 fp，这是无障碍适配的体现：
Text("欢迎登录") .fontSize(18.fp)
一句话区分：布局尺寸用 vp，文字大小用 fp。这是一个很能体现专业度的细节。
一张表理清五个单位怎么选
把鸿蒙支持的五种长度单位放一起，你就知道什么时候用哪个了：
·vp：虚拟像素，随屏幕密度换算，写布局尺寸的默认选择
·px：物理像素，写死不换算，除非精确对齐物理点，否则别用
·fp：字体像素，随密度也随系统字体设置，专门给文字用
·percent：百分比，相对父容器，做弹性宽高
·lpx：逻辑像素，按设计稿宽度等比缩放，适合严格还原设计稿的场景
实战中最常用的就是前三个：布局用 vp、弹性用 percent、文字用 fp。把这个组合用熟，绝大多数适配问题在你写下尺寸的那一刻就已经解决了。
小结：适配是写出来的，不是补出来的
很多人把适配当成做完页面之后再去打补丁的活，到处加判断、改尺寸。其实适配的起点，就在你给 size 写下第一个数字的时候。
记住这几条就够了：布局尺寸默认用 vp，直接写数字；需要弹性就用 percent；文字一律用 fp；看到 px 就警惕。把单位选对，你的页面从写下的那一刻起就是适配的，根本不需要事后补救。size 属性别乱写，说的就是这个道理。
