Vue框架使用PostCSS的原因是什么

本篇內容介紹了“Vue框架使用PostCSS的原因是什么”的有關知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領大家學習一下如何處理這些情況吧！希望大家仔細閱讀，能夠學有所成！

使用PostCss的原因

大家都知道轉換px單位的插件很多，著名的有postcss-px-to-viewport和postcss-pxtorem，前者是將px轉換為vw，后者是將px轉換為rem，簡化了不常用的配置。將成為vw優先單位，以rem為退貨模式。考慮到vw在移動設備上的支持不如rem，這個插件很好的解決了這個問題。然后簡單介紹一下。

安裝指令

 $ npm install @ moohng / postcss-px2vw --save-dev

使用方法

首先創建一個.postcssrc.js文件，然后配置

module.exports = {
  plugins: {
    '@moohng/postcss-px2vw': {}
  }
}

例子： 使用前：

.box {
  border: 1px solid black;
  margin-bottom: 1px;
  font-size: 20px;
  line-height: 30px;
}

使用后：

.box{
  border: 1px solid black;
  margin-bottom: 1px;
  font-size: 0.625rem;
  font-size: 6.25vw;
  line-height: 0.9375rem;
  line-height: 9.375vw;
}

配置方面

viewportWidth：對應設計圖的寬度，用于計算 vw。默認 750，指定 0 或 false 時禁用 rootValue：根字體大小，用于計算 rem。默認 75，指定 0 或 false 時禁用 unitPrecision：計算結果的精度，默認 5 minPixelValue：小于等于該值的 px 單位不作處理，默認 1 注意：該插件只會轉換 px 單位。rootValue 一般建議設置成 viewportWidth / 10 的大小，將設計圖分成10等分。由于瀏覽器有最小字體限制，如果設置得過小，頁面可能跟預期不一致

如果要使用 rem 單位，需要自己通過 js 來動態計算根字體的大小。如果將設計圖分成 10 等分計算，那么根字體的大小應該是 window.innerWidth / 10。

這樣一個postCss的插件就配置完成了。

“Vue框架使用PostCSS的原因是什么”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識可以關注億速云網站，小編將為大家輸出更多高質量的實用文章！