uniapp默认宽度

uniapp默认宽度解析

uniapp的默认宽度与设计稿和屏幕适配方案相关。以下是关键点：

设计稿基准

• 官方推荐以750rpx为设计稿基准宽度，这是基于多数移动设备屏幕逻辑像素宽度（如iPhone6/7/8的375物理像素，通过2倍屏换算为750逻辑像素）。
• 在uni-app中，750rpx等于100%屏幕宽度，其他尺寸按比例自动换算。

CSS默认样式

• 未设置宽度的<view>等组件默认宽度为100%，即撑满父容器。
• 页面级元素默认宽度为窗口宽度（100%），高度由内容撑开。

代码示例

/* 默认情况下，view宽度为100% */
view {
  width: 100%;
}

适配方案

• 使用rpx单位可自动适配不同屏幕：width: 750rpx将占满屏幕宽度。
• 开发者可通过uni.getSystemInfoSync()获取实际屏幕宽度（单位px），用于计算布局。

注意事项

• 在非H5平台（如小程序），部分组件可能有默认内边距，需通过box-sizing: border-box控制盒模型。
• 设计时建议使用Flex布局或百分比宽度，而非固定像素值。