Vue移动端项目中px转rem的两种方法
1）使用lib-flexible动态设置REM基准值(html标签的字体大小)
安装依赖
yarn add amfe-flexible// 或者npm i amfe-flexible
然后在main.js中引入加载执行该模块
import 'amfe-flexible'
最后测试：在浏览器中切换不同设备尺寸，观察html标签font-size的变化。成功后，以后的单位直接写px即可。
2）使用postcss-pxtorem将px转为rem。
安装依赖
yarn add postcss-pxtorem -D// 或者npm i postcss-pxtorem -D
然后在项目根目录中创建postcss.config.js文件
// postcss.config.jsmodule.exports = {plugins: {'postcss-pxtorem': {rootValue: 37.5, // 此设计稿尺寸为375pxpropList: ['*'],},},};
如果设计稿的尺寸不是 375，而是 750 或其他大小，可以将 rootValue 配置调整为:
// postcss.config.jsmodule.exports = {plugins: {// postcss-pxtorem 插件的版本需要 >= 5.0.0'postcss-pxtorem': {rootValue({ file }) {return file.indexOf('vant') !== -1 ? 37.5 : 75;},propList: ['*'],},},};
配置完成后，重新Vue启动服务
最后测试：刷新页面，审查元素样式表是否已将px转换为rem。
自定义的也会生效
【注意】如果写的是行内样式，则不会生效
扩展
Vue移动端项目中px转rem的两种方法相关推荐
- 将uni-app打包的H5放在 Android程序中在 webview 显示的两种方法
将uni-app打包的H5放在 Android程序中在 webview 显示的两种方法 前言 Hash History 完事 前言 之前有个项目要同时做小程序和APP,本着节省时间的想法,研究了下un ...
- arcgis用python字段自动编号,arcgis中字段自动编号的两种方法
<arcgis中字段自动编号的两种方法>由会员分享,可在线阅读,更多相关<arcgis中字段自动编号的两种方法(4页珍藏版)>请在人人文库网上搜索. 1.精选文档关于ARCGI ...
- Java中的string定义的两种方法和区别
java中的String定义的两种方法和区别 第一种:new方式 String s1 = new String("hello world"); String s2 = new St ...
- 多元统计分析matlab,MATLAB的统计工具箱中的多元统计分析中提供了聚类分析的两种方法...
MATLAB的统计工具箱中的多元统计分析中提供了聚类分析的两种方法: 1.层次聚类hierarchical clustering 2.k-means聚类 这里用最简单的实例说明以下层次聚类原理和应用发 ...
- WPF中在XAML中实现数据类型转换的两种方法
WPF中在XAML中实现数据类型转换的两种方法 原文:WPF中在XAML中实现数据类型转换的两种方法 熟悉数据绑定的朋友都知道,当我们在Model中获取一个对象的数据,常常需要对其进行数据转换后显示在 ...
- python怎么清屏_python实现清屏的方法 Python Shell中清屏一般有两种方法。
Python Shell 怎样清屏? Python Shell中清屏一般有两种方法. 奈何一个人随着年龄增长,梦想便不复轻盈:他开始用双手掂量生活,更看重果实而非花朵.--叶芝<凯尔特的搏暮&g ...
- VB中FSO的调用的两种方法
方法一: Dim objFso Set objFso = CreateObject("Scripting.FileSystemObject") ...
- Revit插件教学丨Revit中绘制斜楼板的两种方法?
Revit插件教学丨Revit中绘制斜楼板的两种方法? 我们经常遇到一些斜楼板,很多朋友不知道如何画好楼板,经常在公众号留言说怎么画好楼板,怎么快速高效.但我相信很多玩Revit的玩家都很熟悉,今天和 ...
- 计算机word降序排列怎么做,word中怎么进行排序的两种方法
word文档中表格除了作为我们的编辑和展示功能之外,还可以进行排序功能,十分方便,那么下面就由学习啦小编给大家分享下word中进行排序的技巧,希望能帮助到您. word中进行排序方法一: 步骤一:将光 ...
最新文章
- shell 中| || () {} 用法以及shell的逻辑与或非
- python自学_为什么要选择Python怎样系统的自学并快速学习Python
- POJ1236Network of Schools——强连通分量缩点建图
- cookie可存的最大限制_cookie、localStorage、sessionStorage、
- mysql数据库计算两列数据的和_在sql中对两列数据进行运算作为新的列操作
- react如何卸载组件_18道 React 面试必考题含解答面试高频
- Redis基础（八）——集群
- 【2021牛客暑期多校训练营9】E Eyjafjalla （倍增，dfs序，主席树）
- Homestead安装 PHP Redis 扩展
- Spring MVC基础入门
- JVM性能调优监控工具详解
- 赛车！赛车！Wipe out everything!
- excel高级筛选怎么用_神！Excel高级筛选原来如此好用
- 0基础怎么画出好看的水彩画美术集水彩教程入门级教程
- Python Django 添加首页尾页上一页下一页代码实例
- Dell电脑插入耳机没反应 解决办法
- SDHC介绍(收集网上资料－仅供学习之用)
- 【能效管理】电力监控系统在某商业数据中心的应用分析
- allegro ARTWORK设置笔记
- 手机显示器云服务器,不想买台式机，手机加显示器组成云电脑是否可行？