快捷導(dǎo)航

postcss-pxtorem實(shí)現(xiàn)頁(yè)面自適應(yīng)的原理解析

更新時(shí)間：2023年12月08日 11:56:16 作者：yunchong_zhao

postcss-pxtorem是一個(gè)PostCSS插件,用于將CSS中的像素值轉(zhuǎn)換為rem單位,以實(shí)現(xiàn)響應(yīng)式布局和適配不同屏幕尺寸的需求,本文給大家介紹postcss-pxtorem實(shí)現(xiàn)頁(yè)面自適應(yīng)的原理解析,感興趣的朋友一起看看吧

先聲明一點(diǎn)這玩意本身不能實(shí)現(xiàn)哈，他只是一個(gè)工具，更是一個(gè)postcss的插件幫助我們從px轉(zhuǎn)化成為rem
比如我們的代碼

div {
	height: 100px;
	width: 100px;
}

經(jīng)過(guò)這個(gè)插件轉(zhuǎn)化之后變成
假設(shè)變成下面這樣哈

div {
	height: 1rem;
	width: 1rem;
}

其他沒(méi)啥子太大作用

下面請(qǐng)?jiān)试S我跑題講講其他的知識(shí)
比如 750的設(shè)計(jì)稿上有寬度 375px寬度的元素那么它就會(huì)占用設(shè)備寬度的一半
如果這個(gè)設(shè)計(jì)到了 375px的設(shè)備上我們?cè)僭O(shè)置 375px的話那就會(huì)占滿整個(gè)設(shè)備了。

那么問(wèn)題來(lái)了有沒(méi)有什么單位可以讓我在這兩上面實(shí)現(xiàn)同樣的效果呢
當(dāng)然有了。我們直接設(shè)置百分之50不就行了嘛

聰明的boy，但是今天不說(shuō)這個(gè)百分比寬度也不說(shuō)那個(gè)視口寬度單位
今天講rem這個(gè)單位
rem 是 CSS 中的一個(gè)長(zhǎng)度單位，全稱是 “root em”。它是相對(duì)于根元素（即HTML元素）的字體大小來(lái)計(jì)算的。例如，如果 HTML 元素的字體大小是 16px，那么 1rem 就等于 16px。如果 HTML 元素的字體大小改變，那么使用 rem 作為單位的元素的大小也會(huì)相應(yīng)地改變。

看了上面介紹我在想我們可不可以這樣做
在750px設(shè)計(jì)稿上設(shè)置一個(gè) 1rem寬度的元素。跑到375px上面也是1rem但是他倆的展示效果是一樣的

舉個(gè)例子哈 750上面假設(shè) 1rem = 100px
那么要想實(shí)現(xiàn)同樣的效果那么我們?cè)?375設(shè)備上就需要 1rem = 50px

這個(gè)怎么做到呢我們就通過(guò)調(diào)整根元素的字體大小來(lái)來(lái)實(shí)現(xiàn)

在750設(shè)備上

htmlDom.style.fontSize = 100 + 'px'

在 375設(shè)備上

htmlDom.style.fontSize = 50 + 'px'

有童鞋會(huì)有疑問(wèn) 那么我其他的設(shè)備怎么辦總不能一個(gè)設(shè)備寫(xiě)一個(gè)這個(gè)吧
嘿嘿這樣就需要引入一個(gè) 比例了我們固定好一個(gè)比例根據(jù)我們?cè)O(shè)計(jì)稿的寬度尺寸
比如是 750的那么scale比例就是

假設(shè) 100px = 1rem 那么 750px 就是 7.5rem了

 const scale = 750 / 100
 console.log(scale) // 輸出 7.5

這樣話在375的設(shè)備上就是

// 輸出 50px

htmlDom.style.fontSize = 375 / 7.5 + 'px'

如果設(shè)備寬度是 420,那么

htmlDom.style.fontSize = 420 / 7.5 + 'px' = '56px'

上面其實(shí)我們可以提取出來(lái)一個(gè)專門(mén)處理的函數(shù)

// 按照設(shè)計(jì)稿 375px計(jì)算  1rem 16px 那么 如果設(shè)備是750px的話 那么 1rem就是 32px
        function setRem(designWidth = 750) {
            const scale = designWidth / 100
            const htmlDom = document.querySelector('html')
            const htmlWidth = document.documentElement.clientWidth || document.body.clientWidth
            htmlDom.style.fontSize = htmlWidth / scale + 'px'
        }
        window.onload = function() {
            setRem()
        }
        window.onresize = function() {
            setRem()
        }

重新回到我們的postcss-pxtorem哈我們?cè)谠O(shè)計(jì)的時(shí)候總不能自己一直在哪里算吧如果，比如設(shè)計(jì)稿寬度 20px 我們還需要自己去手寫(xiě)或者計(jì)算多少rem 多費(fèi)時(shí)間啊
那么有沒(méi)有一個(gè)插件我們可以自己手寫(xiě)px它自動(dòng)根據(jù)我們?cè)O(shè)置的給轉(zhuǎn)化成rem這樣多爽
那么它來(lái)了
怎么用呢。和webpack一樣需要我們安裝一些東西哈
首先在我們的html文件目錄下（我這個(gè)可不是基于webpack哈）

npm init -y
npm i postcss postcss-cli -D
npm i postcss-pxtorem -S

然后在package.json同級(jí)別目錄下創(chuàng)建一個(gè) postcss.config.js

module.exports = {
    plugins: [
      require('postcss-pxtorem')({
        rootValue: 100,
        propList: ['*'],
        minPixelValue: 2 // 設(shè)置最小的轉(zhuǎn)換數(shù)值，如果為1的話，只有2px以上的值才會(huì)被轉(zhuǎn)換
      }),
      // 其他插件...
    ],
  };

在package.json文件配置下

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "postcss src/style.css -o dist/style.css"
  },

運(yùn)行 npm run build
在src/style.css

div {
    height: 200px;
    width: 200px;
    background-color: #f00;
}
div p {
    height: 1px;
    width:  1px;
}

看下效果哈

到此這篇關(guān)于postcss-pxtorem實(shí)現(xiàn)頁(yè)面自適應(yīng)的原理的文章就介紹到這了,更多相關(guān)postcss-pxtorem頁(yè)面自適應(yīng)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: