在微信小程序中,@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
}
}