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

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 适配内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • 关于vue利用postcss-pxtorem进行移动端适配的问题

    刚开始我按照网上的一些方式利用postcss-pxtorem方式去适配的时候怎么样都不成功,后来经过自己不断尝试之后终于成功了.稍微坐下总结: 1.个人建议在进行postcss-pxtorem适配的时候利用webpack进行项目配置,而不要用webpack-simple,因为webpack里面很多插件加载器之类的都是给你预配好的,这样在项目构建中就不会遗漏什么. 2.cnpm install postcss-pxtorem -D安装postcss-pxtorem,此插件如果你用的是webpack

  • Vue中rem与postcss-pxtorem的应用详解

    rem 布局 rem是根元素(html)中的font-size值. rem布局不多赘述,有很多详细说明rem布局原理的资料. 简单的说,通过JS获取设备宽度动态设定rem值,以实现在不同宽度的页面中使用rem作为单位的元素自适应的效果. 新建rem.js文件,于main.js中引用 // 设计稿以1920px为宽度,而我把页面宽度设计为10rem的情况下 const baseSize = 192; // 这个是设计稿中1rem的大小. function setRem() { // 实际设备页面宽

  • 使用Vant完成Dialog弹框案例

    效果展示: 完整代码: <template> <!-- 完成Dialog 弹框 --> <div id="dialog"> <van-button class="btn" type="primary" @click="TipDialog">提示弹出框</van-button> <van-button class="btn" type=&quo

  • 解决vant框架做H5时踩过的坑(下拉刷新、上拉加载等)

    1. 页面在手机端不能上下滑动,在PC端浏览器正常滑动 说明:在设置了overflow:auto;属性的前提下,H5页面在PC端浏览器里展示可以上下滑动,在ios上可正常滑动,在安卓手机 上不能上下滑动:这现象并不是ios和安卓兼容性问题! 原因:设置了touch-action: none;这属性为局部或者全局属性,将这条属性注释即可正常滑动. 2.使用PullRefresh和List列表实现下拉刷新和上拉加载时出现的问题 问题1. 下拉刷新时在手机上,不论滑到任何位置,只要下拉就刷新 原因:滑

  • vue3.0中使用postcss-pxtorem的具体方法

    postcss-pxtorem是PostCSS的插件,用于将像素单元生成rem单位. 前端开发还原设计稿的重要性毋庸置疑,目前应用的单位最多还是rem,然而每次在制作过程中需要自己计算rem值,为了能够直接按照设计图的尺寸开发,并且能自动编译转换成rem,下面就来分享下postcss-pxtorem的使用. 1.安装依赖 npm install postcss-pxtorem -D 2.设置规则(更改postcss.config.js,该文件为使用vue-cli3自动创建的文件) module.

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

    Rem 布局适配 Vant 中的样式默认使用 px 作为单位,如果需要使用 rem 单位,推荐使用以下两个工具: postcss-pxtorem是一款 postcss 插件,用于将单位转化为 rem lib-flexible 用于设置 rem 基准值 看到最后有惊喜! 一.npm安装 npm install postcss-pxtorem --save 二.新建.postcssrc.js做如下修改 注: 1.以下注释代码开启后运行脚本会出现报错的提示,虽不知道有什么用,注释就好啦. module

  • js实现浏览器打印功能的示例代码

    最近接触到一个新需求,实现打印机打印小票的功能.打的一桌子小票(惭愧),不过也基本满足了业务上的需求,现在分享一下如何实现(好记性不如烂笔头) 先上代码 // 布局代码 <div id="print">     <div id="print_content"></div> </div> //js 部分代码var f = document.getElementById('printf'); if (f) { docume

  • vue如何调用浏览器分享功能详解

    vue如何调用浏览器分享功能详解

    前言 「Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架.官方描述的它还是一个渐进式框架,本文主要介绍了关于vue调用浏览器分享的相关资料,下面话不多说了,来一起看看详细的介绍吧 步骤如下: 1.开发环境 vue+vant 2.电脑系统 windows10专业版 3.在使用vue开发的过程中,我们经常会遇到分享,下面我来分享一下我的方法,希望对你有所帮助. 4.先看效果图: 5.使用NativeShare.js 来达到上述功能的实现 // 安装 npm ins

  • JavaScript调用浏览器打印功能实例分析

    本文实例讲述了JavaScript调用浏览器打印功能的方法.分享给大家供大家参考.具体如下: 1. 通用型,支持IE,Firefox,Chrome... 复制代码 代码如下: window.print(); 2. 只支持IE打印: <script> var print=function(){ /** * WebBrowser.ExecWB(1,1) 打开 * Web.ExecWB(2,1) 关闭现在所有的IE窗口,并打开一个新窗口 * Web.ExecWB(4,1) 保存网页 * Web.Ex

  • vue+vant实现商品列表批量倒计时功能

    最近因为一个项目需要用到商品批量倒计时,当时使用vant封装好的组件CountDown编写 起初不知道"timeData"这个对象只需要传time的时间戳就可以自动生成,走了一大波弯路,现在想想也是醉了 最开始写这个倒计时的时候没有考虑到使用当前服务器时间问题,只获取了本地时间 new Date().getTime(),然后发现这个不行,只要用户修改下手机本地时间,这个倒计时就不行了,有安全隐患,在网上也搜了一些相关知识,但都不尽人意,故想写这一篇文章避免大家再走我之前的弯路! 废话不

  • Vue实现浏览器打印功能的代码

    Vue实现浏览器打印功能 实际项目中使用vue实现调用本地打印机打印功能 import vueEasyPrint from "vue-easy-print"; 1.导入 "vue-easy-print" 2.编写打印模板 <template> <div> <div > <!-- 分页 --> <div class='tab_company_out'> <table cellpadding='0' ce

  • Go语言实现基于websocket浏览器通知功能

    当我们使用了websocket技术实现了实时的推送访客来到消息,但是我们只能随时看着页面不离开才能知道有访客来到 现在增加浏览器的通知消息,就可以只要打开着界面,不用一直盯着,干别的事去就可以了,有新消息会从右下角弹出来 测试地址如下,当有访客点击咨询按钮时,客服后台会弹出提示: https://gofly.sopans.com/index 首先要明确一点,现在的通知只能在https的环境下使用 , 非https , 不能使用浏览器通知,Notification.permission返回的是禁止

  • 使用Vue3+Vant组件实现App搜索历史记录功能(示例代码)

    使用Vue3+Vant组件实现App搜索历史记录功能(示例代码)

    最近在开发一款新的app项目,我自己也是第一次接触app开发,经过团队的一段时间研究调查,决定使用Vue3+Vant前端组件的模式进行开发,vue2开发我们已经用过几个项目了,所以决定这一次尝试使用Vue3来进行前段开发. 我刚开始负责搜索功能的开发,有历史搜索记录的需求,一开始我认为这是记录的存储信息也会放在一个数据库表里面,但经过一番调查,发现并不是这样,而是要存储在本地.但是网上的方法也并没有完全解决问题,经过一番尝试,终于给搞好了,话不多说,直接上效果图. 初始化不显示历史搜索记录 回车

  • vant uploader实现上传图片拖拽功能(设为封面)

    vant uploader实现上传图片拖拽功能(设为封面)

    效果图如下所示: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=devi

  • vue项目在webpack2实现移动端字体自适配功能

    使用vue开发移动端页面时,往往需要实现页面根据不同设备屏幕进行尺寸的适配,实现将px自动换算成rem单位,其实只需要安装下面的两个插件即可快速实现移动端适配问题. 1 准备工作: a. 安装 px2rem-loader 插件:npm install px2rem-loader --save: b. 安装 lib-flexible 插件:npm install lib-flexible --save; 2 插件的作用: px2rem-loader插件的作用:我们通过配置基准,实现将px自动换算成

随机推荐