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> 如果报错的话一下解决方案
仔细看了看 index.html 文件,发现原本我的 JS 文件是放在 /src/utils 文件夹下的,但引入 /src 和 /static 的文件是有区别的
解决办法是将第三方依赖的 JS 文件放到 /static/utils 目录下,引入路径也改成:<script src="./static/utils/sockjs.js"></script>,这样就不报错了

也可以采用第二种方法

第一步 安装 lib-flexible

npm i lib-flexible --save

第二步 安装 px2rem-loader

npm install px2rem-loader --save-dev

第三步 引入lib-flexible(main.js中) 

import 'lib-flexible/flexible'

第四步 最重要的一步 配置utils文件

const px2remLoader = {
loader: 'px2rem-loader',
options: {
remUnit: 37.5
}
}
//在generateLoaders方法中添加px2remLoader
(这行代码放到generateLoaders方法中就OK)
const loaders = [cssLoader,px2remLoader]

 浏览器中就可以看到已经自动转换为rem了。。。。 

vue换算单位px自动转换rem的更多相关文章

  1. Vue将px转化为rem适配移动端

    Vue将px转化为rem适配移动端 1.下载lib-flexible我使用的是vue-cli+webpack,所以是通过npm来安装的npm i lib-flexible --save 2.引入lib ...

  2. vue-cli 2.x和3.x配置移动端适配px自动转为rem

    移动端适配一直都是个大问题,现在也出现了各种各样的解决方案,比如 rem, vw 百分比等,但是比较成熟的切比较容易编写的还是 rem,他是相对于根元素的 font-size 进行等比例计算的. 但是 ...

  3. css之px自动转rem—sublime 插件CSSREM

    CSSREM CSSREM 是一个CSS的 px 值转 rem 值的Sublime Text3自动完成插件.先来看看插件的效果: 一个CSS的px值转rem值的Sublime Text 3自动完成插件 ...

  4. vue 自动px单位自动转换rem

    vue 适配移动端 假设设计图是375 第一步 安装 lib-flexible npm i lib-flexible --save 第二步 安装 px2rem-loader npm install p ...

  5. vue项目中px自动转换为rem

    .安装 postcss-pxtorem : npm install postcss-pxtorem -D .修改 /build/utils.js 文件 找到 postcssLoader const p ...

  6. css之px自动转rem—“懒人”必备

    作为一名前端开发,尤其是在做移动端适配时,rem是我们经常用到的单位,它的好处大家可以自行搜索,网上已经有很多了.但是我们再将设计稿上的px转换成rem时,得手动的去计算,这是一个很耗时.费力的过程, ...

  7. px自动换算rem

    //designWidth:设计稿的实际宽度值,需要根据实际设置//maxWidth:制作稿的最大宽度值,需要根据实际设置//这段js的最后面有两个参数记得要设置,一个为设计稿实际宽度,一个为制作稿最 ...

  8. 60.Vue:将px转化为rem,适配移动端

    1.下载lib-flexible 我使用的是vue-cli+webpack,所以是通过npm来安装的 npm i lib-flexible --save 2.引入lib-flexible 在main. ...

  9. Vue:将px转化为rem,适配移动端vant-UI等框架(px2rem-loader)

    转载:https://www.cnblogs.com/WQLong/p/7798822.html 1.下载lib-flexible 使用的是vue-cli+webpack,通过npm来安装的 npm ...

随机推荐

  1. 微信小程序获取当前的时间戳

    js文件中进行计算var timestamp = Date.parse(new Date()); timestamp = timestamp / 1000; console.log(timestamp ...

  2. AT2300题解

    两种做法都说一说吧... 题意很明确. 1.数论分块 对于一个 \(d\) 和给定的 \((l,r)\),\((l,r)\) 对其造成贡献的条件很明显是 \(\lfloor \frac {l-1} d ...

  3. Android12 新特性及适配指南

    Android 12(API 31)于2021年10月4日正式发布,正式版源代码也于当日被推送到AOSP Android开源项目.截止到笔者撰写这篇文章时,国内各终端厂商的在售Android设备,已经 ...

  4. Net之线程池的优点

     使用线程池的好处:     1.减少在创建和销毁线程上所花的时间以及系统资源的开销     2.如不使用线程池,有可能造成系统创建大量线程而导致消耗完系统内存以及"过度切换".

  5. CentOS7.5安装配置Jenkins

    一. 硬件配置: 1 GB的RAM 50 GB的驱动器空间 二. 系统环境: [root@Jenkins ~]# cat /etc/redhat-release CentOS Linux releas ...

  6. Sobel算子 Scharr算子 Laplacian算子

    图像梯度处理 Sobel算子 水平方向: 对于线条A和线条B,右侧像素值与左侧像素值的差值不为零,因此是边界 上下像素值差值为0,左右素值的差值不为零,分布为正负, 离的近的为2,离的远的为1 P5= ...

  7. VS Code Java 3月更新|代码补全、Maven 以及 Java 插件预览版本新升级!

    Nick Zhu Senior Program Manager, Developer Division at Microsoft 大家好,欢迎来到 Visual Studio Code Java 的 ...

  8. 论文解读(GRACE)《Deep Graph Contrastive Representation Learning》

    Paper Information 论文标题:Deep Graph Contrastive Representation Learning论文作者:Yanqiao Zhu, Yichen Xu, Fe ...

  9. 一个".java"源文件中是否可以包括多个类(不是内部类)?有什么限制?

    可以有多个类,但只能有一个public的类,并且public的类名必须与文件的主文件名相同. 包含多个类的Java源文件编译之后会生成多个.class文件.

  10. jpg, jpeg和png区别?

    jpg是jpeg的缩写, 二者一致    PNG就是为取代GIF而生的, 无损压缩, 占用内存多    jpg牺牲图片质量, 有损, 占用内存小    PNG格式可编辑.如图片中有字体等,可利用PS再 ...