postcss-pxtorem是PostCSS的插件，用于將像素單元生成rem單位。

創新互聯公司是一家專業提供新區企業網站建設,專注與成都網站制作、成都做網站、成都h5網站建設、小程序制作等業務。10年已為新區眾多企業、政府機構等服務。創新互聯專業網絡公司優惠進行中。

前端開發還原設計稿的重要性毋庸置疑，目前應用的單位最多還是rem,然而每次在制作過程中需要自己計算rem值，為了能夠直接按照設計圖的尺寸開發，并且能自動編譯轉換成rem，下面就來分享下postcss-pxtorem的使用。

1.安裝依賴

npm install postcss-pxtorem -D

2.設置規則（更改postcss.config.js,該文件為使用vue-cli3自動創建的文件）

module.exports = {
 plugins: {
  'autoprefixer': {
   browsers: ['Android >= 4.0', 'iOS >= 7']
  },
  'postcss-pxtorem': {
   rootValue: 16,//結果為：設計稿元素尺寸/16，比如元素寬320px,最終頁面會換算成 20rem
   propList: ['*']
  }
 }
}

操作到這里移動端自動適配了嗎，當然不能，目前只是將px單位轉換成rem,移動端適配還差最后一步,初接觸rem理解起來有點懵，后來發現了一個好理解的方法，下面來分享一下。

現在我們作一個實驗，你可以新建一個網頁，并寫入如下代碼：

<div class="test">
  <p class="hello">Hello</p>
</div>

然后給html一個基本的樣式:

.test{
  width:320px;
  height:160px;
  background-color: bisque;
  text-align: center；
}
.hello{
  color:red;
}

上邊我們使用了還是傳統的使用px作為單位，我們在移動端調試模式iphone5環境查看一下。會發現div的寬度是正好的，我們再查看一下字體，發現大小是16px。

我們現在可以把CSS中的px單位換成rem單位來進行測試。因為html根元素的字體大小是16px，那么換成rem單位，直接除以16就好。

.test{
  width:20rem;
  height:10rem;
  background-color: bisque;
  text-align: center；
}
.hello{
  color:red;
  font-size:1rem;
}

明白了REM的原理后，我們就可以使用這個特點來進行適應布局了，這也是現在比較主流的移動端web適配方案。src目錄下，新建 libs/rem.js 輸入如下代碼

// 設置 rem 函數
function setRem () {

  // 320 默認大小16px; 320px = 20rem ;每個元素px基礎上/16
  let htmlWidth = document.documentElement.clientWidth || document.body.clientWidth;
//得到html的Dom元素
  let htmlDom = document.getElementsByTagName('html')[0];
//設置根元素字體大小
  htmlDom.style.fontSize= htmlWidth/20 + 'px';
}
// 初始化
setRem();
// 改變窗口大小時重新設置 rem
window.onresize = function () {
  setRem()
}

在main.js中引入rem.js

import './libs/rem.js';

最后刷新頁面看下，就會發現原本用px的單位已經自動換算成了rem;

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持創新互聯。

文章名稱：vue3.0中使用postcss-pxtorem的具體方法
鏈接地址：http://vcdvsql.cn/article0/gdigoo.html

成都網站建設公司_創新互聯，為您提供自適應網站、關鍵詞優化、定制開發、品牌網站建設、全網營銷推廣、網站排名

廣告

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯