详解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 相关文章推荐
[原创]保存的js无法执行的解决办法
Feb 25 Javascript
js可突破windows弹退效果代码
Aug 09 Javascript
Jquery知识点一 Jquery的ready和Dom的onload的区别
Jan 15 Javascript
JS等比例缩小图片尺寸的实例
Feb 27 Javascript
js data日期初始化的5种方法
Dec 29 Javascript
Java File类的常用方法总结
Mar 18 Javascript
JavaScript中的pow()方法使用详解
Jun 15 Javascript
基于jquery css3实现点击动画弹出表单源码特效
Aug 31 Javascript
学习使用AngularJS文件上传控件
Feb 16 Javascript
更高效的使用JQuery 这里总结了8个小技巧
Apr 13 Javascript
解决Vue中的生命周期beforeDestory不触发的问题
Jul 21 Javascript
javascript实现打砖块小游戏(附完整源码)
Sep 18 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的概念
2006/10/09 PHP
关于php curl获取301或302转向的网址问题的解决方法
2011/06/02 PHP
php制作中间带自己定义图片二维码的方法
2014/01/27 PHP
thinkphp制作404跳转页的简单实现方法
2016/09/22 PHP
Laravel 实现Controller向blade前台模板赋值的四种方式小结
2019/10/22 PHP
Javascript开发之三数组对象实例介绍
2012/11/12 Javascript
基于jQuery Bar Indicator 插件实现进度条展示效果
2015/09/30 Javascript
JS简单实现String转Date的方法
2016/03/02 Javascript
基于jQuery Ajax实现上传文件
2016/03/24 Javascript
JQuery在循环中绑定事件的问题详解
2016/06/02 Javascript
详解jquery easyui之datagrid使用参考
2016/12/05 Javascript
微信小程序 页面跳转事件绑定的实例详解
2017/09/20 Javascript
Angularjs cookie 操作实例详解
2017/09/27 Javascript
Django中使用jquery的ajax进行数据交互的实例代码
2017/10/15 jQuery
使用vue2.6实现抖音【时间轮盘】屏保效果附源码
2019/04/24 Javascript
jQuery动态生成的元素绑定事件操作实例分析
2019/05/04 jQuery
JavaScript直接调用函数与call调用的区别实例分析
2020/05/22 Javascript
解决iview table组件里的 固定列 表格不自适应的问题
2020/11/13 Javascript
[46:23]OG vs EG 2018国际邀请赛淘汰赛BO3 第一场 8.23
2018/08/24 DOTA
Python类的用法实例浅析
2015/05/27 Python
Django中模型Model添加JSON类型字段的方法
2015/06/17 Python
Python端口扫描简单程序
2016/11/10 Python
python基础教程项目五之虚拟茶话会
2018/04/02 Python
python实现输出一个序列的所有子序列示例
2019/11/18 Python
python自动化实现登录获取图片验证码功能
2019/11/20 Python
Pycharm内置终端及远程SSH工具的使用教程图文详解
2020/03/19 Python
python由已知数组快速生成新数组的方法
2020/04/08 Python
奶茶专卖店创业计划书
2014/01/18 职场文书
农民工工资支付承诺函
2014/03/31 职场文书
小学生评语大全
2014/04/18 职场文书
再婚婚前财产协议书范本
2014/10/19 职场文书
群众路线学习笔记范文
2014/11/06 职场文书
社区环境卫生倡议书
2015/04/29 职场文书
2019年中,最受大众欢迎的6本新书
2019/08/07 职场文书
聊一聊python常用的编程模块
2021/05/14 Python
SpringCloud Feign请求头删除修改的操作代码
2022/03/20 Java/Android