详解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 相关文章推荐
基于jquery的tab切换 js原理
Apr 01 Javascript
select 控制网页内容隐藏于显示的实现代码
May 25 Javascript
IE下JS读取xml文件示例代码
Aug 05 Javascript
使用jQuery不判断浏览器高度解决iframe自适应高度问题
Dec 16 Javascript
Javascript基础教程之argument 详解
Jan 18 Javascript
jQuery插件FusionCharts绘制的2D双柱状图效果示例【附demo源码】
May 13 jQuery
Node.js编写CLI的实例详解
May 17 Javascript
使用jQuery.Pin垂直滚动时固定导航
May 24 jQuery
js中的reduce()函数讲解
Jan 18 Javascript
详解在Javascript中进行面向切面编程
Apr 28 Javascript
微信内置浏览器图片查看器的代码实例
Oct 08 Javascript
Nuxt pages下不同的页面对应layout下的页面布局操作
Nov 05 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
基于thinkPHP类的插入数据库操作功能示例
2017/01/06 PHP
php 数组元素快速去重
2017/05/05 PHP
Yii2框架自定义类统一处理url操作示例
2019/05/25 PHP
通过JAVASCRIPT读取ASP设定的COOKIE
2006/11/24 Javascript
jquery二级导航内容均分的原理及实现
2013/08/13 Javascript
JavaScript包装对象使用介绍
2013/08/29 Javascript
jquery-syntax动态语法着色示例代码
2014/05/14 Javascript
javascript自动恢复文本框点击清除后的默认文本
2016/01/12 Javascript
Angularjs中ng-repeat-start与ng-repeat-end的用法实例介绍
2016/12/31 Javascript
Javascript中toFixed计算错误(依赖银行家舍入法的缺陷)解决方法
2017/08/22 Javascript
javascript基于定时器实现进度条功能实例
2017/10/13 Javascript
Bootstrap popover 实现鼠标移入移除显示隐藏功能方法
2018/01/24 Javascript
angular中两种表单的区别(响应式和模板驱动表单)
2018/12/06 Javascript
jQuery实现的简单日历组件定义与用法示例
2018/12/24 jQuery
JS数组方法reverse()用法实例分析
2020/01/18 Javascript
[49:43]VG vs FNATIC 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/17 DOTA
Python中Collection的使用小技巧
2014/08/18 Python
python魔法方法-属性访问控制详解
2016/07/25 Python
python机器学习案例教程——K最近邻算法的实现
2017/12/28 Python
python使用Plotly绘图工具绘制柱状图
2019/04/01 Python
django Admin文档生成器使用详解
2019/07/22 Python
python3获取url文件大小示例代码
2019/09/18 Python
CSS3实现滚动条动画效果代码分享
2016/08/03 HTML / CSS
Maison Lab荷兰:名牌Outlet购物
2018/08/10 全球购物
New Balance加拿大官方网站:运动鞋和健身服装
2018/11/19 全球购物
高级护理实习生自荐信
2013/09/28 职场文书
医学生自我鉴定范文
2013/11/08 职场文书
中学生在校期间的自我评价分享
2013/11/13 职场文书
酒店管理毕业生自我鉴定
2014/03/02 职场文书
文秘专业应届生求职信
2014/05/26 职场文书
企业与个人合作经营协议书
2014/11/01 职场文书
论文答谢词
2015/01/20 职场文书
公司庆典欢迎词
2015/01/26 职场文书
客服专员岗位职责范本
2015/04/07 职场文书
教你使用vscode 搭建react-native开发环境
2021/07/07 Javascript
Vue.js中v-bind指令的用法介绍
2022/03/13 Vue.js