小程序页面设计常用样式

最新推荐文章于 2025-05-09 09:56:43 发布

桂花树之春

最新推荐文章于 2025-05-09 09:56:43 发布

阅读量308

点赞数 2

CC 4.0 BY-SA版权

文章标签：小程序

本文链接：https://blog.csdn.net/2301_76677472/article/details/147148561

背景平铺整个页面

height：100vh

100vh 表示"当前视口高度"，但height: 100vh 无法跟随内容高度动态扩展,当页面滚动时内容高度可能超过视口高度，导致背景无法覆盖超出的部分（尤其是在 iPad 等大屏设备上）
当页面内容多，有滚动条时使用: min-height:100vh

页面自适应屏幕方法

最简单直接：尺寸使用 rpx，而不是px
1rpx = 屏幕宽度（物理像素） / 750
1px ≈ (750 / 屏幕物理宽度) rpx

• 小屏手机（如 iPhone）：1px ≈ 2rpx
• 大屏设备（如 iPad）：1px ≈ 1rpx（甚至更小）

wx.getSystemInfoSync() 获取屏幕宽度，动态计算比例：

const screenWidth = wx.getSystemInfoSync().screenWidth;
const rpxPerPx = 750 / screenWidth; // 1px 对应的 rpx 值

aspect-ratio: 宽度/高度
元素高度自动根据宽度（90% 屏幕宽度）按比例缩放，手机/平板显示比例一致
媒体查询：

/* 默认手机样式 */
.item {
  width: 100%;
}

/* 平板适配（屏幕宽度 ≥ 600px） */
@media (min-width: 600px) {
  .item {
    width: 48%; /* 两列布局 */
  }
  .text {
    font-size: 32rpx; /* 平板上增大字号 */
  }
}

/* 大屏平板/横屏（屏幕宽度 ≥ 900px） */
@media (min-width: 900px) {
  .item {
    width: 32%; /* 三列布局 */
  }
}