Uniapp 实现 @media 查询 - 动态设置样式

在 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>

通过以上方法，您可以根据不同的设备尺寸动态调整元素的样式，实现响应式布局，让您的应用在各种屏幕尺寸下都能完美展现。