快捷導(dǎo)航

自適應(yīng)方案postcss-pxtorem使用步驟

更新時(shí)間：2024年11月28日 10:34:01 作者：SDNni

這篇文章主要介紹了如何使用postcss-pxtorem插件將px單位轉(zhuǎn)換為rem單位,包括安裝插件、創(chuàng)建配置文件和引入腳本的步驟,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下

安裝指定版本
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 單位增長(zhǎng)到的十進(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)文章

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