首页 > 其他分享 >h5适配 px--->rem

h5适配 px--->rem

时间:2022-09-24 14:45:47浏览次数:40  
标签:适配 px javascript --- setRem rem postcss ###

### 安装

```javascript
npm install postcss-pxtorem -D
```

### 在utils文件夹中建立一个 rem.js文件

```javascript
// 基准大小
const baseSize = 32
// 设置 rem 函数
function setRem () {
  // 当前页面宽度相对于 750 宽的缩放比例,可根据自己需要修改。
  const scale = document.documentElement.clientWidth / 750
  // 设置页面根节点字体大小
  document.documentElement.style.fontSize = (baseSize * Math.min(scale, 2)) + 'px'
}
// 初始化
setRem()
// 改变窗口大小时重新设置 rem
window.onresize = function () {
  setRem()
}
```

### 脚手架根目录创建 postcss.config.js 文件

```javascript
module.exports = {
  plugins: {
    autoprefixer: {},
    "postcss-pxtorem": {
      "rootValue": 16,
      "propList": ["*"]
    }
  }
}
```

#### 重启服务 npm run ***

  

标签:适配,px,javascript,---,setRem,rem,postcss,###
From: https://www.cnblogs.com/newBugs/p/16725608.html

相关文章