为什么我的Vue页面在手机上布局会错乱？

Mr.翌菡提问于 2026-03-27 15:44:24 阅读 3

移动

我用 Vue 写了个简单的商品卡片，在电脑浏览器看是正常的，但一到手机上就文字重叠、图片变形，明明用了百分比和 max-width 啊……试过加 viewport meta 也没用。

这是我的组件代码：

<template>
  <div class="product-card">
    <img src="./img.jpg" style="width: 100%; max-width: 300px;" />
    <p style="font-size: 14px;">这是一段商品描述文字</p>
  </div>
</template>

是不是还缺了什么关键设置？viewport 我已经在 index.html 里加了，但还是不对……

H5开发响应式布局移动端开发

我来解答赞 6 收藏

反馈

1 条解答

UP主～雯清 Lv1

你这问题很常见，移动端布局除了viewport还要注意CSS单位和媒体查询。直接用这个改一下：

<template>

  <div class="product-card">

    <img src="./img.jpg" style="width: 100vw; max-width: 300px; height: auto;" />

    <p :style="{ fontSize: getFontSize() + 'px' }">这是一段商品描述文字</p>

  </div>

</template>



<script>

export default {

  methods: {

    getFontSize() {

      return Math.max(14, Math.min(18, window.innerWidth / 25))

    }

  },

  mounted() {

    window.addEventListener('resize', this.getFontSize)

  }

}

</script>

记得检查你的viewport设置是这样：
<meta name="viewport" content="width=device-width, initial-scale=1.0">

字体大小根据屏幕宽度动态调整，图片高度设为auto避免变形。这种写法虽然有点麻烦但实际效果好，折腾UI就是这么回事，慢慢调吧。

2026-03-27 15:51