详解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获取IE上传文件路径(IE7,8)
Jul 08 Javascript
jquery JSON的解析方式示例介绍
Jul 27 Javascript
JavaScript中合并数组的N种方法
Sep 16 Javascript
JQuery控制radio选中和不选中方法总结
Apr 15 Javascript
jQuery实现的简洁下拉菜单导航效果代码
Aug 26 Javascript
详解jQuery UI库中文本输入自动补全功能的用法
Apr 23 Javascript
深入解析Backbone.js框架的依赖库Underscore.js的作用
May 07 Javascript
jQuery实现右下角可缩放大小的层完整实例
Jun 20 Javascript
js点击按钮实现水波纹效果代码(CSS3和Canves)
Sep 15 Javascript
JavaScript中Array对象用法实例总结
Nov 29 Javascript
详解Vue路由开启keep-alive时的注意点
Jun 20 Javascript
vue setInterval 定时器失效的解决方式
Jul 30 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和Mysqlweb应用开发核心技术 第1部分 Php基础-1 开始了解php
2011/07/03 PHP
PHP SPL标准库之数据结构堆(SplHeap)简单使用实例
2015/05/12 PHP
typecho插件编写教程(五):核心代码
2015/05/28 PHP
PHP 实现页面静态化的几种方法
2017/07/23 PHP
thinkphp5修改view到根目录实例方法
2019/07/02 PHP
jQuery boxy弹出层插件中文演示及使用讲解
2011/02/24 Javascript
使用JavaScript实现Java的List功能(实例讲解)
2013/11/07 Javascript
js通过更改按钮的显示样式实现按钮的滑动效果
2014/04/23 Javascript
jquery 实现两Select 标签项互调示例代码
2014/09/25 Javascript
jQuery实现的背景动态变化导航菜单效果
2015/08/24 Javascript
响应式表格之固定表头的简单实现
2016/08/26 Javascript
利用策略模式与装饰模式扩展JavaScript表单验证功能
2017/02/14 Javascript
js判断用户是输入的地址请求的路径(实例讲解)
2017/07/18 Javascript
element表格翻页第2页从1开始编号(后端从0开始分页)
2019/12/10 Javascript
小程序Scroll-view上拉滚动刷新数据
2020/06/21 Javascript
[52:57]2014 DOTA2国际邀请赛中国区预选赛 LGD-CDEC VS HGT
2014/05/21 DOTA
[05:31]DOTA2英雄梦之声_第04期_光之守卫
2014/06/23 DOTA
[01:31:22]DOTA2-DPC中国联赛定级赛 LBZS vs Magma BO3第二场 1月10日
2021/03/11 DOTA
python完成FizzBuzzWhizz问题(拉勾网面试题)示例
2014/05/05 Python
python对象转字典的两种实现方式示例
2019/11/07 Python
Django中modelform组件实例用法总结
2020/02/10 Python
PyQT5 实现快捷键复制表格数据的方法示例
2020/06/19 Python
python 实用工具状态机transitions
2020/11/21 Python
CSS3网格的三个新特性详解
2014/04/04 HTML / CSS
css3动画 小球滚动 js控制动画暂停
2019/11/29 HTML / CSS
Lacoste(法国鳄鱼)加拿大官网:以标志性的POLO衫而闻名
2019/05/15 全球购物
技校毕业生的自我评价
2013/12/27 职场文书
电气自动化个人求职信范文
2014/02/03 职场文书
公司总经理工作职责管理办法
2014/02/28 职场文书
我爱祖国演讲稿
2014/09/02 职场文书
公证委托书格式
2014/09/13 职场文书
居委会四风问题个人对照检查材料
2014/09/25 职场文书
在职证明书范本(2014新版)
2014/09/25 职场文书
幼儿教师师德师风自我剖析材料
2014/09/29 职场文书
本科毕业论文致谢怎么写
2015/05/14 职场文书
SQL中的三种去重方法小结
2021/11/01 SQL Server