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 相关文章推荐
jQuery 常见学习网站与参考书
Nov 09 Javascript
js解析与序列化json数据(二)序列化探讨
Feb 01 Javascript
jquery改变disabled的boolean状态的三种方法
Dec 13 Javascript
Jquery实现简单的轮播效果(代码管用)
Mar 14 Javascript
BootStrap智能表单实战系列(六)表单编辑页面的数据绑定
Jun 13 Javascript
探究Vue.js 2.0新增的虚拟DOM
Oct 20 Javascript
node.js实现复制文本到剪切板的功能
Jan 23 Javascript
JS基于递归实现网页版计算器的方法分析
Dec 20 Javascript
浅谈vue的props,data,computed变化对组件更新的影响
Jan 16 Javascript
vue.js使用v-model实现表单元素(input) 双向数据绑定功能示例
Mar 08 Javascript
vue-cli项目使用mock数据的方法(借助express)
Apr 15 Javascript
javascript实现前端成语点击验证
Jun 24 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
发挥语言的威力--融合PHP与ASP
2006/10/09 PHP
PHP实时显示输出
2008/10/02 PHP
基于PHP开发中的安全防范知识详解
2013/06/06 PHP
解析CI的AJAX分页 另类实现方法
2013/06/27 PHP
Thinkphp搭建包括JS多语言的多语言项目实现方法
2014/11/24 PHP
PHP实现活动人选抽奖功能
2017/04/19 PHP
浅谈Yii乐观锁的使用及原理
2017/07/25 PHP
PhpStorm连接服务器并实现自动上传功能
2020/12/09 PHP
Highcharts 非常实用的Javascript统计图demo示例
2013/07/03 Javascript
javascript中attribute和property的区别详解
2014/06/05 Javascript
JavaScript学习笔记之DOM基础 2.4
2015/08/14 Javascript
无需 Flash 使用 jQuery 复制文字到剪贴板
2016/04/26 Javascript
js和C# 时间日期格式转换的简单实例
2016/05/28 Javascript
利用Bootstrap实现表格复选框checkbox全选
2016/12/21 Javascript
div实现自适应高度的textarea实现angular双向绑定
2017/01/08 Javascript
JavaScript中创建对象的7种模式详解
2017/02/21 Javascript
nodejs批量下载图片的实现方法
2017/05/19 NodeJs
深入理解vue.js中的v-if和v-show
2017/06/22 Javascript
Vue学习笔记进阶篇之过渡状态详解
2017/07/14 Javascript
Node.js 使用递归实现遍历文件夹中所有文件
2017/09/18 Javascript
vuex的简单使用教程
2018/02/02 Javascript
js+for循环实现字符串自动转义的代码(把后面的字符替换前面的字符)
2020/12/24 Javascript
vue如何使用rem适配
2021/02/06 Vue.js
python开发之tkinter实现图形随鼠标移动的方法
2015/11/11 Python
django 将model转换为字典的方法示例
2018/10/16 Python
使用Python抓取豆瓣影评数据的方法
2018/10/17 Python
python实现微信小程序用户登录、模板推送
2019/08/28 Python
python编写俄罗斯方块
2020/03/13 Python
pycharm 2020.2.4 pip install Flask 报错 Error:Non-zero exit code的问题
2020/12/04 Python
python asyncio 协程库的使用
2021/01/21 Python
利用CSS3实现自定义滚动条代码分享
2016/08/18 HTML / CSS
HTML5 weui使用笔记
2019/11/21 HTML / CSS
土木工程师岗位职责
2013/11/24 职场文书
应届大学毕业生找工作的求职信范文
2013/11/29 职场文书
大学生活动总结模板
2014/07/02 职场文书
优秀应届本科生求职信
2014/07/19 职场文书