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