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 相关文章推荐
漂亮的提示信息(带箭头)
Mar 21 Javascript
javascript 日期时间 转换的方法
Feb 21 Javascript
jquery 关于event.target使用的几点说明介绍
Apr 26 Javascript
jquery dialog open后,服务器端控件失效的快速解决方法
Dec 19 Javascript
JavaScript中操作Mysql数据库实例
Apr 02 Javascript
jQuery实现切换页面过渡动画效果
Oct 29 Javascript
JS匿名函数类生成方式实例分析
Nov 26 Javascript
微信小程序 Windows2008 R2服务器配置TLS1.2方法
Dec 05 Javascript
Bootstrap整体框架之CSS12栅格系统
Dec 15 Javascript
JavaScript实用代码小技巧
Aug 23 Javascript
微信小程序全局变量的设置、使用、修改过程解析
Sep 24 Javascript
JS实现横向轮播图(初级版)
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
php5.2以下版本无json_decode函数的解决方法
2014/05/25 PHP
PHP人民币金额转大写实例代码
2015/10/02 PHP
php基于curl主动推送最新内容给百度收录的方法
2016/10/14 PHP
解决tp5在nginx下修改配置访问的问题
2019/10/16 PHP
Prototype使用指南之enumerable.js
2007/01/10 Javascript
JQuery小知识
2010/10/15 Javascript
如何使用Jquery获取Form表单中被选中的radio值
2013/08/09 Javascript
js同比例缩放图片的小例子
2013/10/30 Javascript
NodeJS使用jQuery选择器操作DOM
2015/02/13 NodeJs
JavaScript里四舍五入函数round用法实例
2015/04/06 Javascript
常用的Javascript设计模式小结
2015/12/09 Javascript
JavaScript、jQuery与Ajax的关系
2016/01/24 Javascript
CKEditor无法验证的解决方案(js验证+jQuery Validate验证)
2016/05/09 Javascript
json数据处理及数据绑定
2017/01/25 Javascript
layer弹出层中H5播放器全屏出错的解决方法
2017/02/21 Javascript
canvas实现图片根据滑块放大缩小效果
2017/02/24 Javascript
Agularjs妙用双向数据绑定实现手风琴效果
2017/05/26 Javascript
vue插件vue-resource的使用笔记(小结)
2017/08/04 Javascript
vue.js做一个简单的编辑菜谱功能
2018/05/08 Javascript
在Vue-cli里应用Vuex的state和mutations方法
2018/09/16 Javascript
傻瓜式解读koa中间件处理模块koa-compose的使用
2018/10/30 Javascript
nodejs 使用nodejs-websocket模块实现点对点实时通讯
2018/11/28 NodeJs
基于numpy.random.randn()与rand()的区别详解
2018/04/17 Python
numpy.transpose对三维数组的转置方法
2018/04/17 Python
python实现数据导出到excel的示例--普通格式
2018/05/03 Python
使用Python更换外网IP的方法
2018/07/09 Python
python3.6连接mysql数据库及增删改查操作详解
2020/02/10 Python
python shapely.geometry.polygon任意两个四边形的IOU计算实例
2020/04/12 Python
通过代码简单了解django model序列化作用
2020/11/12 Python
css3学习系列之移动属性详解
2017/07/04 HTML / CSS
ECCO爱步美国官网:来自丹麦的鞋履品牌
2016/11/23 全球购物
Omio英国:搜索并比较便宜的巴士、火车和飞机
2019/08/27 全球购物
环保建议书400字
2014/05/14 职场文书
夫妻分居协议书范本
2014/11/28 职场文书
Python编解码问题及文本文件处理方法详解
2021/06/20 Python
Python集合的基础操作
2021/11/01 Python