Vue 中实现 REM 或 VW 布局的技巧
5星
- 浏览量: 0
- 大小:None
- 文件类型：PDF
简介：
本文介绍了在 Vue 项目中采用 REM 和 VW 单位进行自适应布局的方法和技巧，帮助开发者轻松实现响应式设计。
在移动设备开发过程中，适配不同屏幕尺寸是一项关键任务。`rem` 和 `vw` 单位常被用于创建响应式布局，在 Vue.js 这样的流行前端框架中，实现这两种布局策略有多种方法。
### 一、使用 `rem` 布局
#### 方法一：手动设置 HTML 字体大小
在项目根目录的 JavaScript 文件（如 `main.js`）里添加如下代码：
```javascript
const setHtmlFontSize = () => {
let deviceWidth = document.documentElement.clientWidth || document.body.clientWidth;
if (deviceWidth >= 750) {
deviceWidth = 750; // 设定最大宽度，例如设计稿中的1rem为75px
}
if (deviceWidth <= 320) {
deviceWidth = 320; // 设定最小宽度
}
document.documentElement.style.fontSize = `${deviceWidth / 7.5}px`; // 设置字体大小，假设1rem=100px
}
window.onresize = setHtmlFontSize;
setHtmlFontSize();
```
然后在 CSS 文件中使用 `rem` 单位定义元素尺寸。
#### 方法二：利用 `lib-flexible` 和转换插件
首先安装这两个库：
- 安装命令为 `npm install lib-flexible --save`
- 或者，对于转换插件如 `px2rem-loader`, 使用命令是 `npm install px2rem-loader --save-dev`
接着，在项目配置文件（例如 `vue.config.js`）中进行如下设置：
```javascript
module.exports = {
chainWebpack: config => {
config.module
.rule(css)
.test(/\.css$/)
.oneOf(vue)
.resourceQuery(/\?vue/)
.use(px2rem-loader, () => ({
loader: px2rem-loader,
options: { remUnit: 75 }, // 设置转换基数
}));
},
};
```
### 二、使用 `vw` 布局
在 CSS 文件中直接应用 `vw` 单位，例如：
```css
width: 10vw;
height: calc(100vh - 20px); /* 使用 vw 和 vh 结合 */
```
这种方法适用于元素尺寸需要与视口宽度成比例变化的情况。
### 如何选择：使用 `rem` 还是 `vw`
- 如果你需要更精确地控制不同分辨率下的布局，推荐采用 `rem` 单位。
- 对于那些依赖于相对单位的响应式设计和对视觉效果有特殊要求的应用场景，则更适合用到 `vw`。
在实际开发中可以根据具体需求灵活选择或结合使用这两种方法。
全部评论 (0)
