移动端布局重构，将 px 改为 rem 布局
移动端布局逆向工程时，将Pixel（PX）块改为Relative Block（REM）布局，可以提高代码的可维护性和适应性。以下步骤详细说明了如何实现此转换。
首先，确保HTML文档的基本字体大小设置为16px，并且动态计算HTML字体大小以适应不同设备的屏幕尺寸。
请注意，设计稿宽度为750px，设计时使用的iPhone6/7/8宽度为375px。
如果取元素宽度和高度时除以2，则无需另外除750。
而是将设备宽度除以设计稿宽度。
通过vScode -In“pxtorem”连接，PX 到 REM 的转换会自动完成。
安装-in插件后，在要转换的页面上按ALT+Z即可自动转换。
这样，项目中的 PX 布局可以快速转换为 REM 布局。
如果参考字体大小不是默认的16px，而是20px，则需要相应调整计算公式和插件设置。
具体步骤如下： 1.更改计算公式以适应新参考字体的大小。
2.修改-in连接中使用的`cssrem:rootfontsize'设置来计算参考字体大小，并将默认值从16px更改为20px。
在 VSCODE 中，通过 File->Preferred->Settings 查找设置“px”搜索并将“cssrem: rootfontsize”选项调整为 20px。
此时按ALT+Z，-IN存根会自动基于20PX进行转换。
通过上述步骤，在移动端改造过程中实现了PX到REM的转换，进一步优化了代码的适配性和可维护性。
快速入门postcss插件：自动转换px到rem
PostCSS是一种转换器（转换编译器，称为翻译人员），用于CSS，它就像JS的BABBABLE一样，可以分析和转换CSS代码。
同时，它还提供了用于调整转换的插入机制。
在本节中，我们将通过自动将PX转换为REM的功能介绍PostCSS插件模块。
Postcss的原理是从CSS到CSS的翻译。
像Babel一样，它分为三个阶段：分析，转换和生成。
不同的转换插件在转换阶段工作，并基于AST执行分析和转换。
css的AST比JS容易得多。
主要有以下类型：
atrule：以 @rules开头，例如：
@mediacreenand（min-width：480px）{body
规则：选民开头的规则，例如：
羊毛{padding：5px;}
decl：特定样式，用于示例：
填充：5px;可以通过asexplorer.net
外部函数接受选项，返回插件对象，声明听众以处理哪个节点，然后然后在对应的听众中写下治疗逻辑。
您也可以像这样写：
module.exports =（opts = {}）=> {returt {postcssplugin：'插件名称'，准备（结果）{//您可以放置这里的某些公共信息在这里逻辑返回n {everaration（node）{}，rule（node）{}，atrule（node）{}}}}}}}}}}}}}
与第一个又出现相比，优势是您可以存储一些公共逻辑。
您可以像这样运行插件模块：
constpostcss = requient（'postcss'）; - 大小：20px;}'）。关于您的技能。
说明案例
px的实际要求是固定长度的单位，如果我们想通过一组样式自定义不同设备的显示，则设备显示端口的大小是不同的，我们必须相对较设置一个常用的设备是Str。
与HTML元素的字体大小相关，REM的核是比例缩放的。
例如，如果将HTML的字体大小设置为100px，则1REM等于100px。
如果随后的样式为200px，则将其写为2REM。
以这种方式，我们只需要将字体大小更改为HTML即可调整不同屏幕宽度的显示，并且特定的设备被按比例缩放。
我们必须根据HTML的字体大小将所有PX转换为REM。
这通常是手动完成的，但是在了解计算方法后，您可以使用PostCSS插头更加麻烦。
ins会自动进行。
然后，我们将实现此PostCSS插件模块
代码实现让我们看一下插件的基本结构。
我们只需要声明侦听器以进行语句处理：
您要做的是在REM的申报样式中转换PX，一个简单的常见替换将做：
constplugin =（optio ns）=> {constpxreg =/（ \ d+）px/igE; rem';}）;}）;}）;}}
替换相应的字符串，以下参数是组，第一组是PX的值。
与PX相对应的REM的计算需要与1REM相对应的PX值，可以通过选项提交。
我们测试：
postcss（[{base：base：100}））。console.log（resu lt.css）;}）
您可以看到转换正确完成：
当然，我们的插件只是一个示例，还不是完美的，需要更复杂的规则。
postcs.css transpiler，就像babel是JS的转介剂一样，Postcss的AST只有几个节点，这相对容易。
PostCSS还提供插件功能，可以进行一些自定义的分析和转换。
我们已经实现了一个简单的PX自动REM插件-IN：
rem是一种通过类似设备宽度显示不同设备宽度的表单。
可以使用PostCSS插件来完成。
实际上，分析有许多应用程序和PostCSS插头的转换功能，例如切换主题颜色。
然后进行转换。
CSS能力的PostCSS分析和转换仍然非常有用和有用。
