vue3.0中使用postcss-pxtorem的具體方法

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

創(chuàng)新互聯(lián)公司是一家專(zhuān)業(yè)提供新區(qū)企業(yè)網(wǎng)站建設(shè),專(zhuān)注與成都網(wǎng)站制作、成都做網(wǎng)站、成都h5網(wǎng)站建設(shè)、小程序制作等業(yè)務(wù)。10年已為新區(qū)眾多企業(yè)、政府機(jī)構(gòu)等服務(wù)。創(chuàng)新互聯(lián)專(zhuān)業(yè)網(wǎng)絡(luò)公司優(yōu)惠進(jìn)行中。

前端開(kāi)發(fā)還原設(shè)計(jì)稿的重要性毋庸置疑，目前應(yīng)用的單位最多還是rem,然而每次在制作過(guò)程中需要自己計(jì)算rem值，為了能夠直接按照設(shè)計(jì)圖的尺寸開(kāi)發(fā)，并且能自動(dòng)編譯轉(zhuǎn)換成rem，下面就來(lái)分享下postcss-pxtorem的使用。

1.安裝依賴(lài)

npm install postcss-pxtorem -D

2.設(shè)置規(guī)則（更改postcss.config.js,該文件為使用vue-cli3自動(dòng)創(chuàng)建的文件）

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

操作到這里移動(dòng)端自動(dòng)適配了嗎，當(dāng)然不能，目前只是將px單位轉(zhuǎn)換成rem,移動(dòng)端適配還差最后一步,初接觸rem理解起來(lái)有點(diǎn)懵，后來(lái)發(fā)現(xiàn)了一個(gè)好理解的方法，下面來(lái)分享一下。

現(xiàn)在我們作一個(gè)實(shí)驗(yàn)，你可以新建一個(gè)網(wǎng)頁(yè)，并寫(xiě)入如下代碼：

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

然后給html一個(gè)基本的樣式:

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

上邊我們使用了還是傳統(tǒng)的使用px作為單位，我們?cè)谝苿?dòng)端調(diào)試模式iphone5環(huán)境查看一下。會(huì)發(fā)現(xiàn)div的寬度是正好的，我們?cè)俨榭匆幌伦煮w，發(fā)現(xiàn)大小是16px。

我們現(xiàn)在可以把CSS中的px單位換成rem單位來(lái)進(jìn)行測(cè)試。因?yàn)閔tml根元素的字體大小是16px，那么換成rem單位，直接除以16就好。

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

明白了REM的原理后，我們就可以使用這個(gè)特點(diǎn)來(lái)進(jìn)行適應(yīng)布局了，這也是現(xiàn)在比較主流的移動(dòng)端web適配方案。src目錄下，新建 libs/rem.js 輸入如下代碼

// 設(shè)置 rem 函數(shù)
function setRem () {

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

在main.js中引入rem.js

import './libs/rem.js';

最后刷新頁(yè)面看下，就會(huì)發(fā)現(xiàn)原本用px的單位已經(jīng)自動(dòng)換算成了rem;

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。

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

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供自適應(yīng)網(wǎng)站、關(guān)鍵詞優(yōu)化、定制開(kāi)發(fā)、品牌網(wǎng)站建設(shè)、全網(wǎng)營(yíng)銷(xiāo)推廣、網(wǎng)站排名

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀(guān)點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話(huà)：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容