• 先聲明一點這玩意本身不能實現哈，他只是一個工具，更是一個postcss的插件 幫助我們從px轉化成為rem
• 比如我們的代碼

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

經過這個插件轉化之后變成
假設變成下面這樣哈

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

其他沒啥子太大作用

下面請允許我跑題講講其他的知識
比如 750的設計稿上 有寬度 375px寬度的元素 那么它就會占用設備寬度的一半
如果這個設計到了 375px的設備上 我們再設置 375px的話 那就會占滿整個設備了。

那么問題來了 有沒有什么單位 可以讓我在這兩上面實現同樣的效果呢
當然有了。我們直接設置 百分之50不就行了嘛

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

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

舉個例子哈 750上面 假設 1rem = 100px
那么要想實現同樣的效果那么 我們在 375設備上 就需要 1rem = 50px

這個怎么做到呢 我們就通過調整 根元素的字體大小來來實現

在750設備上

htmlDom.style.fontSize = 100 + 'px'

在 375設備上

htmlDom.style.fontSize = 50 + 'px'

有童鞋會有疑問 那么我其他的設備 怎么辦 總不能一個設備寫一個這個吧
嘿嘿 這樣就需要引入一個 比例了 我們固定好一個比例 根據我們設計稿的寬度尺寸
比如是 750的 那么scale比例就是

假設 100px = 1rem 那么 750px 就是 7.5rem了

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

這樣話 在375的設備上就是

// 輸出 50px

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

如果設備寬度是 420,那么

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

上面其實我們可以提取出來一個專門處理的函數

// 按照設計稿 375px計算  1rem 16px 那么 如果設備是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哈 我們在設計的時候總不能自己一直在哪里算吧 如果，比如 設計稿寬度 20px 我們還需要自己去手寫或者計算多少rem 多費時間啊
那么有沒有一個插件 我們可以自己手寫px它自動根據我們設置的給轉化成rem這樣多爽
那么它來了
怎么用呢。和webpack一樣需要我們安裝一些東西哈
首先在我們的html文件目錄下 （我這個可不是基于webpack哈）

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

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

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

在package.json文件配置下

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

運行 npm run build
在src/style.css

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

看下效果哈

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

最新評論