微信小程序开发教程-页面样式page

作者：马育民 • • 阅读：10015

介绍

page 是页面最顶层根容器，相当于H5的 <body>，全局默认内置样式：

page {
  display: block;
  width: 100%;
  overflow-x: hidden;
  min-height: 100vh;
  user-select: none;
}

page 关键特性

  1. 作用域：仅当前页面 .wxss、app.wxss 可修改；自定义组件内无法选中 page。
  2. 不可用属性：position: fixed、z-index、transform 等定位层级样式写在 page 会失效，浮层要写子view。
  3. 宽度固定基准：所有机型统一逻辑宽度 750rpx（相当于100%），无需多分辨率适配。
  4. 默认纵向滚动，性能更好

应用场景

  1. 全局统一页面背景（最高频）
  2. 全局适配手机安全区（所有项目标配）
  3. 全局统一默认字体大小、文字颜色

自定义 page 常用样式

1. 通用基础配置（含安全区适配刘海/底部横条）

page {
  width: 750rpx;
  min-height: 100vh;
  background-color: #f5f7fa; /* 页面底色 */
  overflow-x: hidden;
  /* iOS刘海、灵动岛顶部安全距离 */
  padding-top: env(safe-area-inset-top);
  /* iPhone底部小黑条安全距离 */
  padding-bottom: env(safe-area-inset-bottom);
  font-size: 30rpx;
  color: #333;
}

2. 限制大屏最大宽度（平板/折叠屏不无限拉宽）

page {
  max-width: 100%;
  margin: 0 auto; /* 大屏居中显示 */
}

页面样式文件层级与覆盖规则

小程序样式优先级从低到高：

  1. 小程序内置默认 page 样式
  2. app.wxss 全局公共样式（所有页面生效）
  3. 当前页面 .wxss 页面私有样式（覆盖全局）

示例：

  • app.wxss

    page { background: #fff; }

  • index.wxss

    page { background: #f5f7fa; } /* 本页面底色生效，覆盖全局 */

页面布局通用规范

页面所有内容建议包裹一层外层容器，统一控制左右边距，避免紧贴屏幕边缘：

WXML

<view class="page-wrap">
  <!-- 页面所有业务内容 -->
</view>

WXSS

page {
  min-height: 100vh;
  background: #f5f7fa;
  overflow-x: hidden;
}
.page-wrap {
  width: 750rpx;
  padding: 30rpx; /* 左右留白，统一边距 */
  box-sizing: border-box; /* padding不会撑大750rpx宽度 */
}

不要修改的 page 样式

  • 改 width：原生默认 100%，无需手动覆盖；
  • margin：给 page 加左右 margin 会 横向溢出，基本没人这么写。
  • position/fixed/z-index/transform：page 不支持定位，不会在这里写；
  • 页面滚动相关：纵向滚动原生够用，只有自定义滚动才用 scroll-view，不改 page；

防止横向溢出问题

page 默认 width:100%，盒模型默认是 content-box：

  1. width:100% 只控制内容区占满屏幕；
  2. padding-left/padding-right、margin-left/margin-right 会在 100% 宽度之外额外增加尺寸；
  3. 总宽度 = 屏幕宽100% + 左右padding + 左右margin，导致 超出视口，出现横向滚动条。

示例（溢出错误写法）：

page {
  width: 100%;
  padding: 0 30rpx;  /* 左右各30rpx，向外扩宽 */
}

解决方案1（最常用）

给 page 设置 box-sizing: border-box

border-box 规则：width 包含内容 + padding + border，padding 向内压缩，不会溢出。

page {
  width: 100%;
  box-sizing: border-box; /* 关键 */
  padding: 0 30rpx;
  overflow-x: hidden;
}

解决方案2（推荐）

padding 不要写在 page，写内层容器

page 只负责背景、安全区，页面留白交给子容器，完全避开溢出问题：

/* page 只处理底色、安全区，不加左右padding */
page {
  background: #f5f7fa;
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
}
/* 内容容器统一留白 */
.wrap {
  width: 750rpx;
  padding: 0 30rpx;
  box-sizing: border-box;
}

wxml：

<view class="wrap">页面内容</view>

总结

  1. page 尽量不设置左右 padding，留白交给内部容器；
  2. 若必须给 page 加左右 padding，强制搭配 box-sizing: border-box；
  3. page 禁止设置左右 margin；大屏居中用 max-width + margin:0 auto；
  4. 全局兜底加上 overflow-x: hidden，防止极端布局溢出出现横向滚动条。

原文出处：/show_1GW3XJ2hC8Oe.html

吉ICP备15003043号