vue2.0 类淘宝不同屏幕适配及px与rem转换问题

vue

因为项目需要,vue开发项目,必须将已写的以px为单位的部分,转换为rem。要是全部转换,这大量的计算量,哪怕是sublime Text 的cssrem插件,也是一个庞大的工作量。所以,直接使用插件没商量。

举例子:

1、iphone6

2、iphone5

第一步:因为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\':75,\'baseDpr\':2})] /*因为我是以750px(iphone6)宽度为基准,所以remUnit为75*/

}

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啦!

以上是 vue2.0 类淘宝不同屏幕适配及px与rem转换问题 的全部内容, 来源链接: utcz.com/z/378061.html

回到顶部