nvue中width: 100%无效是因为原生渲染引擎不支持百分比单位，仅识别rpx、px或flex值；应使用flex: 1替代，且父容器需有明确高度，或用rpx动态计算比例。
nvue中width: 100%为什么无效
因为nvue不解析百分比单位，width: 100%、height: 50%这类写法会被直接忽略，不是bug，是原生渲染引擎的硬性限制。它只认绝对单位（rpx、px）或Flex弹性值（flex: 1）。
用flex: 1替代百分比高度/宽度
这是最常用也最稳妥的方案。nvue默认根容器是flex-direction: column，子元素设flex: 1就能撑满剩余空间。
-
flex: 1在nvue中等效于“占满可用空间”，比height: 100%更可靠 - 横向布局需显式设
flex-direction: row，否则flex: 1仍按列分配 - 多个子元素共用
flex: 1会均分空间；写成flex: 2和flex: 1则按2:1比例分配 - 注意父容器必须有明确高度（如
height: 100vh或flex: 1向上透传），否则flex: 1无参照
动态计算rpx值模拟百分比效果
当必须按比例缩放（比如“占屏幕宽的30%”），就得手动算：uni.getSystemInfoSync().screenWidth拿到设备宽度，再乘以比例转成rpx。
- 750rpx = 屏幕宽度，所以30%宽 =
0.3 * 750=225rpx，直接写死即可 - 如果设计稿基准不是750px，需按公式换算：
目标rpx = 750 * 设计稿像素值 / 设计稿基准宽度 - 慎用
px单位做比例计算——它不会随屏幕缩放，固定像素在大屏上会显得很小 - 不要在
style里写表达式（如:style="{ width: screenWidth * 0.3 + 'px' }"），nvue不支持运行时样式绑定，得在data或computed里预计算好
常见踩坑点：map、web-view、scroller这些组件怎么全屏
它们都依赖父容器提供明确尺寸，而nvue不会自动继承父级百分比，所以“全屏”必须手动闭环。
立即学习“前端免费学习笔记（深入）”；
- map组件要全屏：外层
<view class="map-container"></view>设flex: 1，map自身不设宽高（让它自然撑满） - web-view必须显式给
width和height，100%无效；推荐写width: 750rpx; height: 100vh;（但注意vh在nvue中也不被支持，实际要用flex: 1或动态rpx） -
<scroller></scroller>不能靠overflow: scroll触发，必须设固定height，且父容器不能是position: absolute（nvue不支持该定位） - 所有原生组件（包括
<video></video>、<camera></camera>）都不响应max-width、min-height等CSS约束，只吃width/height或flex
nvue的布局逻辑是“显式优先”——你得告诉它每个东西多大，而不是让它去猜。一旦习惯用flex和rpx代替百分比，很多“不生效”的问题就消失了。真正难的不是写法，而是忘记Web那一套惯性思维。
