因為項目需要,vue開發項目,必須將已寫的以px為單位的部分,轉換為rem。要是全部轉換,這大量的計算量,哪怕是sublime Text 的cssrem插件,也是一個龐大的工作量。所以,直接使用插件沒商量。
第一步:因為rem是根據更元素來計算大小,所以,捕捉到當前屏幕的大小并賦值給html,這是其一
第二步:使用px2rem插件,來捕捉當前項目的所有px,直接計算相對應數值。
這樣,以后寫界面,就可以直接用px來構建界面,不用自己去計算啦!
1、安裝插件(我是安裝了淘寶鏡像,所以是cnpm,若是沒裝淘寶鏡像,就npm)
$ cnpm i postcss-px2rem --save$ cnpm install px2rem-loader --save
2、配置px2rem
build目錄下vue-loader.conf.js中,做如下修改:
module.exports = {loaders: utils.cssLoaders({sourceMap: isProduction? config.build.productionSourceMap: config.dev.cssSourceMap,extract: isProduction}),transformToRequire: {video: 'src',source: 'src',img: 'src',image: 'xlink:href'},postcss:[require('postcss-px2rem')({'remUnit':37.5,'baseDpr':2})] /*因為我是以750px(iphone6)寬度為基準,所以remUnit為37.5*/}3、在static目錄中,建js文件夾,放flex.js:
(function(win, lib) {var doc = win.document;var docEl = doc.documentElement;var metaEl = doc.querySelector('meta[name="viewport"]');var flexibleEl = doc.querySelector('meta[name="flexible"]');var dpr = 0;var scale = 0;var tid;var flexible = lib.flexible || (lib.flexible = {});if (metaEl) {//console.warn('將根據已有的meta標簽來設置縮放比例');var match = metaEl.getAttribute('content').match(/initial/-scale=([/d/.]+)/);if (match) {scale = parseFloat(match[1]);dpr = parseInt(1 / scale);}} else if (flexibleEl) {var content = flexibleEl.getAttribute('content');if (content) {var initialDpr = content.match(/initial/-dpr=([/d/.]+)/);var maximumDpr = content.match(/maximum/-dpr=([/d/.]+)/);if (initialDpr) {dpr = parseFloat(initialDpr[1]);scale = parseFloat((1 / dpr).toFixed(2));}if (maximumDpr) {dpr = parseFloat(maximumDpr[1]);scale = parseFloat((1 / dpr).toFixed(2));}}}if (!dpr && !scale) {var isAndroid = win.navigator.appVersion.match(/android/gi);var isIPhone = win.navigator.appVersion.match(/iphone/gi);var devicePixelRatio = win.devicePixelRatio;if (isIPhone) {// iOS下,對于2和3的屏,用2倍的方案,其余的用1倍方案if (devicePixelRatio >= 3 && (!dpr || dpr >= 3)) {dpr = 3;} else if (devicePixelRatio >= 2 && (!dpr || dpr >= 2)){dpr = 2;} else {dpr = 1;}} else {// 其他設備下,仍舊使用1倍的方案dpr = 1;}scale = 1 / dpr;}docEl.setAttribute('data-dpr', dpr);if (!metaEl) {metaEl = doc.createElement('meta');metaEl.setAttribute('name', 'viewport');metaEl.setAttribute('content', 'initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no');if (docEl.firstElementChild) {docEl.firstElementChild.appendChild(metaEl);} else {var wrap = doc.createElement('div');wrap.appendChild(metaEl);doc.write(wrap.innerHTML);}}function refreshRem(){var width = docEl.getBoundingClientRect().width;if (width / dpr > 540) {width = 540 * dpr;}var rem = width / 10;docEl.style.fontSize = rem + 'px';flexible.rem = win.rem = rem;}win.addEventListener('resize', function() {clearTimeout(tid);tid = setTimeout(refreshRem, 300);}, false);win.addEventListener('pageshow', function(e) {if (e.persisted) {clearTimeout(tid);tid = setTimeout(refreshRem, 300);}}, false);if (doc.readyState === 'complete') {doc.body.style.fontSize = 12 * dpr + 'px';} else {doc.addEventListener('DOMContentLoaded', function(e) {doc.body.style.fontSize = 12 * dpr + 'px';}, false);}refreshRem();flexible.dpr = win.dpr = dpr;flexible.refreshRem = refreshRem;flexible.rem2px = function(d) {var val = parseFloat(d) * this.rem;if (typeof d === 'string' && d.match(/rem$/)) {val += 'px';}return val;}flexible.px2rem = function(d) {var val = parseFloat(d) / this.rem;if (typeof d === 'string' && d.match(/px$/)) {val += 'rem';}return val;}})(window, window['lib'] || (window['lib'] = {}));4、在index.html中,加入flex.js
<script type="text/javascript" src="static/js/flex.js"></script>
5、重啟項目
大功告成!!
現在你就可以在瀏覽器中,看到你的px換算成了rem啦!

以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持武林網。
新聞熱點
疑難解答