自適應(yīng)方案postcss-pxtorem使用步驟
更新時(shí)間：2024年11月28日 10:34:01 作者：SDNni
這篇文章主要介紹了如何使用postcss-pxtorem插件將px單位轉(zhuǎn)換為rem單位,包括安裝插件、創(chuàng)建配置文件和引入腳本的步驟,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下
1.下載postcss-pxtorem插件
安裝指定版本 npm i postcss-pxtorem@5.1.1
2.在根目錄添加 .postcssrc.js文件
module.exports = {
plugins: {
autoprefixer: {},
"postcss-pxtorem": {
rootValue: 37.5, //換算基數(shù)，
propList: ['*'],
unitToConvert: "px", // (String) 要轉(zhuǎn)換的單位，默認(rèn)是px。
widthOfDesignLayout: 1920, // (Number) 設(shè)計(jì)布局的寬度。對(duì)于pc儀表盤，一般是1920.
unitPrecision: 3, // (Number) 允許 REM 單位增長到的十進(jìn)制數(shù)字.
selectorBlackList: [".ignore", ".hairlines"], // (Array) 要忽略并保留為 px 的選擇器.
minPixelValue: 1, // (Number) 設(shè)置要替換的最小像素值.
mediaQuery: false, // (Boolean) 允許在媒體查詢中轉(zhuǎn)換 px.
},
},
};
3.在utils里添加rem.js文件
// 基準(zhǔn)大小
const baseSize = 37.5
// 設(shè)置 rem 函數(shù)
function setRem () {
// 當(dāng)前頁面寬度相對(duì)于 750 寬的縮放比例，可根據(jù)自己需要修改。
const scale = document.documentElement.clientWidth / 1920
// 設(shè)置頁面根節(jié)點(diǎn)字體大小
document.documentElement.style.fontSize = (baseSize * Math.min(scale, 2)) + 'px'
}
// 初始化
setRem()
// 改變窗口大小時(shí)重新設(shè)置 rem
window.onresize = function () {
setRem()
}4.引入main.js
import '@/utils/rem.js'
注意項(xiàng):
- 標(biāo)簽中直接定義的 width和height進(jìn)行不了轉(zhuǎn)換, 例如img標(biāo)簽.
- 標(biāo)簽中style屬性的width和height是可以被轉(zhuǎn)換的.
總結(jié)
到此這篇關(guān)于自適應(yīng)方案postcss-pxtorem使用步驟的文章就介紹到這了,更多相關(guān)postcss-pxtorem使用內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
js購物車實(shí)現(xiàn)思路及代碼(個(gè)人感覺不錯(cuò))
提起購物車想必只有在一些購物網(wǎng)站上才可以看得到，下面為大家介紹下使用js實(shí)現(xiàn)的購物車，感興趣的朋友可以參考下2013-12-12
學(xué)習(xí)JavaScript圖片預(yù)加載模塊
這篇文章主要介紹了js實(shí)現(xiàn)圖片預(yù)加載的方法，內(nèi)容很詳細(xì)，帶領(lǐng)大家全面認(rèn)識(shí)js圖片預(yù)加載模塊，感興趣的小伙伴們可以參考一下2016-11-11
js使用方法小結(jié)，比較不錯(cuò)，無論是新手，還是老手都是不錯(cuò)的。2009-05-05
微信小程序scroll-view仿拼多多橫向滑動(dòng)滾動(dòng)條
這篇文章主要為大家詳細(xì)介紹了微信小程序scroll-view仿拼多多橫向滑動(dòng)滾動(dòng)條，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-07-07
瀑布流布局很受廣大網(wǎng)民的青睞，本篇文章給大家介紹原生JS實(shí)現(xiàn)美圖瀑布流布局，非常漂亮，需要的朋友可以參考下2015-09-09
這篇文章主要給大家介紹了關(guān)于Echarts重新渲染的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2022-05-05
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)彈框效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-03-03
去tx面試過幾次，基本都會(huì)考到數(shù)組去重。其實(shí)平時(shí)工作中幾乎不會(huì)用到，再者也沒認(rèn)真去了解過，所以基本上每次面到這里都會(huì)露出很大的馬腳，面試自然也over了2011-05-05
typescript環(huán)境安裝并開啟VSCode自動(dòng)監(jiān)視編譯ts文件為js文件
這篇文章主要介紹了安裝typescript環(huán)境并開啟VSCode自動(dòng)監(jiān)視編譯ts文件為js文件,本文教大家最基礎(chǔ)的安裝和配置自動(dòng)監(jiān)視ts文件編譯成js文件，需要的朋友可以參考下2022-06-06
這篇文章主要給大家介紹了關(guān)于在ts文件中引入js模塊編寫聲明文件的寫法示例,TypeScript是JavaScript的超集,TypeScript會(huì)進(jìn)類型檢查,需要的朋友可以參考下2023-08-08