您好,登錄后才能下訂單哦!
postcss-pxtorem是PostCSS的插件,用于將像素單元生成rem單位。
前端開發(fā)還原設計稿的重要性毋庸置疑,目前應用的單位最多還是rem,然而每次在制作過程中需要自己計算rem值,為了能夠直接按照設計圖的尺寸開發(fā),并且能自動編譯轉換成rem,下面就來分享下postcss-pxtorem的使用。
1.安裝依賴
npm install postcss-pxtorem -D
2.設置規(guī)則(更改postcss.config.js,該文件為使用vue-cli3自動創(chuàng)建的文件)
module.exports = { plugins: { 'autoprefixer': { browsers: ['Android >= 4.0', 'iOS >= 7'] }, 'postcss-pxtorem': { rootValue: 16,//結果為:設計稿元素尺寸/16,比如元素寬320px,最終頁面會換算成 20rem propList: ['*'] } } }
操作到這里移動端自動適配了嗎,當然不能,目前只是將px單位轉換成rem,移動端適配還差最后一步,初接觸rem理解起來有點懵,后來發(fā)現(xiàn)了一個好理解的方法,下面來分享一下。
現(xiàn)在我們作一個實驗,你可以新建一個網(wǎng)頁,并寫入如下代碼:
<div class="test"> <p class="hello">Hello</p> </div>
然后給html一個基本的樣式:
.test{ width:320px; height:160px; background-color: bisque; text-align: center; } .hello{ color:red; }
上邊我們使用了還是傳統(tǒng)的使用px作為單位,我們在移動端調試模式iphone5環(huán)境查看一下。會發(fā)現(xiàn)div的寬度是正好的,我們再查看一下字體,發(fā)現(xiàn)大小是16px。
我們現(xiàn)在可以把CSS中的px單位換成rem單位來進行測試。因為html根元素的字體大小是16px,那么換成rem單位,直接除以16就好。
.test{ width:20rem; height:10rem; background-color: bisque; text-align: center; } .hello{ color:red; font-size:1rem; }
明白了REM的原理后,我們就可以使用這個特點來進行適應布局了,這也是現(xiàn)在比較主流的移動端web適配方案。src目錄下,新建 libs/rem.js 輸入如下代碼
// 設置 rem 函數(shù) function setRem () { // 320 默認大小16px; 320px = 20rem ;每個元素px基礎上/16 let htmlWidth = document.documentElement.clientWidth || document.body.clientWidth; //得到html的Dom元素 let htmlDom = document.getElementsByTagName('html')[0]; //設置根元素字體大小 htmlDom.style.fontSize= htmlWidth/20 + 'px'; } // 初始化 setRem(); // 改變窗口大小時重新設置 rem window.onresize = function () { setRem() }
在main.js中引入rem.js
import './libs/rem.js';
最后刷新頁面看下,就會發(fā)現(xiàn)原本用px的單位已經(jīng)自動換算成了rem;
以上就是本文的全部內(nèi)容,希望對大家的學習有所幫助,也希望大家多多支持億速云。
免責聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權內(nèi)容。