vue-cli 3.0 移动端适配&&忽略依赖(UI库)的px转换&&大屏适配

vue-cli 3.0 + lib-flexible + postcss-px2rem-exclude

基本配置

卸掉 postcss-px2rem 不可以指定忽略文件夹
装上 postcss-px2rem-exclude 可以指定忽略文件夹

  1. 安装 不装你用个der

yarn add lib-flexible
yarn add postcss-px2rem-exclude

注:安装好以后 || 安装之前 || 不管你啥时候,反正在你要使用 lib-flexible 适配布局的时候请将你 index.html<meta name="viewport" ...>删掉 || 注释,为什么?

解:因为你要是写了,那我就用你定义的缩放值了,别犟,犟了我就废了, 如果你没写,当我没说。我会根据你的设备计算出合适的缩放值,更高要求的让你正常适配,高精准的查看指尖飞出的完美 我就是傲娇的lib-flexible

./node_modules/lib-flexible/flexible.js

	...
	var metaEl = doc.querySelector('meta[name="viewport"]');
	var dpr = 0;
	var scale = 0;
	...
	 
	if (metaEl) {
   
		console.warn('将根据已有的meta标签来设置缩放比例');
	   	var match = metaEl.getAttribute('content').match(/initial\-scale=([\d\.]+)/);
	   	if (match) {
   
	       	scale = parseFloat(match[1]);
	       	dpr = parseInt(1 / scale);
	   	}
	}
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值