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


Posted in Javascript onFebruary 23, 2018

因为项目需要,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啦!

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Javascript中的var_dump函数实现代码
Sep 07 Javascript
JavaScript在IE和Firefox(火狐)的不兼容问题解决方法小结
Apr 13 Javascript
jQuery EasyUI API 中文文档 - Documentation 文档
Sep 29 Javascript
javascript中打印当前的时间实现思路及代码
Dec 18 Javascript
js实现文本框选中的方法
May 26 Javascript
JavaScript中用于生成随机数的Math.random()方法
Jun 15 Javascript
js实现简洁的滑动门菜单(选项卡)效果代码
Sep 04 Javascript
javascript基础语法——全面理解变量和标识符
Jun 02 Javascript
详解基于vue-router的动态权限控制实现方案
Sep 28 Javascript
浅谈vue项目如何打包扔向服务器
May 08 Javascript
JavaScript this绑定过程深入详解
Dec 07 Javascript
js控制随机数生成概率代码实例
Mar 21 Javascript
解决vue中对象属性改变视图不更新的问题
Feb 23 #Javascript
在Vue组件上动态添加和删除属性方法
Feb 23 #Javascript
vue 路由页面之间实现用手指进行滑动的方法
Feb 23 #Javascript
vue编译打包本地查看index文件的方法
Feb 23 #Javascript
vue 使用Jade模板写html,stylus写css的方法
Feb 23 #Javascript
Angular 向组件传递模板的两种方法
Feb 23 #Javascript
详解Node.js中的Async和Await函数
Feb 22 #Javascript
You might like
用PHP实现多服务器共享SESSION数据的方法
2007/03/16 PHP
php变量作用域的深入解析
2013/06/03 PHP
PHP echo,print,printf,sprintf函数之间的区别与用法详解
2013/11/27 PHP
PHP文件缓存类示例分享
2015/01/30 PHP
实例讲解yii2.0在php命令行中运行的步骤
2015/12/01 PHP
CodeIgniter多语言实现方法详解
2016/01/20 PHP
浅谈PHP面向对象之访问者模式+组合模式
2017/05/22 PHP
PHP基于openssl实现的非对称加密操作示例
2019/01/11 PHP
关于 byval 与 byref 的区别分析总结
2007/10/08 Javascript
js parentElement和offsetParent之间的区别
2010/03/23 Javascript
关于Javascript加载执行优化的研究报告
2014/12/16 Javascript
js兼容火狐显示上传图片预览效果的方法
2015/05/21 Javascript
Bootstrap布局之栅格系统详解
2016/06/13 Javascript
xmlplus组件设计系列之网格(DataGrid)(10)
2017/05/05 Javascript
Vue的Flux框架之Vuex状态管理器
2017/07/30 Javascript
React-Native左右联动List的示例代码
2017/09/21 Javascript
详解a标签添加onclick事件的几种方式
2019/03/29 Javascript
微信小程序实现用table显示数据库反馈的多条数据功能示例
2019/05/07 Javascript
微信小程序自定义多列选择器使用详解
2019/06/21 Javascript
微信小程序中为什么使用var that=this
2019/08/27 Javascript
element ui分页多选,翻页记忆的实例
2019/09/03 Javascript
js仿京东放大镜效果
2020/08/09 Javascript
javascript局部自定义鼠标右键菜单
2020/12/08 Javascript
python Jupyter运行时间实例过程解析
2019/12/13 Python
Python3如何判断三角形的类型
2020/04/12 Python
基于python生成英文版词云图代码实例
2020/05/16 Python
Laura Geller官网:美国彩妆品牌
2018/12/29 全球购物
高一物理教学反思
2014/01/24 职场文书
银行开业庆典方案
2014/02/06 职场文书
领导接待方案
2014/03/13 职场文书
对教师的评语
2014/04/28 职场文书
禁毒宣传活动总结
2014/08/26 职场文书
预备党员学习十八届三中全会精神思想汇报
2014/09/13 职场文书
2015年学校食堂工作总结
2015/04/22 职场文书
2015选调生工作总结
2015/07/24 职场文书
你为什么是穷人?可能是这5个缺点造成
2019/07/11 职场文书