是不是当你接触到 rem 的时候,感觉 rem 很强大。但是自己接触到的公司项目全部都使用 px,是不是心里有一万个为什么?想知道吗?是你的公司技术更新落后了吗?
有这个疑问的小朋友,如果我没猜错的话,可以肯定你不了解px,且心里肯定认为rem比px好。
如果真是这样,那我们就得好好说说这个问题了。
首先得先弄懂什么是px什么是rem?
现实中真的有太多的人在正在使用rem布局,但他们却没搞懂什么是rem,以及为什么要使用rem?
大部分人使用rem只是因为省事,能自适应屏幕,甚至有大量的rem布局解决方案(如:flexible等)和编辑器插件(如:px-to-rem等),你只要输入一个基准值,工具就可能自动帮你转成rem单位,所以网上很多人都批评rem布局是一个偷懒的做法。rem布局是根据设备分辨率和dpr不同动态设置html字体大小来实现自适应布局的一种做法,是一个等比缩放方案,也就是会根据屏幕大小自动缩放大小以达到自适应效果,也就是说采用rem布局的网站,屏幕越大看到的内容越大,反之屏幕越小看到的内容也就越小。但如果你尝试用不同大小的屏幕访问rem布局的网站,你就会发现,手机端还好,pad访问感觉是在用老人机,PC端访问惨不忍睹,大屏幕和小屏幕看的内容是一样的,屏幕越大内容越大,很显然不合理,我们用大尺寸屏幕为的是看到更多的内容,而不是更大的内容。
所以这样的自适应用户体验其实很不好,并不推荐使用。
如果非要在小范围内使用等比缩放的布局,其实vx,vxxx方案比rem更优,至于为什么很少人使用,以前是因为其兼容性问题,但其实现在大部分浏览器都已经对vw,vh,vmin,vmax进行了支持,所以rem应该可以退出历史舞台了。再来说说px在PC端,很多人对px的理解还停留在以前的PC时代,觉得px是一个固定单位(也就是**物理像素**),在普通分辨率的屏幕下没什么问题,但随着高分屏的出现你再观察一下,在css中设置1px是否还等于1个物理像素,很显然不是,在css中设置的px单位,其实指的是**逻辑像素**,一个由系统或软件为了屏幕显示效果而自动缩放得到的一个抽象尺寸。在普通的屏幕上逻辑像素是等于物理像素的,但在高分屏下,px等于缩放后的尺寸。在移动端,与PC有一定的区别,为了承载和显示更大的页面,引入了viewport的概念,在css中设置的px并不是逻辑像素,而是**viewport像素**,一个移动端浏览器内部对逻辑像素进行再处理的结果,但只要我们设置
<mate name="viewport" content="width=device-width"/>
这句话其实就是让逻辑像素等于viewport像素,我们在css中使用px单位其实就是逻辑像素,上面说过,逻辑像素是缩放后的尺寸,已经具备了适应了各中屏幕的效果,所以在项目只需要px就行,没必要也不应该使用已经过时的rem布局最后再说一句,一个优秀的适配方案,不可能单纯地使用某一种布局方案,如flex布局, 百分比布局,vx与vxxx布局、媒体查询等,而是综合使用它们,配合px单位才能达到真正的适配效果。