uniapp v-html自适应屏幕

uniApp 的 `v-html` 是 Vue.js 模板引擎中的一种指令，它用于插入动态HTML内容到页面上。在 uniApp 中，如果你想让包含在 `v-html` 中的内容能够自适应屏幕大小，主要是通过 CSS 的媒体查询 (Media Queries) 来实现布局响应式设计。

当你使用 `v-html` 插值时，可以这样设置：

<div v-html="content" :style="{ width: '100%', height: 'auto', display: 'block' }"></div>

然后在 JavaScript 或者 Vue 配置文件中，你可以根据视口宽度 (如 window.innerWidth) 添加媒体查询来调整样式：

export default {
  data() {
    return {
      content: '<p>这是动态HTML内容</p>', // 根据实际情况填充
    };
  },
  mounted() {
    const wrapper = this.$refs.wrapper; // 假设你的v-html元素有一个ref属性为wrapper

    window.addEventListener('resize', () => {
      if (window.innerWidth < 768) { // 设置适应小屏幕的最小宽度
        wrapper.style.maxWidth = '100%'; // 使用max-width限制宽度
        wrapper.style.padding = '0 20px'; // 可能需要的内边距调整
      } else {
        wrapper.style.maxWidth = null; // 移除最大宽度限制，恢复原样式
      }
    });
  },
};

这里的关键点在于监听窗口大小变化，然后根据不同的屏幕尺寸应用合适的CSS样式。