Webstorm安装px2rem插件

zz/2024/3/2 11:09:59

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


http://www.ngui.cc/zz/1544812.html

相关文章

react中px转rem(px2rem和px to rem rpx的使用)

.比如设计稿是750px,假设根元素字体大小设置为100px,则1rem 100px;所以为了适应各种屏幕尺寸:一般设置根元素font-size 为 屏幕宽度/UI设计图宽度 *100‘px’,这也相当于1rem对应的px尺寸。可配合媒体查询media来设置。用的时候除…

px2rem 使用技巧

安装px2rem后,再使用px上有些不同,大家可以参考px2rem官方介绍,下面简单介绍一下。 直接写px,编译后会直接转化成rem ---- 除开下面两种情况,其他长度用这个 在px后面添加/*no*/,不会转化px,会…

px2rem的食用方法

安装 npm install px2rem-loader找到 build 文件夹里的 utils.js 这个文件 在cssloader 后面加入 var px2remLoader {loader: px2rem-loader,options: {remUnit: 40 // 40px 1remremPrecision: 8 // rem的小数点后位数}} 再然后把这行替换成const loaders options.usePost…

适配移动端配置px2rem(自动将px转rem)

vue配置px2rem 1、安装 npm install px2rem-loader lib-flexible –save2、在项目入口文件main.js中引入lib-flexible import ‘lib-flexible/flexible.js’3、在build下的 utils.js中,generateLoaders 方法。 const px2remLoader {loader: px2rem-loader,opti…

在vue-cli4中移动端的自适应:amfe-flexible和px2rem-loader

1、首先在项目中安装以下依赖 npm install px2rem-loader --save npm install amfe-flexible --save npm install postcss-px2rem --save 2、在main.js中添加: import amfe-flexible 3、在vue.config.js中进行配置 module.exports {css: {loaderOptions: {pos…

ATmega16 单片机 AVR单片机 智能风扇控制器

实践项目5——智能风扇控制器 一、功能说明 基于AVR单片机设计一智能风扇控制器,该控制器可选根据温度控制风扇转速。 二、具体要求 1、设计温度检测电路,对温度进行实时检测; 2、当温度小于25℃时,风扇停转;当温度超…

atmega 128 单片机 智能风扇控制器 PWM 串口 DS18B20 PROTEUS 仿真

实践项目 5 ― 智能风扇控制器 一、功能说明基于 AVR 单片机设计一智能风扇控制器,该控制器可选根据温度控制风扇转速。 二、具体要求 1 、设计温度检测电路,对温度进行实时检测 2 、当温度小于 25 ℃时,风扇停转;当温度超过 25 …

Arduino入门篇——继电器控制风扇

材料与环境 硬件:Arduino、继电器、直流电机、风扇、1.5V电池(因为直接接在Arduino上,电压会不足)、杜邦线若干、面包板 软件:Arduino IDE 实现功能 当有人靠近时,继电器闭合,风扇打开;当无人靠近时,继电器断开,风扇关闭 硬件连接 Arduino uno人体红外继电器5VVC…

台式计算机散热风扇装在哪里,电脑机箱风扇怎么装

3电脑风扇选购方法风量、风压相爱相杀的CP组合无论是哪一种技术的电脑散热风扇,其实就是电流通过控制电路,在定子线圈处和电磁铁处产生旋转磁场,推动转子上的磁铁朝特定方向旋转,从而带动整个扇叶高速旋转,推动空气快速…

树莓派使用pwm控制风扇

使用gpio readall查看针脚名称 $ gpio readall-------------------------------Pi 4B------------------------------| BCM | wPi | Name | Mode | V | Physical | V | Mode | Name | wPi | BCM |----------------------------------------------------------------| …