今天就跟大家聊聊有關使用Vant+postcss-pxtorem 怎么實現(xiàn)一個瀏覽器適配功能，可能很多人都不太了解，為了讓大家更加了解，小編給大家總結了以下內(nèi)容，希望大家根據(jù)這篇文章可以有所收獲。

武城網(wǎng)站制作公司哪家好，找創(chuàng)新互聯(lián)！從網(wǎng)頁設計、網(wǎng)站建設、微信開發(fā)、APP開發(fā)、成都響應式網(wǎng)站建設公司等網(wǎng)站項目制作，到程序開發(fā)，運營維護。創(chuàng)新互聯(lián)從2013年開始到現(xiàn)在10年的時間，我們擁有了豐富的建站經(jīng)驗和運維經(jīng)驗，來保證我們的工作的順利進行。專注于網(wǎng)站建設就選創(chuàng)新互聯(lián)。

一、npm安裝

npm install postcss-pxtorem --save

二、新建.postcssrc.js做如下修改

注：
1、以下注釋代碼開啟后運行腳本會出現(xiàn)報錯的提示,雖不知道有什么用,注釋就好啦。

module.exports = {
 "plugins": {
 	//"postcss-import": {},
  //"postcss-url": {},
  "autoprefixer": {
   browsers: ['Android >= 4.0', 'iOS >= 7']
  },
  "postcss-pxtorem": {
   "rootValue": 32,
   "propList": ["*"]
  }
 }
}

三、新建rem.js

const baseSize = 32
// 設置 rem 函數(shù)
function setRem () {
 // 當前頁面寬度相對于 750 寬的縮放比例，可根據(jù)自己需要修改。
 const scale = document.documentElement.clientWidth / 750
 // 設置頁面根節(jié)點字體大小
 document.documentElement.style.fontSize = (baseSize * Math.min(scale, 2)) + 'px'
}
// 初始化
setRem()
// 改變窗口大小時重新設置 rem
window.onresize = function () {
 setRem()
}

四、在main.js中引入rem.js

import "./rem.js"

至此，Vant+postcss-pxtorem 實現(xiàn)瀏覽器適配就完成了。
即可直接在樣式中暢快的使用px且自動轉換成rem。
等等先別走?。。】凸佟?br/>以為到這里就結束了嗎?NO,往下看還有一份不基于postcss-pxtorem 來實現(xiàn)的rem適配哦。
話不多說直接上代碼。

五、新建rem.js并再main.js中引入

(function (doc, win) {
 var docEl = doc.documentElement
 var resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize'
 var recalc = function () {
  var clientWidth = docEl.clientWidth
  if (!clientWidth) return
  if (parseInt(20 * (clientWidth / 320)) > 35) {
   docEl.style.fontSize = 35 + 'px'
  } else {
   docEl.style.fontSize = 20 * (clientWidth / 320) + 'px'
  }
 }
 if (!doc.addEventListener) return
 win.addEventListener(resizeEvt, recalc, false)
 doc.addEventListener('DOMContentLoaded', recalc, false)
})(document, window)

import "./rem.js"

六、添加樣式全局變量并使用

// 當前頁面寬度相對于 750 寬的縮放比例，可根據(jù)自己需要修改。
$rem: (640/750)/40;
body{
	width: $rem * 24rem;
}

看完上述內(nèi)容，你們對使用Vant+postcss-pxtorem 怎么實現(xiàn)一個瀏覽器適配功能有進一步的了解嗎？如果還想了解更多知識或者相關內(nèi)容，請關注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝大家的支持。

新聞名稱：使用Vant+postcss-pxtorem怎么實現(xiàn)一個瀏覽器適配功能-創(chuàng)新互聯(lián)
當前路徑：http://chinadenli.net/article36/desjsg.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供小程序開發(fā)、域名注冊、外貿(mào)網(wǎng)站建設、靜態(tài)網(wǎng)站、標簽優(yōu)化、App設計

廣告

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