vue項(xiàng)目中使用rem替換px的實(shí)現(xiàn)示例
移動(dòng)端頁面適配，rem和vw適配方案
基礎(chǔ)點(diǎn)：rem相對(duì)根節(jié)點(diǎn)字體的大小。所以不用px;根字體：字體的大小px;px：你就當(dāng)成cm(厘米)這樣的東西吧；基準(zhǔn)：750設(shè)計(jì)稿（一般UI設(shè)計(jì)師給的都是750的設(shè)計(jì)稿）；
工具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'>在項(xiàng)目根目錄下添加.postcssrc.js文件
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();})();index.html
<!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='http://www.cgvv.com.cn/public.css' rel='external nofollow' type='text/css'> <link rel='icon' href='http://www.cgvv.com.cn/bcjs/<%= BASE_URL %>favicon.ico' rel='external nofollow' > <title><%= htmlWebpackPlugin.options.title %></title> <script src='http://www.cgvv.com.cn/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文件夾找的
關(guān)于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 style='background-color: #aaa; padding:8px; border:solid 7px #000; height:200px; width:500px; overflow:hidden;'><div 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)容寬+2paddinggetWidth(也就是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項(xiàng)目中使用rem替換px的實(shí)現(xiàn)示例的文章就介紹到這了,更多相關(guān)vue rem替換px內(nèi)容請(qǐng)搜索好吧啦網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持好吧啦網(wǎng)！
相關(guān)文章：
1. html小技巧之td,div標(biāo)簽里內(nèi)容不換行2. HTML DOM setInterval和clearInterval方法案例詳解3. 告別AJAX實(shí)現(xiàn)無刷新提交表單4. 怎樣才能用js生成xmldom對(duì)象，并且在firefox中也實(shí)現(xiàn)xml數(shù)據(jù)島？5. 詳解CSS偽元素的妙用單標(biāo)簽之美6. CSS Hack大全-教你如何區(qū)分出IE6-IE10、FireFox、Chrome、Opera7. 詳解盒子端CSS動(dòng)畫性能提升8. CSS hack用法案例詳解9. XML入門的常見問題(一)10. 使用css實(shí)現(xiàn)全兼容tooltip提示框
網(wǎng)公網(wǎng)安備