布局

布局方案

PC 端布局方案：

• 使用 rem 做长度单位
• 页面布局配合使用流式布局和响应式布局，页面的 侧栏菜单 / 抽屉式导航 / 等组件占据固定宽度，而剩余的自动撑满剩余宽度。
• 自适应宽度部分应包含宽度为 100% 的响应式布局容器。

移动端布局:

• 使用 rem 做长度单位。
• 布局样式模仿 iOS 原生 UI 样式，减小 H5 页面与原生系统的体验差异。

响应式设计：

• 在人力资源充足的时候，可以在移动端/PC端开发两套网页，而不是用响应式进行屏幕适配。
• 移动优先 / PC 优先，取决于产品的使用场景，根据使用时长确定产品设计的优先级：
  • 若用户更多地使用移动端，则应采用“移动优先”原则: 设计&编码时优先设计超小屏幕（移动端，PC 端宽度小于 600px）这一范围的样式；宽度超过 600px 时，进行响应式 WEB 设计。
  • 若开发中后台系统应用，几乎不会在手机上使用，则应采用“PC 优先”原则：设计&编码时优先设计超大屏幕 PC（PC 端宽度大于 1920px）这一范围的样式；宽度小于 1920px 时，进行响应式 WEB 设计，确保在平板、手机能小屏幕设备上能够正常访问页面布局。

栅格系统

随着移动/PC设备屏幕尺寸的增加，我们对响应式的阈值做出一些调整，增大“大屏幕手机”和“超大屏幕PC”这两个区间。

在进行编码的时候应注意移动优先/PC优先，设置阈值为半开放区间，封闭区间的局限性太强，因此禁止使用封闭区间。