vue实现页面自适应
Vue 实现页面自适应的方法
使用 CSS 媒体查询
在 Vue 组件的 <style> 标签中或全局 CSS 文件中添加媒体查询，根据屏幕宽度调整样式。例如：
@media (max-width: 768px) {
.container {
width: 100%;
padding: 10px;
}
}
@media (min-width: 769px) {
.container {
width: 80%;
margin: 0 auto;
}
}使用 Flexbox 或 Grid 布局
利用 CSS Flexbox 或 Grid 实现弹性布局，使元素自动适应容器大小。例如：
.container {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.item {
flex: 1 1 200px;
}动态计算尺寸
在 Vue 的 data 或 computed 中根据窗口大小动态计算样式。例如：
data() {
return {
windowWidth: window.innerWidth
};
},
computed: {
containerStyle() {
return {
width: this.windowWidth < 768 ? '100%' : '80%'
};
}
},
mounted() {
window.addEventListener('resize', () => {
this.windowWidth = window.innerWidth;
});
},
beforeDestroy() {
window.removeEventListener('resize');
}使用第三方库
引入像 lib-flexible 或 postcss-px2rem 等库，将像素单位转换为 rem，实现等比缩放。安装后配置 postcss.config.js：
module.exports = {
plugins: {
'postcss-px2rem': {
remUnit: 75 // 设计稿 1rem = 75px
}
}
};基于 VW/VH 单位
直接使用视口单位（vw/vh）定义尺寸，元素会随视口变化自动调整。例如：
.container {
width: 100vw;
height: 50vh;
}
.title {
font-size: 4vw;
}响应式组件设计
结合 Vue 的 v-if 或 v-show 按需显示不同组件。例如：
<template>
<MobileHeader v-if="isMobile" />
<DesktopHeader v-else />
</template>
<script>
export default {
computed: {
isMobile() {
return window.innerWidth < 768;
}
}
};
</script>注意事项
- 移动端需在
public/index.html中添加 viewport 标签：<meta name="viewport" content="width=device-width, initial-scale=1.0"> - 避免固定像素值，优先使用相对单位（rem/%/vw/vh）。
- 测试时使用 Chrome 开发者工具的设备模式模拟不同屏幕尺寸。
