详解vue2.0 不同屏幕适配及px与rem转换问题

详解vue2.0 不同屏幕适配及px与rem转换问题

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

第一步：因为rem是根据更元素来计算大小，所以，捕捉到当前屏幕的大小并赋值给html，这是其一

第二步：使用px2rem插件，来捕捉当前项目的所有px，直接计算相对应数值。

这样，以后写界面，就可以直接用px来构建界面，不用自己去计算啦！

1、安装插件(我是安装了淘宝镜像，所以是cnpm,若是没装淘宝镜像，就npm)

$ cnpm i postcss-px2rem --save

$ cnpm install px2remHOKWbNA-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.shttp://tyle.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

5、重启项目

大功告成！！

现在你就可以在浏览器中，看到你的px换算成了rem啦！

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。