vue2.0 类淘宝不同屏幕适配及px与rem转换问题
因为项目需要,vue开发项目,必须将已写的以px为单位的部分,转换为rem。要是全部转换,这大量的计算量,哪怕是sublime Text 的cssrem插件,也是一个庞大的工作量。所以,直接使用插件没商量。
举例子:
1、iphone6
2、iphone5
第一步:因为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':75,'baseDpr':2})] /*因为我是以750px(iphone6)宽度为基准,所以remUnit为75*/
}
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转换问题的更多相关文章
- vue2.0构建淘票票webapp
项目描述 之前一直用vue1.x写项目,最近为了过渡到vue2.0,特易用vue2.0栈仿写了淘票票页面,而且加入了express作为后台服务. 前端技术栈:vue2.0 + vue-router + ...
- 淘宝、网易移动端 px 转换 rem 原理,Vue-cli 实现 px 转换 rem
在过去的一段时间里面一直在使用Vue配合 lib-flexible和px2rem-loader配合做移动端的网页适配.秉着求知的思想,今天决定对他的原理进行分析.目前网上比较主流使用的就是淘宝方 ...
- js 关于网易淘宝移动端适配的学习
(function (doc, win) { // orientationchange:用户水平或者垂直翻转设备(即方向发生变化)时触发的事件;(屏幕大小发生变化) var docEl = doc.d ...
- 适配:px与dp转换
public class DensityUtil { /** * 根据手机的分辨率从 dp 的单位 转成为 px(像素) */ public static int dip2px(Context con ...
- (淘宝无限适配)手机端rem布局详解(转载非原创)
从网易与淘宝的font-size思考前端设计稿与工作流 本文结合自己对网易与淘宝移动端首页html元素上的font-size这个属性的思考与学习,讨论html5设计稿尺寸以及前端与设计之间协作流程的问 ...
- (淘宝无限适配)手机端rem布局详解
从网易与淘宝的font-size思考前端设计稿与工作流 本文结合自己对网易与淘宝移动端首页html元素上的font-size这个属性的思考与学习,讨论html5设计稿尺寸以及前端与设计之间协作流程的问 ...
- 从网易与淘宝的font-size思考前端设计稿与工作流
本文结合自己对网易与淘宝移动端首页html元素上的font-size这个属性的思考与学习,讨论html5设计稿尺寸以及前端与设计之间协作流程的问题,内容较多,但对你的技术和工作一定有价值,欢迎阅读和点 ...
- 从网易与淘宝的font-size思考前端设计稿与工作流 (转)
从网易与淘宝的font-size思考前端设计稿与工作流 阅读目录 1. 问题的引出 2. 简单问题简单解决 3. 网易的做法 4. 淘宝的做法 5. 比较网易与淘宝的做法 6. 如何与设计协作 7 ...
- 妈妈再也不用担心我的移动端了:网易和淘宝的rem方案剖析
从博主学习前端一路过来的经历了解到,前端移动开发是大部分从PC端转战移动端的小伙伴都非常头疼的一个问题,这边博主就根据一篇自己看过的移动开发文章来剖析一下网易和淘宝的rem解决方案,希望能够帮助到一些 ...
随机推荐
- Java GUI 基础组件
1.JLabel 标签 构造函数: JLabel() JLabel(String text) JLabel(String text,int align) //第二个参数设置文本的对齐方式,常 ...
- Thymeleaf 在项目中的应用及前后端交互的一些知识(1)
经过一段时间的工作,我的第一个项目已经快要上线了.本篇文章介绍些thymeleaf在工作中的实际应用,但是更多的还是一些前端处理后台数据的一些思路,如果有什么不正确的地方,希望大家指点. 1.th:e ...
- Eclipse 闪退/无法启动/一闪而过打解决办法
解决方法 删除文件:/.metadata/.plugins/org.eclipse.e4.workbench/workbench.xmi 经过实际应用真实有效.
- HTTPS时代已来,你做好准备了吗?
早在今年年初,Google在其安全博客上已经表明,从7月开始,Chrome68会将所有的HTTP网站标记为不安全.随后,Mozilla也表明,Firefox浏览器也准备将所有HTTP网站标记为不安全. ...
- 复位电路设计——利用PLL锁定信号(lock)产生复位信号
利用PLL锁定信号(lock)产生复位信号 在FPGA刚上电的时候,系统所需的时钟一般都要经过PLL倍频,在时钟锁定(即稳定输出)以前,整个系统应处于复位状态.因此,我们可以利用PLL的锁定信号来产生 ...
- 【HEVC简介】High Level Syntax
参考文献:见<High Efficiency Video Coding (HEVC)>High Level Syntax章节 <HEVC标准介绍.HEVC帧间预测论文笔记>系列 ...
- sql通过 openrowset查询csv文件
两步即可完成 第一步. 创建cmmData.xml文件,并存入到能与sql服务器共享的文件夹中(如:\\10.252.21.6\sharedfolder) <?xml version=" ...
- vba,自定义公式,农历互转公历,excel ,wps
'vba 模块内容如下 自定义公式 '公历转农历模块 '原创:互联网 '修正: '// 农历数据定义 // '先以 H2B 函数还原成长度为 18 的字符串,其定义如下: '前12个字节代表1-12月 ...
- UVA 1175 Ladies' Choice 女士的选择(稳定婚姻问题,GS算法)
题意: 给出每个男的心目中的女神排序,给出每个女的心目中的男神排序,即两个n*n的矩阵,一旦任意两个非舞伴的男女同学觉得对方都比现任舞伴要好,他们就会抛弃舞伴而在一起.为了杜绝这种现象,求每个男的最后 ...
- 洛谷 P1351 联合权值
题目描述 无向连通图G 有n 个点,n - 1 条边.点从1 到n 依次编号,编号为 i 的点的权值为W i ,每条边的长度均为1 .图上两点( u , v ) 的距离定义为u 点到v 点的最短距离. ...