当前位置: 首页 > news >正文

字体感觉小了 引入的vant_Vant中使用rem

Vant 中的样式默认使用 px 作为单位,使用 rem 单位,按照以下步骤:

postcss-pxtorem 是一款 postcss 插件,用于将单位转化为 rem

lib-flexible 用于设置 rem 基准值

一、使用 lib-flexible 动态设置 REM 基准值(html 标签的字体大小)

1、安装

# yarn add amfe-flexible

npm i amfe-flexible

2、然后在 main.js 中加载执行该模块

import 'amfe-flexible'

观察 html 标签 font-size 的变化。

二、使用 postcss-pxtorem 将 px 转为 rem

1、安装

# yarn add -D postcss-pxtorem

# -D 是 --save-dev 的简写

npm install postcss-pxtorem -D

2、然后在项目根目录中创建 .postcssrc.js 文件

module.exports = {

plugins: {

'autoprefixer': {

browsers: ['Android >= 4.0', 'iOS >= 8']

},

'postcss-pxtorem': {

rootValue: 37.5,

propList: ['*']

}

}

}

3、配置完,重新启动服务

最后测试:刷新浏览器页面,审查元素的样式查看是否已将 px 转换为 rem。

需要注意的是:

该插件不能转换行内样式中的 px,例如

标签:Vant,px,rem,使用,flexible,postcss,pxtorem,amfe

来源: https://blog.csdn.net/weixin_45818024/article/details/110005976

相关文章:

  • eplices开发android_Eclipse 安装(Neon 版本)
  • 加密狗模拟器_汽车驾驶模拟器新软件功能
  • 触摸屏开发_莱宝高科:暂无大规模扩充触摸屏产能计划,正开发OFM结构触摸屏...
  • 模拟黑洞图像_nasa绘制黑洞图像(这次我终于看到了! NASA模拟的黑洞高清令人震惊的画面,令人窒息!)...
  • github覆盖远程分支内容_Github快速上手笔记
  • 显示某年某月日历_一眼就沦陷!一款深藏中国文化古韵的日历应用
  • 深度装机大师一键重装_深度一键重装系统软件
  • idea jsp引用路径_JSP学习4
  • 于朦胧 机器人_《两世欢》上线,于朦胧演技成笑点:像个没有感情的走路机器人...
  • 无法加载 mysql 扩展_请检查您的 php 配置. - 文档_无法加载 mysql 扩展,请检查您的 PHP 配置 最新解决办法...
  • mysql可以运行oracle报错_Oracle启动报错ORA-03113解决
  • csv导入到mysql_导入CSV到MySQL
  • mysql alter identity_mysql alter 语句用法,添加、修改、删除字段【转】
  • mysql 蘑菇查询_sql语句 基本
  • 什么是页损坏 mysql_什么导致了MySQL InnoDB损坏且如何防护?
  • 【翻译】babel对TC39装饰器草案的实现
  • CSS实用技巧干货
  • es的写入过程
  • golang 发送GET和POST示例
  • HTTP中的ETag在移动客户端的应用
  • java架构面试锦集:开源框架+并发+数据结构+大企必备面试题
  • leetcode46 Permutation 排列组合
  • PHP变量
  • 二维平面内的碰撞检测【一】
  • 我感觉这是史上最牛的防sql注入方法类
  • 小程序开发之路(一)
  • 用简单代码看卷积组块发展
  • 正则表达式
  • 职业生涯 一个六年开发经验的女程序员的心声。
  • Spark2.4.0源码分析之WorldCount 默认shuffling并行度为200(九) ...
  • 翻译 | The Principles of OOD 面向对象设计原则
  • ​ 无限可能性的探索:Amazon Lightsail轻量应用服务器引领数字化时代创新发展
  • ​iOS安全加固方法及实现
  • ​LeetCode解法汇总1410. HTML 实体解析器
  • #Z2294. 打印树的直径
  • #单片机(TB6600驱动42步进电机)
  • $emit传递多个参数_PPC和MIPS指令集下二进制代码中函数参数个数的识别方法
  • (007)XHTML文档之标题——h1~h6
  • (4)事件处理——(6)给.ready()回调函数传递一个参数(Passing an argument to the .ready() callback)...
  • (博弈 sg入门)kiki's game -- hdu -- 2147
  • (附源码)ssm高校实验室 毕业设计 800008
  • (附源码)ssm教师工作量核算统计系统 毕业设计 162307
  • (十七)devops持续集成开发——使用jenkins流水线pipeline方式发布一个微服务项目
  • (五)MySQL的备份及恢复
  • ./configure,make,make install的作用
  • .NET Framework与.NET Framework SDK有什么不同?
  • .NET Standard / dotnet-core / net472 —— .NET 究竟应该如何大小写?
  • .net Stream篇(六)
  • .net websocket 获取http登录的用户_如何解密浏览器的登录密码?获取浏览器内用户信息?...
  • .NET建议使用的大小写命名原则
  • .NET开发者必备的11款免费工具
  • /bin/bash^M: bad interpreter: No such file or directory
  • @javax.ws.rs Webservice注解
  • @RequestBody的使用
  • @select 怎么写存储过程_你知道select语句和update语句分别是怎么执行的吗?