溫馨提示×
您好，登錄后才能下訂單哦！
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹“vue中怎么使用rem替換px”，在日常操作中，相信很多人在vue中怎么使用rem替換px問題上存在疑惑，小編查閱了各式資料，整理出簡(jiǎn)單好用的操作方法，希望對(duì)大家解答”vue中怎么使用rem替換px”的疑惑有所幫助！接下來，請(qǐng)跟著小編一起來學(xué)習(xí)吧！
vue-cli:使用腳手架來搭建vue前端項(xiàng)目
postcss:就是postcss用js插件幫你轉(zhuǎn)換css樣式的一個(gè)工具。比如，這里的把你的文件里面16px替換成1rem(根大小默認(rèn)16px的情況）；這樣你就不用自己去算了！
cssrem:主要是幫你把px(UI設(shè)計(jì)給設(shè)計(jì)稿上的px)轉(zhuǎn)換成對(duì)應(yīng)的rem
然后：還要用js代碼去動(dòng)態(tài)算根目錄應(yīng)該有的字體大小，反正就是一段js代碼去動(dòng)態(tài)獲取屏幕寬度
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">
module.exports = {
"plugins": {
"postcss-import": {}, //用于@import導(dǎo)入css文件
"postcss-url": {}, //路徑引入css文件或node_modules文件
"postcss-aspect-ratio-mini": {}, //用來處理元素容器寬高比
"postcss-write-svg": { utf8: false }, //用來處理移動(dòng)端1px的解決方案。該插件主要使用的是border-image和background來做1px的相關(guān)處理。
"postcss-cssnext": {}, //該插件可以讓我們使用CSS未來的特性，其會(huì)對(duì)這些特性做相關(guān)的兼容性處理。
"postcss-px-to-viewport": { //把px單位轉(zhuǎn)換為vw、vh、vmin或者vmax這樣的視窗單位，也是vw適配方案的核心插件之一。
viewportWidth: 750, //視窗的寬度
viewportHeight: 1334, //視窗的高度
unitPrecision: 3, //將px轉(zhuǎn)化為視窗單位值的小數(shù)位數(shù)
viewportUnit: "vw", //指定要轉(zhuǎn)換成的視窗單位值
selectorBlackList: [".ignore", ".hairlines"], //指定不轉(zhuǎn)換視窗單位值得類，可以自定義，可以無限添加
minPixelValue: 1, //小于等于1px不轉(zhuǎn)換為視窗單位
mediaQuery: false //允許在媒體查詢中使用px
},
"postcss-viewport-units":{}, //給vw、vh、vmin和vmax做適配的操作,這是實(shí)現(xiàn)vw布局必不可少的一個(gè)插件
"cssnano": { //主要用來壓縮和清理CSS代碼。在Webpack中，cssnano和css-loader捆綁在一起，所以不需要自己加載它。
preset: "advanced", //重復(fù)調(diào)用
autoprefixer: false, //cssnext和cssnano都具有autoprefixer,事實(shí)上只需要一個(gè)，所以把默認(rèn)的autoprefixer刪除掉，然后把cssnano中的autoprefixer設(shè)置為false。
"postcss-zindex": false //只要啟用了這個(gè)插件，z-index的值就會(huì)重置為1
}
}
}當(dāng)你切換不同尺寸的屏幕的時(shí)候，需要?jiǎng)討B(tài)改變根字體的大小，一段簡(jiǎn)單的js插入在head里面：在public目錄下直接新建的shipei.js,然后將這個(gè)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.getBoundingClientRect().width的最小值；除以750，乘以32；懂的起撒，就是原本是750大小的32px;如果屏幕大小變成了375px,那么字體就是16px;也就是根字體fontSize大小和屏幕大小成正比變化！是不是很簡(jiǎn)單
}
window.addEventListener("resize", autoRootFontSize);
autoRootFontSize();
})();<!DOCTYPE html> <html lang=""> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1, 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/javascript" charset="utf-8"></script> </head> <body> <div id="app"></div> <!-- built files will be auto injected --> </body> </html>
注意 放到 public 里的東西，可以不用寫開頭目錄，腳手架打包的時(shí)候找不到，會(huì)去public文件夾找的
getBoundingClientRect().width獲取到的其實(shí)是父級(jí)的右邊距離瀏覽器原點(diǎn)(0,0)左邊距離瀏覽器原點(diǎn)(0,0)的距離,即父級(jí)的寬度+2padding+2border。
此時(shí)的clientWidth等于父級(jí)的寬度+2*padding,不包括邊框的寬度。
當(dāng)不隱藏子級(jí)內(nèi)容,即overflow為auto時(shí)，前者的寬度依然為這個(gè)數(shù)字,因?yàn)楦讣?jí)并沒有改編盒模型。后者的寬度為上述得到的寬度-滾動(dòng)條的寬度(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/javascript">
/*
getBoundingClientRect().width獲取到的其實(shí)是父級(jí)的右邊距離瀏覽器原點(diǎn)(0,0)左邊距離瀏覽器原點(diǎn)(0,0)的距離,即父級(jí)的寬度+2padding+2border。
此時(shí)的clientWidth等于父級(jí)的寬度+2*padding,不包括邊框的寬度。
當(dāng)不隱藏子級(jí)內(nèi)容,即overflow為auto時(shí)，前者的寬度依然為這個(gè)數(shù)字,因?yàn)楦讣?jí)并沒有改編盒模型。后者的寬度為上述得到的寬度-滾動(dòng)條的寬度(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>運(yùn)行結(jié)果是clientWidth為516,他的計(jì)算是內(nèi)容寬+2padding
getWidth(也就是getBoundingClientRect().width）包括內(nèi)容寬+2padding+2border
第五步：就是將設(shè)計(jì)稿上的px轉(zhuǎn)換成rem為單位：安裝 cssrem插件 (在插件市場(chǎng)）：
然后在 文件-->首選項(xiàng)-->設(shè)置 然后搜索cssrem 設(shè)置Root Font Size為16即可
到此，關(guān)于“vue中怎么使用rem替換px”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識(shí)，請(qǐng)繼續(xù)關(guān)注億速云網(wǎng)站，小編會(huì)繼續(xù)努力為大家?guī)砀鄬?shí)用的文章！
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號(hào)
手機(jī)網(wǎng)站二維碼