一、vue中自适应rem的设置

新建文件src/libs/rem.js

function setRem() {// 750px为设计稿视口宽度 字体大小默认18px;const screenWidth = 750const scale = screenWidth / 18const htmlWidth = document.documentElement.clientWidth || document.body.clientWidth// 得到html的Dom元素const htmlDom = document.getElementsByTagName('html')[0]// 设置根元素字体大小htmlDom.style.fontSize = htmlWidth / scale + 'px'}// 初始化setRem()// 改变窗口大小时重新设置 remwindow.onresize = function() {setRem()}

以后中所有宽度和大小都用rem表示，不要写px，如果非要写px，可以在vscode下载px to rem组件，写px会自动转换成rem。

最后在main.js或在APP.vue中引入import '@/libs/rem.js'

二、vant组件库px自动修改为相对大小的方法两则（postcss-pxtorem和postcss-px-to-viewport）

在使用vant组件时，vant采用的都是px的绝对宽度，其设计稿是视口宽度为375px作为基准值。我们在开发时，为了自适应宽度，往往采用rem或vm或百分比等相对单位作为宽度。但vant组件写死了，我们如何在代码中不修改vant原生的style，也能让页面在运行时做到自适应变化呢。

方法1：采用postcss-pxtorem组件

步骤1：

npm i postcss-pxtorem --save -dev

步骤2：

在根目录下新建文件 .postcssrc.js，内容如下：

module.exports = {plugins: {'autoprefixer': {browsers: ['Android >= 4.0', 'iOS >= 8']},'postcss-pxtorem': {rootValue: 9,propList: ['*']}}}

本方法主要将vant组件原px转化成rem表示的视口大小。注意，这 rootValue: 9是有讲究的，vant中原设计稿为375px，而本项目为750px，比例关系为1：2,所以如果本设计稿中18px表示1rem，则vant设计稿如果要表示本设计稿1rem的宽度要用9px，因此这里rootValue填9，表示本项目所有用到px的地方，要按照9px=1rem进行缩放。

方法二：采用postcss-px-to-viewport组件

步骤1：

npm i postcss-px-to-viewport --save -dev

步骤2：

在根目录下新建文件 .postcssrc.js，内容如下：将vant组件库中px大小转换为vw相对大小，vant组件库中是按照375px=100vm来的，这里只要将viewportWidth设为375，则项目中所有用px表示的地方（也就vant组件库使用了，自己写的css部分都用的rem表示宽度），都等比例缩放自适应当前屏幕宽度

module.exports = {plugins: {'autoprefixer': {browsers: ['Android >= 4.0', 'iOS >= 8']},"postcss-px-to-viewport": {unitToConvert: "px", // 要转化的单位viewportWidth: 375, // UI设计稿的宽度unitPrecision: 6, // 转换后的精度，即小数点位数propList: ["*"], // 指定转换的css属性的单位，*代表全部css属性的单位都进行转换viewportUnit: "vw", // 指定需要转换成的视窗单位，默认vwfontViewportUnit: "vw", // 指定字体需要转换成的视窗单位，默认vwselectorBlackList: ["wrap"], // 指定不转换为视窗单位的类名，minPixelValue: 1, // 默认值1，小于或等于1px则不进行转换mediaQuery: true, // 是否在媒体查询的css代码中也进行转换，默认falsereplace: true, // 是否转换后直接更换属性值exclude: [], // 设置忽略文件，用正则做目录名匹配landscape: false // 是否处理横屏情况}}}

vue中自适应rem的设置及vant组件库px自动修改为相对大小的方法两则（postcss-pxtorem和postcss-px-to-viewport）相关推荐

【Vue知识点- No8.】网易云音乐案例（vant组件库的使用）
No8.网易云音乐案例知识点自测知道reset.css和flexible.js的作用. 什么是组件库-例如bootstrap的作用. yarn命令的使用. 组件名字用name属性方式注册. 如何自 ...
vue中使用rem适配方案
一.移动端适配常见方案: (1)通过媒体查询的方式即CSS3的meida queries (2)以天猫首页为代表的 flex 弹性布局 (3)以淘宝首页为代表的 rem+viewpor ...
vue 中监听并设置scrollTop
vue 中监听并设置scrollTop 问题描述: 目前在做一个项目,父子组件以及兄弟组件中数据调用比较频繁.但是鉴于项目没那么大,就没有使用vuex.直接使用了this.$emit来给父级组件传递参 ...
【Vue知识点- No7.】路由、vant组件库的使用
No7.路由.vant组件库的使用学习目标 1.能够了解单页面应用概念和优缺点 2.能够掌握vue-router路由系统使用 3.能够掌握链接导航和编程式导航用法 4.能够掌握路由嵌套和路由守卫 5 ...
微信小程序中使用vant组件库（超详细）
目录前言 Vant Weapp的安装与使用 1.安装 node.js 2.通过 npm 安装 3.修改 app.json 4.修改 project.config.json 5.构建 npm 包 6. ...
基于Vue结合Vant组件库的仿电影APP
Vue综合案例 Vue综合案例一.项目概要 1.效果前瞻 2.开发流程 3.开发环境二.初始化及必要知识点 1.初始化远程仓库 2.创建项目 3.路由规划 4.反向代理配置 5.网络请求封装 6. ...
微信小程序中引用vant组件库
步骤 1.vant组件库里面也有说明,它说package.json 和 node_modulles 必须在miniprogram目录下,可是一般你刚新建一个小程序项目的时候,是没有package.js ...
有赞Vant组件库的引入及轮播图片预览的实现
有赞Vant组件库的引入及轮播图片预览的实现 1.图片预览组件ImagePreview 这个vant组件与其它组件的引入方式不同,不需要在main.js中引入,直接在页面中引入即可: ImagePre ...
Vant组件库封装可翻页日历组件
前言我们在进行VUE开发的时候有的时候会使用到VantUI组件库: https://vant-contrib.gitee.io/vant/v2/#/zh-CN/home#jie-shao Vant ...

vue中自适应rem的设置及vant组件库px自动修改为相对大小的方法两则（postcss-pxtorem和postcss-px-to-viewport）

一、vue中自适应rem的设置

二、vant组件库px自动修改为相对大小的方法两则（postcss-pxtorem和postcss-px-to-viewport）

方法1：采用postcss-pxtorem组件

方法二：采用postcss-px-to-viewport组件

vue中自适应rem的设置及vant组件库px自动修改为相对大小的方法两则（postcss-pxtorem和postcss-px-to-viewport）相关推荐

最新文章

热门文章