1-07 React配置postcss-px-to-viewport

React配置postcss-px-to-viewport

移动端适配

  1. 安装依赖:在项目根目录下运行以下命令安装所需的依赖包:
npm install postcss-px-to-viewport --save-dev
  1. 配置代码
const path = require('path');module.exports = {webpack: {alias: {'@': path.resolve(__dirname, 'src'),},},style: {postcss: {mode: 'exclude',loaderOptions: {postcssOptions: {ident: 'postcss',plugins: [['postcss-px-to-viewport',{unitToConvert: 'px', // 要转化的单位viewportWidth: 375, // UI设计稿的宽度viewportUnit: 'vw', // 指定需要转换成的视窗单位,建议使用 remfontViewportUnit: 'vw', // 字体使用的视口单位unitPrecision: 13, // 指定`px`转换为视窗单位值的小数后 x位数// propList: 当有些属性的单位我们不希望转换的时候,可以添加在数组后面,并在前面加上!号,如propList: ["*","!letter-spacing"],这表示:所有css属性的属性的单位都进行转化,除了letter-spacing的propList: ['*'], // 指定转换的css属性的单位,*代表全部css属性的单位都进行转换// 转换的黑名单,在黑名单里面的我们可以写入字符串,只要类名包含有这个字符串,就不会被匹配。比如selectorBlackList: ['wrap'],它表示形如wrap,my-wrap,wrapper这样的类名的单位,都不会被转换selectorBlackList: ['ignore'], // 指定不转换为视窗单位的类名,minPixelValue: 1, // 默认值1,小于或等于1px则不进行转换mediaQuery: true, // 是否在媒体查询的css代码中也进行转换,默认falsereplace: true, // 是否转换后直接更换属性值exclude: [/node_modules/], // 设置忽略文件,用正则做目录名匹配landscape: false, // 是否处理横屏情况},],],},},},},
};
  1. 重新启动开发服务器:如果你的开发服务器正在运行,请重新启动它以应用新的配置。

在这里插入图片描述

之后当我们写px时会自动转换成vm单位

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/116763.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

软考系列(系统架构师)- 2021年系统架构师软考案例分析考点

试题一 软件架构(架构风格、质量属性) 【问题1】(9分) 在架构评估过程中,质量属性效用树(utility tree)是对系统质量属性进行识别和优先级排序的重要工具。 请将合适的质量属性名称填入图1-1中(1)、(2)空白处&#xf…

蓝桥杯每日一题0223.10.23

第几天 - 蓝桥云课 (lanqiao.cn) 题目描述 题目分析 简单枚举&#xff08;用k来记录经过的天数&#xff09; #include<bits/stdc.h> using namespace std; bool is_ren(int n) {if(n % 400 0 || (n % 4 0 && n % 100 ! 0))return true;return false; } int …

Towards a Rigorous Evaluation of Time-series Anomaly Detection(论文翻译)

1 Introduction 随着工业4.0加速系统自动化&#xff0c;系统故障的后果可能会产生重大的社会影响&#xff08;Baheti和Gill 2011; Lee 2008; Lee&#xff0c;Bagheri和Kao 2015&#xff09;。为了防止这种故障&#xff0c;检测系统的异常状态比以往任何时候都更加重要&#xff…

电脑待办事项提醒工具用哪个?

在一个繁忙的办公楼里&#xff0c;人们匆匆忙忙地穿梭着&#xff0c;电脑屏幕前的每个人都有着繁重的工作任务。为了应对这些任务&#xff0c;有人喜欢在纸上列出清单&#xff0c;有人则更愿意在电脑上记录&#xff0c;日常记录待办事项建议大家可以使用提醒工具敬业签。 敬业…

IP地址在各行业中的常见应用场景

IP地址在各行业中有多种应用场景&#xff0c;它不仅用于标识和定位设备&#xff0c;还用于实现各种功能和服务。以下是IP地址在不同行业中的一些应用场景&#xff1a; 互联网和通信行业&#xff1a; 网络寻址和标识&#xff1a; IP地址是互联网上的设备的唯一标识符&#xff0…

【Git】idea提交项目到Gitee

文章目录 1. 创建Gitee仓库1. 新建仓库2. 添加描述3. 复制仓库地址 2. idea建立连接提交2.1 Create Git Repository2.2 选择要提交的根目录2.3 Commit2.4 Push2.5 提交成功 1. 创建Gitee仓库 1. 新建仓库 2. 添加描述 3. 复制仓库地址 点击右上角克隆/下载&#xff0c;复制HT…

Hudi 0.14.0 编译

1 编译环境 Java1.8maven3.9.3hadoop3.3.4hive3.1.3spark3.2.1flink1.16.0hudi0.14.02 hudi准备 2.1 源码 $ git clone https://github.com/apache/hudi.git $ cd hudi $ git checkout release-0.14.02.2 修改pom文件 2.2.1 新增repository加速依赖下载 <

SparkSQL之LogicalPlan概述

逻辑计划阶段在整个流程中起着承前启后的作用。在此阶段&#xff0c;字符串形态的SQL语句转换为树结构形态的逻辑算子树&#xff0c;SQL中所包含的各种处理逻辑&#xff08;过滤、剪裁等&#xff09;和数据信息都会被整合在逻辑算子树的不同节点中。逻辑计划本质上是一种中间过…

Elasticsearch第二篇:es之间版本比较

一、前言 在学习Elasticsearch 时候&#xff0c;因为各个版本的问题&#xff0c;搞不清&#xff0c;非常的头疼&#xff0c;官方也给出了各个版本更新的情况&#xff0c;不过是英文版本&#xff0c;版本更新信息又特别多&#xff0c;最近学习&#xff0c;看了很多资料&#xf…

配置公网和私网用户通过非公网口的IP地址访问内部服务器和Internet示例

组网需求 如配置公网和私网用户通过非公网口的IP地址访问内部服务器和Internet示例所示&#xff0c;某小型企业内网部署了一台路由器、一台FTP服务器和一台Web服务器。路由器作为接入网关&#xff0c;为下挂的内网用户提供上网服务&#xff0c;主要包括浏览网页、使用即时通信…

墨西哥专线:国产商品迅速开拓墨西哥市场的基础

随着全球贸易的不断发展&#xff0c;越来越多的中国企业开始将目光投向海外市场。墨西哥作为北美洲的重要国家&#xff0c;拥有庞大的消费市场和广阔的发展空间&#xff0c;对于中国企业来说&#xff0c;无疑是一个极具潜力的市场。然而&#xff0c;如何让国产商品在这个市场上…

第一届猿人学爬虫比赛1-20题题解

文章目录 这次把之前写的猿人学题解整合一下&#xff0c;方便大家索引查看&#xff0c;先提前说一下这些题解大部分都在我的付费专栏 JS逆向百例 里&#xff0c;专栏价格49.9 &#xff0c;平台扣除20&#xff0c;我实际能收到29.9 &#xff0c;一杯咖啡钱&#xff0c;穷不了你富…

Go 重构:尽量避免使用 else、break 和 continue

else 操作 我们有简单的用户处理程序&#xff1a; func handleRequest(user *User) {if user ! nil {showUserProfilePage(user)} else {showLoginPage()} }如果没有提供用户&#xff0c;则需要将收到的请求重定向到登录页面。If else 似乎是个不错的决定。但我们的主要任务是…

基于ElasticSearch+Vue实现简易搜索

基于ElasticSearchVue实现简易搜索 一、模拟数据 产品名称描述价格库存数量品牌名称智能手表智能手表&#xff0c;具有健康跟踪和通知功能。199.991000TechWatch4K智能电视4K分辨率智能电视&#xff0c;提供出色的画质。699.99500VisionTech无线耳机降噪无线耳机&#xff0c;…

若依和芋道

国外卷技术,国内卷业务,做管理业务通常使用开源框架就可以快速满足,若依和芋道都是开源二开工具较为流行的框架,芋道是基于若依的,基本上是开发人员自己写业务开发框架的天花板,两者的前端都是基于vue-element-admin的,使用Gitee上两者的SpringBoot的最轻量化版本进行对…

485modbus转profinet网关连三菱变频器modbus通讯配置案例

本案例介绍了如何通过485modbus转profinet网关连接威纶通与三菱变频器进行modbus通讯。485modbus转profinet网关提供了可靠的连接方式&#xff0c;使用户能够轻松地将不同类型的设备连接到同一网络中。通过使用这种网关&#xff0c;用户可以有效地管理和监控设备&#xff0c;从…

Go目录文件路径操作

目录操作 os.ReadDir() 读取目录 package mainimport ("fmt""os" )func main() {dirs, err : os.ReadDir("./search")if err ! nil {fmt.Println(err)}for _, dir : range dirs {fileinfo, _ : dir.Info()fmt.Println(fileinfo)fmt.Println(&…

VR航天科普主题公园模拟太空舱体验馆vr航天模拟体验设备

VR航天航空体验馆巡展是一项非常受欢迎的展览活动&#xff0c;可以让公众在现场体验到航天飞行的乐趣。 普乐蛙VR展览组织者会设计一个航天航空主题的VR体验馆&#xff0c;并在馆内设置各种航天航空相关的展示内容&#xff0c;如太空舱、火箭发射、星际航行等。 其次&#xff0…

【机器学习合集】泛化与正则化合集 ->(个人学习记录笔记)

文章目录 泛化与正则化1. 泛化(generalization)2. 正则化方法2.1 显式正则化方法显式正则化方法对比提前终止模型的训练多个模型集成Dropout技术 2.2 参数正则化方法2.3 隐式正则化方法方法对比 泛化与正则化 1. 泛化(generalization) 泛化不好可能带来的问题 模型性能不稳定容…

解决Linux下编译TBB动态库出错的问题

在CMakeLists.txt中&#xff0c;原来有一段这样查找和链接的配置代码 find_library(tbblibaray ${tbb_path}) target_link_libraries(backalarm ${tbblibaray})编译后提示错误&#xff1a; /myapp/library/tbb/libtbb.so&#xff1a;对‘__cxa_throw_bad_array_new_lengthCX…