vue專案中使用rem替換px的實現示例
目錄
- 工具
- 安裝外掛
- 在專案根目錄下新增.postrc.檔案
- index.html
- 關於
移動端頁面適配，rem和vw適配方案
基礎點：rem相對根節點字型的大小。所以不用px;
根字型：字型的大小px;
px：你就當成cm(釐米)這樣的東西吧；
基準：750設計稿（一般UI設計師給的都是750的設計稿）；
工具
-cli:使用腳手架來搭建vue前端專案
postcss:就是postcss用js外掛幫你轉換css樣式的一個工具。比如，這裡的把你的檔案裡面16px替換成1rem(根大小預設16px的情況）；這樣你就不用自己去算了！
cssrem:主要是幫你把px(UI設計給設計稿上的px)轉換成對應的rem
然後：還要用js程式碼去動態算根目錄應該有的字型大小，反正就是一段js程式碼去動態獲取螢幕寬度
安裝外掛
npm i postcss，postcss-pxtorem，postcss-loader，postcss-import，postcss-url
然後再index.html裡面加上
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1">
在專案根目錄下新增.postcssrc.js檔案
module.exports = {
"plugins": {
"postcss-import": {},//用於@import匯入css檔案
"postcss-url": {},//路徑引入css檔案或node_modules檔案
"postcss-aspect-ratio-mini": {},//用來處理元素容器寬高比
"postcss-write-svg": { utf8: false },//用來處理移動端1px的解決方案。該外掛主要使用的是border-image和background來做1px的相關處理。
"postcss-cssnext": {},//該外掛可以讓我們使用CSS未來的特性，其會對這些特性做相關的相容性處理。
"postcss-px-to-viewport": { //把px單位轉換為vw、vh、vmin或者vmax這樣的視窗單位，也是vw適配方案的核心外掛之一。
viewportWidth: 750,//視窗的寬度
viewportHeight: 1334,//視窗的高度
unitPrecision: 3,//將px轉化為視窗單位值的小數位數
viewportUnit: 'vw',//指定要轉換成的視窗單位值
selectorBlackList: ['.ignore','.hairlines'],//指定不轉換視窗單位值得類，可以自定義，可以無限新增
minPixelValue: 1,//小於等於1px不轉換為視窗單位
mediaQuery: false //允許在媒體查詢中使用px
},"postcss-viewport-units":{},//給vw、vh、vmin和vmax做適配的操作,這是實現vw佈局必不可少的一個外掛
"cssnano": { //主要用來壓縮和清理CSS程式碼。在Webpack中，cssnano和css-loader捆綁在一起，所以不需要自己載入它。
preset: "advanced",//重複呼叫
autoprefixer: false,//cssnext和cssnano都具有autoprefixer,事實上只需要一個，所以把預設的autoprefixer刪除掉，然後把cssnano中的autoprefixer設定為false。
"postcss-zindex": false //只要啟用了這個外掛，z-index的值就會重置為1
}
}
}
當你切換不同尺寸的螢幕的時候，需要動態改變根字型的大小，一段簡單的js插入在head裡面：在public目錄下直接新建的shipei.js,然後將這個js引入到index.html的head裡面
//shipei.js
(function() {
function autoRootFontSize() {
document.documentElement.style.fontSize = Math.min(screen.width,document.documentElement.getBoundingClientRect().width) / 750 * 32 + 'px';
// 取screen.width和document.documentElement.http://www.cppcns.com
index.html
<!DOCTYPE htmhttp://www.cppcns.coml>
<html lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,maximum-scale=1">
<link rel="stylesheet" href="/public.css" rel="external nofollow" type="text/css">
<link rel="icon" href="<%= BASE_URL %>favicon.ico" rel="external nofollow" >
<title><%= htmlWebpackPlugin.options.title %></title>
<script src="/shipei.js" type="text/" charset="utf-8"></script>
</head>
<body>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
注意 放到 public 裡的東西，可以不用寫開頭目錄，腳手架打包的時候找不到，會去public資料夾找的
關於
getBoundingClientRect().width獲取到的其實是父級的右邊距離瀏覽器原點(0,0)左邊距離瀏覽器原點(0,0)的距離,即父級的寬度+2padding+2border。
此時的clientWidth等於父級的寬度+2*padding,不包括邊框的寬度。
當不隱藏子級內容,即overflow為auto時，前者的寬度依然為這個數字,因為父級並沒有改編盒模型。後者的寬度為上述得到的寬度-滾動條的寬度(17px);
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="divParent" style="background-color: #aaa; padding:8px; border:solid 7px #000; height:200px; width:500px; overflow:hidden;">
<div id="divDisplay" style="background-color: #0f0; margin: 30px; padding: 10px;
height: 400px; width: 600px; border: solid 3px #f00;">
</div>
</div>
</body>
</html>
<script type="text/script">
/*
getBoundingClientRect().width獲取到NNBMLzva的其實是父級的右邊距離瀏覽器原點(0,即父級的http://www.cppcns.com寬度+2padding+2border。
此時的clientWidth等於父級的寬度+2*padding,不包括邊框的寬度。
當不隱藏子級內容,因為父級並沒有改編盒模型。後者的寬度為上述得到的寬度-滾動條的寬度(17px);例子如下:
*/
var divP = document.getElementById('divParent');
var divD = document.getElementById('divDisplay');
var clientWidth = divP.clientWidth;
var getWidth = divP.getBoundingClientRect().width;
divD.innerHTML += 'clientWidth: ' + clientWidth + '<br/>';
divD.innerHTML += 'getWidth: ' + getWidth + '<br/>';
</script>
執行結果是clientWidth為516,他的計算是內容寬+2padding
getWidth(也就是getBoundingClientRect().width）包括內容寬+2padding+2border
第五步：就是將設計稿上的px轉換成rem為單位：安裝 cssrem外掛 (在外掛市場）：
然後在 檔案-->首選項-->設定 然後搜尋cssrem 設定Root Font Size為16即可
到此這篇關於vue專案中使用rem替換px的實現示例的文章就介紹到這了,更多相關vue rem替換px內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！