【教程】如何使用px2rem来简单粗暴的完成手机适配？

关于IT

1.什么是px2rem？px2rem是一个插件，功能是将px转换为rem，帮助开发者进行适配，是一款非常好用的插件。

2.如何安装px2rem?
不同的开发IDE安装的方式不同，在这里以官方提供的开发工具为案例演示。

step1.在开发IDE菜单栏中选择apicloud，然后选择偏好设置



step2.在弹出窗口中选择install


step3.选择px2rem-plus,进行安装，这里我已经安装了，所以没有install按钮，


step4.安装完成进行设置。
在这里，你可以对rem进行设置，我一般都是根据我的设计稿来的，比如我的设计稿宽度是1242，那么我就会将Base值设置为124.2这样的话，我的整个设计稿就是10rem的宽度。



经过以上步骤你就安装好px2rem了，并进行了对于的设置。那么接下来我们就实际来看看如何使用。

3.如何使用px2rem

当完成安装设置之后，我们在写css的时候，你输入1242px，然后敲回车，你会发现他就自动变成了10rem。



而我们在手机上进行一个预览，你会发现，输入的1242px，经过px2rem之后变成10rem，在每一个尺寸的手机上都刚好是整个屏幕的宽度。是不是觉得非常简单好用呢。
既然有这么方便好用的插件，肯定要分享给大家 ，让大家一起来使用。


px2rem的简单教程就结束了，有什么使用问题可以在帖子中留言，我来帮你解答。

关于IT

居然没人看，我要自己顶起来

@旺旺

关于IT 发表于 2018-6-2 18:31
居然没人看，我要自己顶起来

我看了！

杨愿

我看了。

落雪

使用这个rem的计算还是相对于html的font-size啊。和设置的那个Base没关系啊

时代小召唤

除了插件里的 设置 代码不需要有什么设置吗?不修改font-size?

试了一下 并没有达到预期效果

改了配置 ,然后一个div
.test{
        width: 10rem;
        height: 1rem;
        background: red;
      }
只有页面的40%左右 ,并没有楼主说的效果 ,请问是否遗漏了什么?

huabaoo

你好，我想问下，当在页面中有用到apicloud里面的方法是px, 例如fixTabBar里面是px的这种情况，怎么处理

胖死你啊

一般不同apicloud的编辑器

你好,明天

sublime  怎么使用呢

information_hdz

今天用这个 遇到坑了