postcss-pxtorem移動(dòng)端適配的實(shí)現(xiàn)
發(fā)布時(shí)間：2019-12-03 15:33:53 作者：woniu12 
我要評(píng)論
我要評(píng)論這篇文章主要介紹了postcss-pxtorem移動(dòng)端適配的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
執(zhí)行命令 安裝插件postcss-pxtorem
npm install postcss-pxtorem -D
postcss.config.js 新建package.json同一個(gè)目錄下，文件內(nèi)容如下
module.exports = {
plugins: {
'autoprefixer': {
browsers: ['Android >= 4.0', 'iOS >= 7']
},
'postcss-pxtorem': {
rootValue: 32,//結(jié)果為：設(shè)計(jì)稿元素尺寸/32(一般750px的設(shè)計(jì)稿的根元素大小設(shè)置32)，比如元素寬320px,最終頁面會(huì)換算成 10rem
propList: ['*'], //屬性的選擇器，*表示通用
selectorBlackList:[] 忽略的選擇器 .ig- 表示 .ig- 開頭的都不會(huì)轉(zhuǎn)換
}
}
}
postcss.config.js此文件配置完成后需要重啟項(xiàng)目生效
在根目錄src中新建util目錄下新建rem.js等比適配文件
// rem等比適配配置文件
// 基準(zhǔn)大小
const baseSize = 750 // 注意此值要與 postcss.config.js 文件中的 rootValue保持一致
// 設(shè)置 rem 函數(shù)
function setRem () {
// 當(dāng)前頁面寬度相對(duì)于 375寬的縮放比例，可根據(jù)自己需要修改,一般設(shè)計(jì)稿都是寬750(圖方便可以拿到設(shè)計(jì)圖后改過來)。
const scale = document.documentElement.clientWidth / 375
// 設(shè)置頁面根節(jié)點(diǎn)字體大小（“Math.min(scale, 2)” 指最高放大比例為2，可根據(jù)實(shí)際業(yè)務(wù)需求調(diào)整）
document.documentElement.style.fontSize = baseSize * Math.min(scale, 2) + 'px'
}
// 初始化
setRem()
// 改變窗口大小時(shí)重新設(shè)置 rem
window.onresize = function () {
setRem()
}
在 main.js中引入 rem.js 文件，然后啟動(dòng)項(xiàng)目
以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
淺析CSS中單位px、rem、em、vh、vw之間的區(qū)別
這篇文章主要介紹了CSS中單位px、rem、em、vh、vw之間的區(qū)別,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-05-25CSS 中px、em、rem、%、vw、vh單位之間的區(qū)別詳解
這篇文章主要介紹了CSS 中px、em、rem、%、vw、vh單位之間的區(qū)別，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友參考下吧2020-03-16
css基于媒體查詢和 rem 的響應(yīng)式布局實(shí)踐
這篇文章主要介紹了css基于媒體查詢和 rem 的響應(yīng)式布局實(shí)踐的相關(guān)資料,小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-07-30
移動(dòng)端使用 rem 單位時(shí) css sprites 定位問題的解決
現(xiàn)在開發(fā)移動(dòng)端 wap 頁面，相信大家都會(huì)使用強(qiáng)大的 rem 單位去適配各種機(jī)型和屏幕；這篇文章主要介紹了移動(dòng)端使用 rem 單位時(shí) css sprites 定位問題的解決，小編覺得挺不錯(cuò)2018-06-20- 本文主要介紹了CSS中px em rem區(qū)別與使用。具有很好的參考價(jià)值。下面跟著小編一起來看下吧2017-03-27
- 相信每位前端工程師們都有這么一個(gè)體會(huì)，國內(nèi)的設(shè)計(jì)師大都喜歡用px，而國外的網(wǎng)站大都喜歡用em和rem，那么三者有什么區(qū)別，又各自有什么優(yōu)劣呢？下面這篇文章小編就來給大2017-02-24
知識(shí)普及：徹底搞懂CSS中單位px和em,rem的區(qū)別
國內(nèi)的設(shè)計(jì)師大都喜歡用px，而國外的網(wǎng)站大都喜歡用em和rem，那么三者有什么區(qū)別呢？下面腳本之家小編給大家詳細(xì)介紹下2016-05-06
這篇文章主要介紹了CSS 中 em 和 rem 單位的區(qū)別,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-05-24
