关于vant里面的元素px转rem

用npm下载以下

npm install postcss-pxtorem --save-dev
npm install amfe-flexible --save-dev

在postcss.config.js里面输入以下代码（没有该文件的话，可以自己在项目的根目录里面进行创建

module.exports = {plugins: {'autoprefixer': {browsers: ['Android >= 4.0', 'iOS >= 7']},'postcss-pxtorem': {rootValue: 37.5,//这是基准值，在375px的屏幕变大rem的值会变大，小于这个大小元素的rem值会变小propList: ['*']}}}

（1）最后在main.js里面引入

import 'amfe-flexible

重启服务即可观察到px已经自动转成了rem

（2）或在plugin文件夹里面创建rem.js

// 设置 rem 函数
function setRem () {// 320 默认大小16px; 320px = 20rem ;每个元素px基础上/16let htmlWidth = document.documentElement.clientWidth || document.body.clientWidth;
//得到html的Dom元素let htmlDom = document.getElementsByTagName('html')[0];
//设置根元素字体大小htmlDom.style.fontSize= htmlWidth/20 + 'px';
}
// 初始化
setRem();
// 改变窗口大小时重新设置 rem
window.onresize = function () {setRem()
}

同样，在main.js里面引入即可

重启服务观察到px已经自动转成了rem

关于vant里面的元素px转rem相关推荐

vue3+vant移动端适配 px转换rem
Vant 中的样式默认使用 px 作为单位,如果需要使用 rem 单位,推荐使用以下两个工具: postcss-pxtorem 是一款 postcss 插件,用于将 px 单位转化为 rem lib- ...
html页面如何按需导入vant,vue脚手架中使用Vant，实现自动按需引入组件，并将px转换为rem...
偶然间看到一款不错的移动端vue组件库Vant,照着官方文档敲了一下,感觉还是不错的.想着以后的项目中可能会运用到,特此记录下,方便之后使用. 现在很多的组件库为了减小代码包体积,都支持按需加载了.V ...
将已写好页面的px转化为rem（px to rem）
将已写好页面的px转化为rem(px to rem) 1.px/rem单位 px:pixel的缩写,像素的意思 rem : 是一个相对单位,1rem等于根元素的font-size值 2.为什么要实现p ...
Vue移动端项目中px转rem的两种方法
1)使用lib-flexible动态设置REM基准值(html标签的字体大小) 安装依赖 yarn add amfe-flexible// 或者npm i amfe-flexible 然后在main. ...
px,em,rem,vh,vw,vmin,vmax的区别
css手册中关于font-size是这么介绍的: font-size 值可以是绝对或相对值. 绝对值: 将文本设置为指定的大小不允许用户在所有浏览器中改变文本大小(不利于可用性) 绝对大小在确定了输 ...
我应该在CSS中使用px或rem值单位吗？
本文翻译自:Should I use px or rem value units in my CSS? I am designing a new website and I want it to be ...
html px转换,pc端px转换为rem针对屏幕分辨率进行页面适配
常用的pc端网站适配方案是什么?用的最多的大概就是父元素按照设计图的宽度进行固定宽度,margin:0 auto居中,两边留白.但是有的设计图不适合这样两边留白的适配方案. 最近接手了一个pc端的项目 ...
html移动端怎么做城市选择,移动端页面单位的选择（px, em, rem, vw）
px, em, rem的区别: px:绝对字体大小 em:基于一个基数来计算出相对字体大小.(移动端用的少) rem:基于根节点(html)的字体大小来计算. vw:可视区宽度单位.1vw等于可视区宽 ...
px ,em ,rem
做移动端或者响应式的页面必然需要字体的变化的.这次我就自己的经验来说说他们之间的关系,以及怎么用. px (绝对单位)是我们常用的就不说了. em(相对单位,相对父级) em 指字体高,任意浏览器的默 ...

关于vant里面的元素px转rem

关于vant里面的元素px转rem相关推荐

最新文章

热门文章