Webstorm安装px2rem插件

做过前端开发的都知道，前端开发适配是一个头疼的问题，各种尺寸要算来算去，现在终于可以解决这个烦恼了，安装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安装使用教程】

Webstorm安装px2rem插件相关推荐

webstorm安装eslint插件_在WebStorm中使用ESLint开发Vue项目 | 六阿哥博客
对于习惯使用 IntelliJ IDEA 的玩家,使用 WebStorm 来编写前端代码比使用 Visual Studio Code 更得劲,于是开始折腾... 我使用的 WebStorm 版本是 2 ...
Webstorm安装Markdown插件不识别md文件的问题
前言 Webstorm作为前端的开发神器,猿猿们一定不会陌生.插件丰富,支持的语言超级多. 截至本文发稿为止,最新版为2021.1版.我之前从18版本就开始用了,到了2020.1版本,偶然发现好多插件 ...
Webstorm安装使用
Webstorm 这篇文章的阅读量已经超过 10 万了.对于前端开发,Vscode 基本成为默认开发工具,Webstorm 在慢慢退出历史舞台.如果你还没有接触过 Vscode,可以去官网下载一个试一 ...
vue2项目中实现字体自适应（使用px2rem插件将px转rem）
1.安装px2rem插件 npm add postcss-px2rem 2.配置 (1)在src下的utils目录中新建px2rem.js文件(没有utils就新建一个) px2rem.js // 基 ...
Webstorm 2020.3 安装 Emmet 插件
Webstorm 2020.3 安装 Emmet 插件工具:Webstorm 2020.3 1.打开Webstorm 2020.3 2.点击"file(文件)","se ...
webstorm安装插件失败怎么办？
1.以安装eslint为例: 2.当安装时间过长会有超时警告,警告你安装失败,不要慌,把此时警告中的插件地址复制出来,在浏览器地址栏打开,下载 3.如图 4.解压,然后把解压后的文件夹,放到 (找对自 ...
webstorm中没有vue插件_webstorm安装vue插件及安装过程出现的问题
想要编辑器识别vue文件需要安装vue插件 1. 安装方法: File--> setting --> plugin ,点击plugin,在内容部分的左侧输入框输入vue,会出现1个关于 ...
Eclipse安装STS插件并解决安装缓慢问题
原 Eclipse安装STS插件并解决安装缓慢问题 2018年11月20日 10:22:29 MyronCham 阅读数 1198 标签: sts 更多个人分类: 开发工具 Eclipse安装spr ...
WebStorm安装Vim以及快捷键设置
运气好,赶上了2012年12月21日"世界末日"的促销活动,便宜买到了这款号称The smartest JavaScript IDE的软件. 我一向对工具很挑剔,由于是从.NET转 ...