vue使用rem适配
时间: 2023-07-05 20:04:00 浏览: 62
Vue使用rem适配可以通过以下步骤实现:
1. 在index.html中设置页面的基准字体大小,一般为16px:
```html
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My App</title>
<style>
html {
font-size: 16px;
}
</style>
</head>
<body>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
```
2. 安装并引入postcss-pxtorem插件,该插件可以将CSS中的px单位自动转换为rem单位:
```sh
npm install postcss-pxtorem -D
```
3. 在项目根目录下创建postcss.config.js文件,并在其中配置插件:
```javascript
module.exports = {
plugins: {
'postcss-pxtorem': {
rootValue: 16, // 基准字体大小
propList: ['*'], // 需要转换的属性,*表示所有
minPixelValue: 2 // 最小转换单位的像素值
}
}
}
```
4. 在vue.config.js中配置使用postcss:
```javascript
module.exports = {
css: {
loaderOptions: {
postcss: {
plugins: [
require('postcss-pxtorem')({
rootValue: 16,
propList: ['*'],
minPixelValue: 2
})
]
}
}
}
}
```
5. 在CSS中使用rem单位,例如:
```css
.container {
width: 10rem;
height: 6rem;
font-size: 1.6rem;
}
```
以上就是Vue使用rem适配的步骤,这样可以根据设备的不同自动适配页面的大小。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)