详解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 相关文章推荐
google jQuery 引用文件,jQuery 引用地址集合(jquery 1.2.6至jquery1.5.2)
Apr 24 Javascript
给页面渲染时间加速 干掉Dom Level 0 Event
Dec 19 Javascript
高效率JavaScript编写技巧整理
Aug 23 Javascript
jquery实现LED广告牌旋转系统图片切换效果代码分享
Aug 26 Javascript
把JavaScript代码改成ES6语法不完全指南(分享)
Sep 10 Javascript
Vue+webpack项目基础配置教程
Feb 12 Javascript
微信小程序wx.uploadfile 本地文件转base64的实现代码
Jun 28 Javascript
vue实现百度下拉列表交互操作示例
Mar 12 Javascript
Vue 开发必须知道的36个技巧(小结)
Oct 09 Javascript
vue 开发之路由配置方法详解
Dec 02 Javascript
JavaScript隐式类型转换代码实例
May 29 Javascript
vue使用require.context实现动态注册路由
Dec 25 Vue.js
解决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
Terran剧情介绍
2020/03/14 星际争霸
PHP网页游戏学习之Xnova(ogame)源码解读(七)
2014/06/23 PHP
PHP中防止SQL注入方法详解
2014/12/25 PHP
推荐十款免费 WordPress 插件
2015/03/24 PHP
PHP实现的注册,登录及查询用户资料功能API接口示例
2017/06/06 PHP
PHP attributes()函数讲解
2019/02/03 PHP
javascript arguments 传递给函数的隐含参数
2009/08/21 Javascript
Javascript实现滑块滑动改变值的实现代码
2013/04/12 Javascript
jQuery实现的导航条切换可显示隐藏
2014/10/22 Javascript
javascript实现汉字转拼音代码分享
2015/04/20 Javascript
jQuery Real Person验证码插件防止表单自动提交
2015/11/06 Javascript
Jqgrid之强大的表格插件应用
2015/12/02 Javascript
jqGrid中文文档之选项设置
2015/12/02 Javascript
jquery使用Cookie和JSON记录用户最近浏览历史
2016/04/19 Javascript
Bootstrap按钮组件详解
2016/04/26 Javascript
JS图片预加载插件详解
2017/06/21 Javascript
nodejs高大上的部署方式(PM2)
2018/09/11 NodeJs
浅谈关于iview表单验证的问题
2018/09/29 Javascript
微信小程序生成二维码的示例代码
2019/03/29 Javascript
浅谈Vue组件单元测试究竟测试什么
2020/02/05 Javascript
微信小程序连接服务器展示MQTT数据信息的实现
2020/07/14 Javascript
Js实现粘贴上传图片的原理及示例
2020/12/09 Javascript
[04:45]DOTA2上海特级锦标赛主赛事第四日RECAP
2016/03/06 DOTA
Python3 处理JSON的实例详解
2017/10/29 Python
Python模拟脉冲星伪信号频率实例代码
2018/01/03 Python
opencv python 图像轮廓/检测轮廓/绘制轮廓的方法
2019/07/03 Python
python实现tail实时查看服务器日志示例
2019/12/24 Python
django数据模型on_delete, db_constraint的使用详解
2019/12/24 Python
python add_argument()用法解析
2020/01/29 Python
Python3标准库之threading进程中管理并发操作方法
2020/03/30 Python
css3实现六边形边框的实例代码
2019/05/24 HTML / CSS
委托公证书
2014/04/08 职场文书
办理房产证委托书
2014/09/18 职场文书
2014年幼儿园园长工作总结
2014/12/17 职场文书
开会迟到检讨书范文
2015/05/06 职场文书
使用CSS3实现按钮悬停闪烁动态特效代码
2021/08/30 HTML / CSS