详解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 相关文章推荐
广告切换效果(缓动切换)
May 27 Javascript
基于JQuery 滑动与动画的说明介绍
Apr 18 Javascript
Jquery如何实现点击时高亮显示代码
Jan 22 Javascript
浅谈javascript中字符串String与数组Array
Dec 31 Javascript
jQuery实现在下拉列表选择时获取json数据的方法
Apr 16 Javascript
基于jQuery Circlr插件实现产品图片360度旋转
Sep 20 Javascript
使用堆实现Top K算法(JS实现)
Dec 25 Javascript
JS实现按钮控制计时开始和停止功能
Jul 27 Javascript
IntersectionObserver实现图片懒加载的示例
Sep 29 Javascript
记一次Vue.js混入mixin的使用(分权限管理页面)
Apr 17 Javascript
Emberjs 通过 axios 下载文件的方法
Sep 03 Javascript
微信JSSDK实现打开摄像头拍照再将相片保存到服务器
Nov 15 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
全国FM电台频率大全 - 3 河北省
2020/03/11 无线电
Windows下IIS6/Apache2.2.4+MySQL5.2+PHP5.2.1安装配置方法
2007/05/03 PHP
学习php设计模式 php实现状态模式
2015/12/07 PHP
Yii框架实现图片上传的方法详解
2017/05/20 PHP
Laravel5.7框架安装与使用学习笔记图文详解
2019/04/02 PHP
php实现统计IP数及在线人数的示例代码
2020/07/22 PHP
关于html+ashx开发中几个问题的解决方法
2011/07/18 Javascript
javascript实现的弹出层背景置灰-模拟(easyui dialog)
2013/12/27 Javascript
ajax提交表单实现网页无刷新注册示例
2014/05/08 Javascript
JavaScript弹出窗口方法汇总
2014/08/12 Javascript
jQuery菜单插件superfish使用指南
2015/04/21 Javascript
JS获取下拉框显示值和判断单选按钮的方法
2015/07/09 Javascript
JS组件Bootstrap实现图片轮播效果
2016/05/16 Javascript
javascript中对Date类型的常用操作小结
2016/05/19 Javascript
整理一下常见的IE错误
2016/11/18 Javascript
jQuery插件ajaxFileUpload使用详解
2017/01/10 Javascript
JQuery EasyUI 结合ztrIee的后台页面开发实例
2017/09/01 jQuery
基于node搭建服务器,写接口,调接口,跨域的实例
2018/05/13 Javascript
react-native android状态栏的实现
2018/06/15 Javascript
vue动态绑定class选中当前列表变色的方法示例
2018/12/19 Javascript
js canvas实现橡皮擦效果
2018/12/20 Javascript
vue通信方式EventBus的实现代码详解
2019/06/10 Javascript
详解element-ui设置下拉选择切换必填和非必填
2019/06/17 Javascript
python好玩的项目—色情图片识别代码分享
2017/11/07 Python
python 重定向获取真实url的方法
2018/05/11 Python
学习python可以干什么
2019/02/26 Python
python3.4 将16进制转成字符串的实例
2019/06/12 Python
20行Python代码实现一款永久免费PDF编辑工具的实现
2020/08/27 Python
python爬虫工具例举说明
2020/11/30 Python
HTML5在微信内置浏览器下右上角菜单的调整字体导致页面显示错乱的问题
2021/01/19 HTML / CSS
linux面试题参考答案(1)
2016/01/22 面试题
高中生学习生活的自我评价
2013/10/09 职场文书
优秀应届毕业生自荐信
2013/11/16 职场文书
入党积极分子自我鉴定范文
2014/03/25 职场文书
党员自我对照检查材料
2014/08/19 职场文书
婚前协议书范本两则
2014/10/16 职场文书