如何在uniapp中设置rem自适应不同手机
时间: 2023-12-04 13:03:19 浏览: 354
rem适配方法,针对少数型号手机做了适配
在uniapp中,可以使用postcss-pxtorem插件来实现rem自适应不同手机屏幕的功能。以下是具体操作步骤:
1. 安装插件
在项目根目录下执行以下命令:
```bash
npm install postcss-pxtorem --save-dev
```
2. 配置插件
在项目根目录下创建postcss.config.js文件,配置插件。示例代码如下:
```javascript
// postcss.config.js
module.exports = {
plugins: {
'postcss-pxtorem': {
rootValue: 75, // 设计稿宽度的1/10,这里假设设计稿宽度为750px
propList: ['*']
}
}
}
```
其中,`rootValue`表示基准值,这里设置为75,表示设计稿宽度的1/10,假设设计稿宽度为750px;`propList`表示要转换的属性列表,这里设置为`['*']`,表示所有属性都要转换。
3. 引入插件
在项目的main.js文件中引入插件。示例代码如下:
```javascript
import Vue from 'vue'
import App from './App'
// 引入插件
import 'postcss-pxtorem'
Vue.config.productionTip = false
App.mpType = 'app'
const app = new Vue({
...App
})
app.$mount()
```
4. 设置html的font-size
在index.html文件中设置html的font-size,示例代码如下:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>uni-app</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
<link rel="stylesheet" href="https://unpkg.com/uni-app-plus/dist/uni-app-plus.css">
<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/uni-app-plus/dist/uni-app-plus.js"></script>
<script>
// 设置html的font-size
document.documentElement.style.fontSize = document.documentElement.clientWidth / 10 + 'px';
</script>
</head>
<body>
<div id="app"></div>
</body>
</html>
```
其中,`document.documentElement.clientWidth / 10`表示屏幕宽度的1/10。
5. 使用rem单位
在编写样式时,可以使用rem单位代替px单位。例如,在设计稿中,某个元素的宽度为150px,那么在样式中可以这样写:
```css
width: 2rem;
```
这样,在不同屏幕下,该元素的宽度就会自动适应。
阅读全文