关于使用rem适配的困惑

Question

本人小白一枚，希望大神能够解答一下

用rem进行移动端适配是很常用的方法了，可是我一直很疑惑的就是，为什么移动端不选择用px呢，px的局限在哪，rem比px又有什么优势呢？

Answer 1

这么个场景：你按照UI图750*1334切图，二倍图iphone6中宽度刚好 750/2 = 350px. 那么问题来了，在iphone5中屏幕宽度实际是320px的，你不能让移动端出现横向滚动条吧..
rem就是根据320px、350px...之类设备屏幕尺寸，动态计算合适的px尺寸。

Answer 2

1. 手机布局面临的问题是屏幕大小不一致的手机需要显示网页的布局是一致的 , 也就是等比例缩放的. 就像你在chorme调试移动端等比例缩放一样
2. px是绝对单位 rem是相对单位. 当然严格意义说px也是相对单位.暂且当他是绝对单位.绝对单位无法做到等比例缩放.比如你身高2米.你跑到美国也是身高2米.你的身高并不会因为国家的大小而改变; 这就是px; 也就是你在小屏幕手机用px开发好.但是到了大屏手机显示两边就有空白区域了. 你用px开发大屏手机. 然后在小屏看, 也就有横向滚动条了. 当然通过技术手段也可以搞定.但是不完美.
3. rem的强大之处在于它是动态调节的. 1rem在大屏和小屏的长度是不一样的.它是相对单位. 也就是你跑到俄罗斯后, 发现自己长高了. 你跑到日本后, 为了适应这个小国家, 身高又变矮了. rem的牛x之处在于, 字体还可以等比例放大缩小. 这是很厉害的. 总之, rem解决我们移动端开发的难题.
4. 如果还是不太懂, 那就先开发吧. 先放一放. 工作最重要嘛. 慢慢就懂了.

Answer 3

px是写死的啊，移动端五花八门的尺寸。比如你写个表格width:500px;屏幕大的能显示全屏幕小的就出现横向滚动条了。
你用rem可以根据手机屏幕大小改变你root的font-size，就可以适配不同的移动端尺寸了

Answer 4

像素px是相对于显示器屏幕分辨率而言的。
rem是CSS3新增的一个相对单位,使用rem为元素设定字体大小时，是相对HTML根元素的大小。
如果你需要适配iPhone和iPad等分辨率差别比较挺大的设备，rem布局是基于根元素的基准量来做的，所以对不同屏幕分辨率设置不同的基准量，那么对UI的还原度就会很高。