自適應(yīng)方案postcss-pxtorem使用步驟
更新時間：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è)計布局的寬度。對于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)前頁面寬度相對于 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'
注意項:
- 標(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)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
隨著以Firefox為代表的第三方瀏覽器的興起，我們做的網(wǎng)站也不能再JUST IE了，如果把原來的一些javascript代碼放到IE以外的瀏覽器的話，往往都不能正常運(yùn)行或出錯，所以這里介紹一下怎么改進(jìn)我們的JS，讓它能更加規(guī)范，更加具有兼容性。2008-09-09
本文主要介紹了js的三種繼承方式。具有一定的參考價值，下面跟著小編一起來看下吧2017-01-01
微信小程序?qū)崿F(xiàn)添加手機(jī)聯(lián)系人功能示例
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)添加手機(jī)聯(lián)系人功能,結(jié)合實例形式分析了微信小程序添加聯(lián)系人的具體步驟,包括布局與邏輯實現(xiàn)技巧,需要的朋友可以參考下2017-11-11
在網(wǎng)頁中實時的顯示時間，不但可以給網(wǎng)頁添色，還可以方便瀏覽者掌握當(dāng)前時間，為了提高網(wǎng)站的開發(fā)速度，可以把主代碼封裝在一個單獨的函數(shù)里面，在需要的時候直接調(diào)用 而我為了演示，直接寫在了主頁面，方便大家觀看2013-06-06
本篇文章主要介紹了詳解webpack介紹&安裝&常用命令，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-06-06
這篇文章主要為大家分享了純JS單頁面賽車游戲制作代碼，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-03-03
學(xué)習(xí)使用bootstrap3柵格系統(tǒng)
這篇文章主要教會大家學(xué)習(xí)使用bootstrap3柵格系統(tǒng)，bootstrap開發(fā)環(huán)境搭建，還介紹了柵格系統(tǒng)的類型，感興趣的小伙伴們可以參考一下2016-04-04
這篇文章主要介紹了JS+CSS相對定位實現(xiàn)的下拉菜單,涉及JavaScript結(jié)合css的定位技術(shù)實現(xiàn)下拉菜單的相關(guān)技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-10-10
使用幻燈片效果的網(wǎng)站目前很普遍，本以為很復(fù)雜，實現(xiàn)起來卻發(fā)現(xiàn)很簡單，現(xiàn)成的jquery插件jquery.KinSlideshow.js便可實現(xiàn)幻燈片效果2013-11-11
在線的EditPlus注冊碼生成器，看了看還真是，在這里exe的注冊機(jī)病毒太多，純js的在線注冊機(jī)可就放心了，感興趣的各位可以參考下哈，希望可以幫助到你2013-03-03