1. 先聲明一點這玩意本身不能實現哈，他只是一個工具，更是一個postcss的插件 幫助我們從px轉化成為rem
2. 比如我們的代碼

div {height: 100px;width: 100px;
}

經過這個插件轉化之后變成
假設變成下面這樣哈

div {height: 1rem;width: 1rem;
}

其他沒啥子太大作用

下面請允許我跑題講講其他的知識
比如 750的設計稿上 有寬度 375px寬度的元素 那么它就會占用設備寬度的一半
如果這個設計到了 375px的設備上 我們再設置 375px的話 那就會占滿整個設備了。

那么問題來了 有沒有什么單位 可以讓我在這兩上面實現同樣的效果呢
當然有了。我們直接設置 百分之50不就行了嘛

聰明的boy，但是今天不說這個百分比寬度 也不說那個視口寬度單位
今天講rem這個單位
rem 是 CSS 中的一個長度單位，全稱是 “root em”。它是相對于根元素（即HTML元素）的字體大小來計算的。例如，如果 HTML 元素的字體大小是 16px，那么 1rem 就等于 16px。如果 HTML 元素的字體大小改變，那么使用 rem 作為單位的元素的大小也會相應地改變。

看了上面介紹 我在想 我們可不可以這樣做
在750px設計稿上 設置一個 1rem寬度的元素。跑到375px上面也是1rem但是他倆的展示效果是一樣的

舉個例子哈 750上面 假設 1rem = 100px
那么要想實現同樣的效果那么 我們在 375設備上 就需要 1rem = 50px

這個怎么做到呢 我們就通過調整 根元素的字體大小來來實現

在750設備上

htmlDom.style.fontSize = 100 + 'px'

在 375設備上

htmlDom.style.fontSize = 50 + 'px'

有童鞋會有疑問 那么我其他的設備 怎么辦 總不能一個設備寫一個這個吧
嘿嘿 這樣就需要引入一個 比例了 我們固定好一個比例 根據我們設計稿的寬度尺寸
比如是 750的 那么scale比例就是

假設 100px = 1rem 那么 750px 就是 7.5rem了

 const scale = 750 / 100console.log(scale) // 輸出 7.5

這樣話 在375的設備上就是

// 輸出 50px

htmlDom.style.fontSize = 375 / 7.5 + 'px' 

如果設備寬度是 420,那么

htmlDom.style.fontSize = 420 / 7.5 + 'px' = '56px'

上面其實我們可以提取出來一個專門處理的函數

// 按照設計稿 375px計算  1rem 16px 那么 如果設備是750px的話 那么 1rem就是 32pxfunction setRem(designWidth = 750) {const scale = designWidth / 100const htmlDom = document.querySelector('html')const htmlWidth = document.documentElement.clientWidth || document.body.clientWidthhtmlDom.style.fontSize = htmlWidth / scale + 'px'}window.onload = function() {setRem()}window.onresize = function() {setRem()}

重新回到我們的postcss-pxtorem哈 我們在設計的時候總不能自己一直在哪里算吧 如果，比如 設計稿寬度 20px 我們還需要自己去手寫或者計算多少rem 多費時間啊
那么有沒有一個插件 我們可以自己手寫px它自動根據我們設置的給轉化成rem這樣多爽
那么它來了
怎么用呢。和webpack一樣需要我們安裝一些東西哈
首先在我們的html文件目錄下 （我這個可不是基于webpack哈）

npm init -y
npm i postcss postcss-cli -D
npm i postcss-pxtorem -S

然后在package.json同級別目錄下創建一個 postcss.config.js

module.exports = {plugins: [require('postcss-pxtorem')({rootValue: 100,propList: ['*'],minPixelValue: 2 // 設置最小的轉換數值，如果為1的話，只有2px以上的值才會被轉換}),// 其他插件...],};

在package.json文件配置下

"scripts": {"test": "echo \"Error: no test specified\" && exit 1","build": "postcss src/style.css -o dist/style.css"},

運行 npm run build
在src/style.css

div {height: 200px;width: 200px;background-color: #f00;
}
div p {height: 1px;width:  1px;
}

看下效果哈

是不是轉化成功了 嘿嘿
關注我 持續更新 前端知識