首页 > 编程学习 > Webstorm安装px2rem插件

Webstorm安装px2rem插件

发布时间:2022/12/7 17:56:26

做过前端开发的都知道,前端开发适配是一个头疼的问题,各种尺寸要算来算去,现在终于可以解决这个烦恼了,安装px2rem插件,一键解决px与rem换算的问题。现在就来演示一下怎么在webstorm怎么安装px2rem在插件。

1、打开webstorm,点File --> Settings在这里插入图片描述

2、依次点击:Plugins --> Marketplace;输入px后回车,可以看到如下的列表;

【注】安装px2rwd插件,而不是idea px 2 rem,这里要特别注意一下
在这里插入图片描述

2、耐心等待一下,downloading…

在这里插入图片描述

3、下载安装完成之后,点击重启IDE

在这里插入图片描述

4、这个插件需要重启IDE才激活哦

在这里插入图片描述

5、重启了之后,再次打开Settings,可以看到刚才安装的插件Px to Rwd啦

在这里插入图片描述

6、设置根元素的font-size,也就是html的font-size,设置好记得点OK哦

7、看下图演示,但输入px的时候,会提示px to rem,选中即可一键转化啦

在这里插入图片描述
换算一下:1rem = 当前的px / 根元素的字体大小(html的font-size),刚才设置的root font-size = 20px;
width = 15 / 20 = 0.75rem;height = 20 / 20 = 1rem;以此类推

8、这个插件还有两个常用的快捷键,一个是alt + d,一个是ctrl + alt + d

alt + d是替换一行 ctrl + alt + d 是替换整个文件
【注意】:只能替换css文件,在html里面的内联样式替换不了

9、下面演示全部替换,ctrl + alt + d

在这里插入图片描述

10、好了,以上就是Webstorm安装px2rem插件的全过程,由于知识有限,有什么说得不对的,欢迎大家指出。

关于更多px 2 rwd请看这里

【下一篇,Vue移动端适配,Vue一键px2rem,px2rem-loader安装使用教程】


本文链接:https://www.ngui.cc/zz/1544812.html
Copyright © 2010-2022 ngui.cc 版权所有 |关于我们| 联系方式| 豫B2-20100000