UniappJS 动态设置样式实现@media 查询 | 跨平台响应式布局 - 常规

UniappJS 是一款基于 Vue.js 的跨平台应用开发框架，可以用一套代码开发出同时支持 H5、小程序、App 等多个平台的应用。在 UniappJS 中，可以通过动态设置样式来实现 @media 查询。

'media 查询' 是 CSS3 的一个重要特性，可以根据设备的屏幕大小、分辨率等条件来调整样式。在 UniappJS 中，可以通过判断设备的屏幕宽度来动态设置样式。

具体实现方法如下：

在 Vue 组件的 <style> 标签中定义 @media 查询的样式，如下所示：

@media screen and (max-width: 480px) {
  .container {
    width: 100%;
    padding: 10px;
  }
}

在 Vue 组件的 <script> 标签中定义一个方法，用于判断设备屏幕的宽度，并根据条件动态设置样式，如下所示：

export default {
  data() {
    return {
      screenWidth: uni.getSystemInfoSync().windowWidth
    };
  },
  methods: {
    setStyle() {
      if (this.screenWidth <= 480) {
        // 如果屏幕宽度小于等于480px，则设置样式
        this.$refs.container.style.width = '100%';
        this.$refs.container.style.padding = '10px';
      } else {
        // 如果屏幕宽度大于480px，则恢复默认样式
        this.$refs.container.style.width = 'auto';
        this.$refs.container.style.padding = '20px';
      }
    }
  },
  mounted() {
    this.setStyle();
    // 监听屏幕大小变化，重新设置样式
    uni.onWindowResize(() => {
      this.screenWidth = uni.getSystemInfoSync().windowWidth;
      this.setStyle();
    });
  }
};

在上面的代码中，通过 uni.getSystemInfoSync().windowWidth 获取设备屏幕的宽度，并根据条件动态设置样式。mounted() 方法中，使用 uni.onWindowResize() 方法监听屏幕大小变化事件，当屏幕大小变化时，重新获取设备屏幕宽度并重新设置样式。

在 Vue 组件的模板中使用动态绑定样式，如下所示：

<template>
  <div class='container' ref='container'>内容区域</div>
</template>

<style scoped>
.container {
  width: auto;
  padding: 20px;
}
</style>

在上面的代码中，通过 ref 属性获取到内容区域的 DOM 元素，并使用动态绑定样式来实现样式的动态设置。