vue3实现移动端/web页面自适应

floret. 小花2024-10-26 22:38

方法: rem实现的页面计算核心逻辑

页面展示：

可以看到页面上是浮动的逻辑的是750px设计稿子，对应的是18pxfont-size,

标题## 对应的逻辑代码是：

实现原理：

这行代码将计算得到的字体大小应用到 HTML 根元素上。

这种方法之所以能实现页面自适应，主要基于以下原因：

相对单位：如果页面上的其他元素使用相对单位（如 rem、em、%等）来定义尺寸和位置，它们会相对于根元素的字体大小进行缩放。

动态调整：每当窗口大小改变时（通过 window.onresize 事件），这个计算和设置过程都会重新执行，确保布局始终保持适当的比例。

等比例缩放：通过使用窗口宽度和设计稿宽度的比例来计算字体大小，可以确保页面元素在不同屏幕尺寸下保持相对一致的视觉效果。

灵活性：这种方法允许设计师基于一个固定的设计稿（在这个例子中是 750px 宽）工作，而开发者可以确保设计在各种屏幕尺寸上都能正确缩放。

总的来说，这种技术通过动态调整根元素字体大小，配合使用相对单位，实现了一种简单而有效的响应式设计方法。它使得页面布局可以根据不同的屏幕尺寸自动调整，从而达到自适应的效果。

核心代码粘贴：

作用于app.vue里面

c 复制代码

created() { // 页面加载时执行
    this.onChangeWindowSize();  // 执行改变字体大小函数
    window.onresize = this.onChangeWindowSize; // 监听窗口大小变化
  },
  methods: {
    onChangeWindowSize() {
      const rootFontSize = window.innerWidth * (18 / 750); // 计算字体大小   18是设计稿的宽度
      document.getElementsByTagName("html")[0].style.fontSize = `${rootFontSize}px`; // 设置字体大小
    }
  }