vue实现屏幕适配
使用 viewport 单位（vw/vh）
Vue 项目中可以通过 CSS 的 viewport 单位（vw/vh）实现屏幕适配。1vw 等于视口宽度的 1%，1vh 等于视口高度的 1%。这种方法适合基于视口尺寸的动态调整。
.container {
width: 100vw;
height: 100vh;
font-size: 2vw; /* 字体大小随视口宽度变化 */
}结合 rem 和 postcss-pxtorem
通过 rem 单位结合 postcss 插件实现适配。rem 基于根元素（html）的字体大小，通过动态计算根字体大小实现响应式。
安装 postcss-pxtorem：
npm install postcss-pxtorem --save-dev配置 postcss.config.js：
module.exports = {
plugins: {
'postcss-pxtorem': {
rootValue: 16, // 基准值（1rem = 16px）
propList: ['*'], // 转换所有属性
},
},
};在入口文件中动态设置根字体大小：
function setRem() {
const baseSize = 16;
const scale = document.documentElement.clientWidth / 1920; // 设计稿宽度为1920px
document.documentElement.style.fontSize = baseSize * scale + 'px';
}
window.addEventListener('resize', setRem);
setRem();使用 CSS Flex 或 Grid 布局
弹性布局（Flex）和网格布局（Grid）可以自动调整子元素的位置和大小，适合构建响应式界面。
.container {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
}
.item {
flex: 1 1 200px; /* 最小宽度200px，自动伸缩 */
}媒体查询（Media Queries）
通过媒体查询针对不同屏幕尺寸应用不同的样式规则，适合精确控制不同断点的布局。
@media (max-width: 768px) {
.container {
flex-direction: column;
}
}
@media (min-width: 1200px) {
.container {
max-width: 1200px;
margin: 0 auto;
}
}使用第三方库（如 lib-flexible）
对于老项目，可以使用 lib-flexible 实现 rem 适配。虽然已不再维护，但在某些场景下仍有效。
安装 lib-flexible：
npm install lib-flexible --save在 main.js 中引入：
import 'lib-flexible';响应式组件设计
在 Vue 组件中通过计算属性或监听窗口大小变化动态调整样式或数据。
export default {
data() {
return {
screenWidth: window.innerWidth,
};
},
mounted() {
window.addEventListener('resize', this.handleResize);
},
methods: {
handleResize() {
this.screenWidth = window.innerWidth;
},
},
computed: {
isMobile() {
return this.screenWidth < 768;
},
},
};SVG 或 Canvas 适配
对于图形内容，使用 SVG 或 Canvas 时，通过 viewBox 属性或动态计算尺寸实现适配。
<svg :viewBox="`0 0 ${width} ${height}`" preserveAspectRatio="xMidYMid meet">
<!-- 图形内容 -->
</svg>总结
Vue 实现屏幕适配的核心在于结合 CSS 单位（vw/vh、rem）、布局技术（Flex/Grid）、媒体查询和动态计算。根据项目需求选择合适的方法，通常推荐 rem + postcss-pxtorem 或 viewport 单位作为主要方案。
