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 相关文章推荐
Google 静态地图API实现代码
Nov 19 Javascript
jQuery中insertAfter()方法用法实例
Jan 08 Javascript
常见JS验证脚本汇总
Dec 01 Javascript
Easyui的组合框的取值与赋值
Oct 28 Javascript
ES6新特性:使用export和import实现模块化详解
Jul 31 Javascript
vue父组件向子组件(props)传递数据的方法
Jan 02 Javascript
Node.js readline模块与util模块的使用
Mar 01 Javascript
webpack打包node.js后端项目的方法
Mar 10 Javascript
vue 本地服务不能被外部IP访问的完美解决方法
Oct 29 Javascript
解决ie11 SCRIPT5011:不能执行已释放Script的代码问题
May 05 Javascript
vue-socket.io跨域问题有效解决方法
Feb 11 Javascript
微信小程序中wxs文件的一些妙用分享
Feb 18 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
2019年中国咖啡业现状与发展趋势
2021/03/04 咖啡文化
开源SNS系统-ThinkSNS
2008/05/18 PHP
php使用strtotime和date函数判断日期是否有效代码分享
2013/12/25 PHP
zf框架的zend_cache缓存使用方法(zend框架)
2014/03/14 PHP
PHP中通过fopen()函数访问远程文件示例
2014/11/18 PHP
CodeIgniter使用smtp服务发送html邮件的方法
2015/06/10 PHP
PHP实现的折半查找算法示例
2017/12/19 PHP
Ubuntu 16.04中Laravel5.4升级到5.6的步骤
2018/12/07 PHP
使用jquery与图片美化checkbox和radio控件的代码(打包下载)
2010/11/11 Javascript
js生成随机颜色方法代码分享(三种)
2016/12/29 Javascript
vue2.0构建单页应用最佳实战
2017/04/01 Javascript
AngularJS之自定义服务详解(factory、service、provider)
2017/04/14 Javascript
详解Vue 方法与事件处理器
2017/06/20 Javascript
关于TypeScript中import JSON的正确姿势详解
2017/07/25 Javascript
浅谈JsonObject中的key-value数据解析排序问题
2017/12/06 Javascript
Vue.js做select下拉列表的实例(ul-li标签仿select标签)
2018/03/02 Javascript
jQuery实现参数自定义的文字跑马灯效果
2018/08/15 jQuery
webpack+express实现文件精确缓存的示例代码
2020/06/11 Javascript
[02:11]2014DOTA2 TI专访VG战队Fenrir:队伍气氛良好
2014/07/11 DOTA
pyqt4教程之实现windows窗口小示例分享
2014/03/07 Python
python设计模式大全
2016/06/27 Python
pandas值替换方法
2018/07/10 Python
pandas分别写入excel的不同sheet方法
2018/12/11 Python
python3利用Axes3D库画3D模型图
2020/03/25 Python
python中np是做什么的
2020/07/21 Python
python安装mysql的依赖包mysql-python操作
2021/01/01 Python
CSS3 animation ? steps 函数详解
2019/08/30 HTML / CSS
优衣库英国官网:UNIQLO英国
2016/12/25 全球购物
曼联官方网上商店:Manchester United Direct
2017/07/28 全球购物
LN-CC日本:高端男装和女装的奢侈时尚目的地
2019/09/01 全球购物
酒店销售经理岗位职责
2014/01/31 职场文书
《金孔雀轻轻跳》教学反思
2014/04/20 职场文书
党员学习新党章思想汇报
2014/10/25 职场文书
县政协领导班子群众路线教育实践活动四风问题整改方案
2014/10/26 职场文书
您对思维方式了解多少?
2019/12/09 职场文书
Python天气语音播报小助手
2021/09/25 Python