在uniapp中,可以使用uni.getSystemInfoSync()获取设备信息,然后根据不同的设备宽度来设置样式,从而实现@media查询的效果。

示例代码:

// 获取屏幕宽度
const { windowWidth } = uni.getSystemInfoSync()

// 根据屏幕宽度设置样式
if (windowWidth > 750) {
  // 大屏幕样式
  this.style = {
    fontSize: '20px'
  }
} else {
  // 小屏幕样式
  this.style = {
    fontSize: '16px'
  }
}

在模板中使用动态样式:

<view :style="style">Hello World</view>

原文地址: https://www.cveoy.top/t/topic/bhp4 著作权归作者所有。请勿转载和采集!

免费AI点我,无需注册和登录