将所有出现的 px 转换为 rem 以进行响应式设计

Question

我是一名网络开发新手，犯了一个大错误。我正在为一个大学项目创建一个网站，它需要具有响应能力。我有大量的 CSS 都是以 px 为单位编写的。但现在为了响应能力，我想将所有 px 转换为 rem。一件一件地做起来会很累。有什么工具可以帮助我吗？

Answer 1

我不知道有什么工具可以自动将所有 px 更改为 rems，但如果您执行以下操作，则可以快速进行更改：

body {
   font-size: 0.625rem; 
{

现在 1 rem 将等于 10 px，如果您使用 Vscode，您可以输入快捷方式Ctrl + F并在“查找”输入中选择“使用正则表达式”选项。然后您可以(\d*)?(\d).?(\d*)?px在“查找”字段和$1.$2$3rem“替换”字段中键入。但请注意，此正则表达式不适用于以点开头的大小，如.5px。

搜索栏应如下所示：

如果您想了解此正则表达式的工作原理，请单击此处。