postcss-pxtorem導(dǎo)入后直接postcss.config.js文件中作為plugins，可以讓css中出現(xiàn)的px變?yōu)閞em：

//postcss.config.js
module.exports = {
  plugins: [
    require('postcss-pxtorem')({
      rootValue: 75,//會(huì)把css中的px除以這個(gè)數(shù)變?yōu)閞em，即75px變?yōu)?rem，150px變?yōu)?rem
      unitPrecision: 6,//px變?yōu)閞em后保留的小數(shù)位數(shù)
      propList: ['*'],//對(duì)哪些屬性生效，未被匹配的屬性不會(huì)把px替換為rem
      selectorBlackList: [],//選擇器黑名單，即該名單中的px不被替換為rem
      replace: true,//
      mediaQuery: false,//媒體查詢(xún)( @media screen 之類(lèi)的)中不生效
      minPixelValue: 6 //px小于6px時(shí)不替換為rem
    })
  ]
};

//css文件中
html{ font-size:10vw; }

官方文檔

配合

假定設(shè)計(jì)稿為750px寬，不管高度(高度方向可能變?yōu)樯舷禄瑒?dòng)，但這是可以接受的)，進(jìn)行寬度適配
1.首先是vw單位，100vw寬就是整個(gè)屏幕寬度。由于設(shè)計(jì)稿中的單位都是px，因此比如設(shè)計(jì)稿中一個(gè)50px寬的控件，占據(jù)設(shè)計(jì)稿的 50/750 =6.6667%，因此我們可把該控件的寬度修改為6.6667vw，其他控件同理，即可完成寬度適配。但是，設(shè)計(jì)稿中有很多元素，人工換算成vw很蠢，不容易對(duì)照設(shè)計(jì)稿進(jìn)行編程。

2.借助css的rem單位和postcss-pxtorem，我們可以直接在代碼中使用設(shè)計(jì)稿的50px作為寬度單位，無(wú)需人工替換。參照上面的代碼，具體算法分析如下：
(1)根據(jù)html樣式html{ font-size:10vw; }，可知我們定義了1rem=10vw，即10rem=100vw
(2)整個(gè)屏幕寬100vw，我們?cè)O(shè)計(jì)稿寬750px，即我們希望750px=100vw=10rem。因此可知rootValue=750/10=75，去把rootValue設(shè)置為75?？瓷厦娲a的注釋?zhuān)簿褪谴藭r(shí)css中的750px，除以75后變?yōu)?0rem(即100vw);50px除以75后變?yōu)?.666667rem(即6.66667vw)。
(3)最終效果，把750px在寬度方向上放縮至等于設(shè)備寬度，完成屏幕適配，同時(shí)可讓我們?cè)诖a中仍然使用和設(shè)計(jì)稿相同的px作單位。
(4)為什么不是：px to vw直接把px換成vw，而是：把px換成rem同時(shí)定義1rem=*vw這樣子呢？
可能是有時(shí)候不一定會(huì)采用1rem=10vw這種設(shè)定，而是:

@media screen(min-width=320px){ html{font-size:16px;} }
@media screen(min-width=480px){ html{font-size:18px;} }

所以為了框架的適用性，沒(méi)有直接px to vw，而是px to rem，讓開(kāi)發(fā)者自己調(diào)整1rem=?來(lái)更靈活的完成適配。

3.練習(xí):假定設(shè)計(jì)人員的設(shè)計(jì)稿為600px。
解：很隨意的，我們這個(gè)時(shí)候定義1rem=100vw，即html{font-size:100vw;}
讓設(shè)計(jì)稿寬度等于設(shè)備寬度，即600px=100vw=1rem，因此rootValue=600/1=600。此時(shí)css中600px變?yōu)?rem(100vw);60px變?yōu)?.1rem(10vw)，寬度上比例縮放了，直接把設(shè)計(jì)稿中寬度的px用作css的寬度即可。