css rem 大屏开发_px和em、rem单元如何选择？

通常在网站开发过程中，会遇到一系列的问题，尤其是现在终端设备丰富的今天来说，在相对字体里面通常有三种字体单位不知道让开发人员如何进行选择？分别是px和em、rem。跟着我们往下看！

网站建设并非工业设计。也并非设计师，所以早期Dreamweaver的时代，大家习惯用于px作为字体单位，像素px是相对于显示器屏幕分辨率而言的。但是慢慢的移动端的来临，发现传统的pc端设置的字体完全不够用，太大了！为什么会产生这种情况呢？翻阅了资料才知道px是一种像素点，比如我们看的屏幕是有一个一个像素点组成的。每个设备的像素点又是不同的。开发者都要满足每个像素点字体展示的问题。

从上图可以清楚的知道，rem在众多浏览器中都已得到很好的支持，如果您的项目不用考虑IE低版本的话，你就可以放心的使用了。
em的诞生解决网站建设过程中字体随着设备(像素)变化造成的影响、但是em的算法是非常的复杂。任意浏览器的默认字体高都是16px。所有未经调整的浏览器都符合: 1em=16px。那么12px=0.75em,10px=0.625em。为了简化font-size的换算，需要在css中的body选择器中声明Font-size=62.5%，这就使em值变为 16px*62.5%=10px, 这样12px=1.2em, 10px=1em, 也就是说只需要将你的原来的px数值除以10，然后换上em作为单位就行了。
我们可以发现px和em都解决不了自适应字体的问题。随着css3诞生的新元素rem，彻底让开发者兴奋。相对于html根元素文本的字体尺寸，与中间层字体尺寸无关。也就是说 1rem=1*html元素的font-size。rem就相当于是一个全局缩放因子，改变它一个就可以缩放所有以它为单位的元素，只要将它与屏幕分辨率关联起来，就可以完成屏幕自适应展现。
所以选择什么样的字体单位为我们呈现的时候，这是相对而言的，浏览器通常是默认px为单位，如果只是制作pc端网站的话，px就可以满足了，rem是移动端来临的利器。操作也简单。大家可以多多尝试下这些字体单位。