vue实现屏幕适配
使用 viewport 和 rem 适配
在 HTML 的 head 标签中添加 viewport 设置，确保页面可以缩放。通过动态计算根元素的字体大小来实现 rem 适配。
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">在 Vue 的入口文件（如 main.js）中动态设置根元素字体大小：
function setRem() {
const baseSize = 16; // 基准大小，根据设计稿调整
const scale = document.documentElement.clientWidth / 1920; // 设计稿宽度
document.documentElement.style.fontSize = baseSize * Math.min(scale, 2) + 'px';
}
window.addEventListener('resize', setRem);
setRem();使用 CSS 媒体查询
针对不同屏幕尺寸设置不同的样式规则，适合简单布局适配。
@media screen and (max-width: 768px) {
.container {
width: 100%;
}
}
@media screen and (min-width: 769px) and (max-width: 1024px) {
.container {
width: 80%;
}
}
@media screen and (min-width: 1025px) {
.container {
width: 1200px;
}
}使用 Vue 插件实现适配
安装 postcss-px-to-viewport 插件，自动将 px 单位转换为 vw/vh。
npm install postcss-px-to-viewport --save-dev在项目根目录下创建 postcss.config.js 文件：
module.exports = {
plugins: {
'postcss-px-to-viewport': {
unitToConvert: 'px',
viewportWidth: 1920, // 设计稿宽度
unitPrecision: 5,
propList: ['*'],
viewportUnit: 'vw',
fontViewportUnit: 'vw',
selectorBlackList: [],
minPixelValue: 1,
mediaQuery: false,
replace: true,
exclude: undefined,
include: undefined,
landscape: false,
landscapeUnit: 'vw',
landscapeWidth: 568
}
}
}使用 Flex 和 Grid 布局
结合现代 CSS 布局技术实现响应式设计，确保元素在不同屏幕尺寸下自动调整。
.container {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 20px;
}
.item {
flex: 1 1 200px;
margin: 10px;
}使用第三方库
安装 vue-screen-utils 库，提供便捷的屏幕尺寸检测和响应式功能。
npm install vue-screen-utils在 Vue 组件中使用：
import { useScreen } from 'vue-screen-utils';
export default {
setup() {
const screen = useScreen();
return {
screen
};
}
};模板中使用：
<div v-if="screen.width > 768">
大屏幕内容
</div>
<div v-else>
小屏幕内容
</div>
