微信小程序媒体查询

时间:2024-04-04 15:45:43

在微信小程序中,@media媒体查询不支持screen关键字,因为小程序页面是再webview中渲染的,而不是在浏览器中渲染的。

在设置样式时,可以使用 wxss 文件中的 @media 规则来根据屏幕宽度或高度设置不同的样式。

  • device-width:设备屏幕的宽度,单位px
  • device-height:设备屏幕的高度,单位px
  • width:小程序窗口的宽度,单位rpx
  • heigth:小程序窗口的高度,单位rpx
  • aspect-ratio:设备屏幕的宽高比
  • orientation:设备屏幕方向,可以是portrait(竖屏)或landscape(横屏)
.bg {
    background:#ffffff
 }

/* 当屏幕宽度小于 750rpx 时应用以下样式 */

@media (max-width: 750rpx) {
  .bg {
    background:#000
  }
}


/* 设备宽度 单位px */
@media (max-device-width: 350px) {
  .bg {
    background:#000
  }
}