Question

为什么使用了rem文字可以直接换算大小不变，显示正常，给元素加rem就出现布局问题

Answer 1

rem布局是以html的font-size作为依据的，首先你得弄清楚你html的font-size是怎么控制的

追问

我不懂rem到底有什么用，他和px有什么区别，因为设置值的时候进行了换算，比如html的fontSize是10px，我设置body字体为1.2rem，为什么不直接写12px，绕弯子干嘛

就是不理解rem作用

追答

用rem布局是为了兼容手机端不同设备分别率的问题呀！百度一下看看rem布局的帖子吧！

追问

这个早百度了，就是不懂为什么换了个单位就兼容了，就像一个人大名叫小明小明叫明明，都是一样的啊

我再表述下我的疑问，比如我的html下的fontSize设置为10px，那么当我在下文中的p元素设置fontsize为1.2rem时，那么我的p元素根据换算得知是12px，为什么不直接设置12px呢？

rem到底有啥作用

追答

这样子想想看，比如iPhone 6s(6s) 和iphone6s plus(6s+)，这两者屏幕的大小是不同的。你在6s的12px也许刚合适，但是6s+上看，12px的字体就会显得有些小。
然而我通过rem布局，我只需6s+上把html元素的font-size设置大一下就OK了！
也就是说，12rem并不完全等于12px,而是根据你屏幕尺寸来得 。。。。
在不同设备上，html标签的font-size的值是会不一样的。实现这种不同的效果可以通过css的媒体查询来实现，也可以通过js来判断计算