Vant+postcss-pxtorem 实现浏览器适配功能


Posted in Javascript onFebruary 05, 2021

Rem 布局适配
Vant 中的样式默认使用 px 作为单位,如果需要使用 rem 单位,推荐使用以下两个工具:
postcss-pxtorem 是一款 postcss 插件,用于将单位转化为 rem
lib-flexible 用于设置 rem 基准值
看到最后有惊喜!

一、npm安装

npm install postcss-pxtorem --save

二、新建.postcssrc.js做如下修改

注:
1、以下注释代码开启后运行脚本会出现报错的提示,虽不知道有什么用,注释就好啦。

module.exports = {
 "plugins": {
 	//"postcss-import": {},
  //"postcss-url": {},
  "autoprefixer": {
   browsers: ['Android >= 4.0', 'iOS >= 7']
  },
  "postcss-pxtorem": {
   "rootValue": 32,
   "propList": ["*"]
  }
 }
}

三、新建rem.js

const baseSize = 32
// 设置 rem 函数
function setRem () {
 // 当前页面宽度相对于 750 宽的缩放比例,可根据自己需要修改。
 const scale = document.documentElement.clientWidth / 750
 // 设置页面根节点字体大小
 document.documentElement.style.fontSize = (baseSize * Math.min(scale, 2)) + 'px'
}
// 初始化
setRem()
// 改变窗口大小时重新设置 rem
window.onresize = function () {
 setRem()
}

四、在main.js中引入rem.js

import "./rem.js"

至此,Vant+postcss-pxtorem 实现浏览器适配就完成了。
即可直接在样式中畅快的使用px且自动转换成rem。
等等先别走!!!客官。
以为到这里就结束了吗?NO,往下看还有一份不基于postcss-pxtorem 来实现的rem适配哦。
话不多说直接上代码。

五、新建rem.js并再main.js中引入

(function (doc, win) {
 var docEl = doc.documentElement
 var resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize'
 var recalc = function () {
  var clientWidth = docEl.clientWidth
  if (!clientWidth) return
  if (parseInt(20 * (clientWidth / 320)) > 35) {
   docEl.style.fontSize = 35 + 'px'
  } else {
   docEl.style.fontSize = 20 * (clientWidth / 320) + 'px'
  }
 }
 if (!doc.addEventListener) return
 win.addEventListener(resizeEvt, recalc, false)
 doc.addEventListener('DOMContentLoaded', recalc, false)
})(document, window)

import "./rem.js"

六、添加样式全局变量并使用

// 当前页面宽度相对于 750 宽的缩放比例,可根据自己需要修改。
$rem: (640/750)/40;
body{
	width: $rem * 24rem;
}

到此这篇关于Vant+postcss-pxtorem 实现浏览器适配的文章就介绍到这了,更多相关Vant+postcss-pxtorem 适配内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
javascript 短路法代码精简
Aug 20 Javascript
dropdownlist之间的互相联动实现(显示与隐藏)
Nov 24 Javascript
用js控制组织结构图可以任意拖拽到指定位置
Jan 17 Javascript
jQuery实现带滚动导航效果的全屏滚动相册实例
Jun 19 Javascript
谈谈encodeURI和encodeURIComponent以及escape的区别与应用
Nov 24 Javascript
浅析函数声明和函数表达式——函数声明的声明提前
May 03 Javascript
详解微信小程序 wx.uploadFile 的编码坑
Jan 23 Javascript
JS实现加载和读取XML文件的方法详解
Apr 24 Javascript
JavaScript实现身份证验证代码实例
Aug 26 Javascript
layui文件上传控件带更改后数据传值的方法
Sep 23 Javascript
js实现车辆管理系统
Aug 26 Javascript
node.js 如何监视文件变化
Sep 01 Javascript
JavaScript代码实现微博批量取消关注功能
Feb 05 #Javascript
js属性对象的hasOwnProperty方法的使用
Feb 05 #Javascript
关于element的表单组件整理笔记
Feb 05 #Javascript
详解JavaScript中的this指向问题
Feb 05 #Javascript
JavaScript事件概念详解(区分静态注册和动态注册)
Feb 05 #Javascript
详解javascript脚本何时会被执行
Feb 05 #Javascript
前端如何实现动画过渡效果
Feb 05 #Javascript
You might like
星际争霸教主Flash的ID由来:你永远不会知道他之前的ID是www!
2019/01/18 星际争霸
php AJAX实例根据邮编自动完成地址信息
2008/11/23 PHP
PHP+ajaxfileupload+jcrop插件完美实现头像上传剪裁
2014/06/09 PHP
PHP return语句的另一个作用
2014/07/30 PHP
php列出mysql表所有行和列的方法
2015/03/13 PHP
thinkPHP2.1自定义标签库的导入方法详解
2016/07/20 PHP
php字符集转换
2017/01/23 PHP
详解new function(){}和function(){}() 区别分析
2008/03/22 Javascript
jquery maxlength使用说明
2011/09/09 Javascript
使用百度地图api实现根据地址查询经纬度
2014/12/11 Javascript
jQuery及JS实现循环中暂停的方法
2015/02/02 Javascript
jquery实现网页的页面平滑滚动效果代码
2015/11/02 Javascript
基于javascript实现tab切换特效
2016/03/29 Javascript
js判断checkbox是否选中个数的方法(超简单)
2016/08/19 Javascript
js微信支付实现代码
2016/12/22 Javascript
微信小程序实现滑动删除效果
2017/05/19 Javascript
JS+canvas画一个圆锥实例代码
2017/12/13 Javascript
Vue全局分页组件的实现代码
2018/08/10 Javascript
微信二次分享报错invalid signature问题及解决方法
2019/04/01 Javascript
JS通过识别id、value值对checkbox设置选中状态
2020/02/19 Javascript
解析Python编程中的包结构
2015/10/25 Python
Django管理员账号和密码忘记的完美解决方法
2018/12/06 Python
Python 实现子类获取父类的类成员方法
2019/01/11 Python
python控制台实现tab补全和清屏的例子
2019/08/20 Python
用CSS3打造HTML5的Logo(实现代码)
2016/06/16 HTML / CSS
html5 桌面提醒:Notifycations应用介绍
2012/11/27 HTML / CSS
AMAVII眼镜官网:时尚和设计师太阳镜
2019/05/05 全球购物
馥蕾诗美国官网:Fresh美国
2019/10/09 全球购物
汽车运用工程毕业生自荐信
2013/10/29 职场文书
承办会议欢迎词
2014/01/17 职场文书
开朗女孩的自我评价
2014/02/10 职场文书
村道德模范事迹材料
2014/08/28 职场文书
技术股东合作协议书
2014/12/02 职场文书
2015年感恩父亲节活动策划方案
2015/05/05 职场文书
校长一岗双责责任书
2015/05/09 职场文书
八年级作文之感悟亲情
2019/11/20 职场文书