px和rem的区别
1、px实际上就是像素，与物理像素有一定的区别，用px设置字体大小，比较精确，但是有缺点，当浏览器页面缩放时，px并不能跟随变大。当前网页的布局就会被打破。
2、em是根据基准来缩放字体的大小。em是相对单位，一般都是以<body>的字体大小作基准的。em是相对于父元素的属性来计算的，这样就会存在一个问题，就是每一层父元素都必须有它的数值。
3、而rem不同，rem是相对于根元素html,而此时我们只需要以rem为基准就可以了。
rem页面与px页面如何衔接
对于 rem 页面与 px 页面的衔接，我们可以通过设置 html 元素的 font-size 值来实现。在 rem 页面中，我们可以将 html 元素的 font-size 设置为相应的 px 页面的根元素 font-size 值的 1/16，这样 rem 页面中的字体、边框等元素的大小就可以根据根元素的 font-size 值进行自适应了。这样就可以保证在不同大小的设备上页面的显示效果一致，达到良好的响应式布局效果。
为什么很多web项目还是使用px，而不是rem
早些年移动端刚开始盛行的时候，为了移动端网页能够适配不同尺寸的手机屏幕，淘宝某前端大佬写了一段适配的js，叫做flexible，可在github搜索到。原理很简单，好像就是根据手机分辨率和dpi(具体不记得了)，动态设置根源素html的fontsize，然后页面元素大小都以rem来做单位。因为1rem=html的fontsize。
后来有了vw和vh，慢慢的很多项目都用vw来做适配了，100vw=100%的宽度。因为兼容性不是很好，所以一直没有就行起来。
nodejs出现以后，前端工程化开始了。出现了pxtorem，pxtoviewport等插件，我们可以在开发的时候按照ui标注的px大小直接写，在打包的时候，插件会帮助我们把px计算转化为rem或者vw。
我现在都用vw。不考虑兼容性。有需要兼容ie的公司，我看都不看一眼。[捂脸]
rem是相对根元素html标签的字体大小，然而html标签字体也要用一个基准大小，而这个大小就是px像素。
有很多人误认为px像素是一个绝对尺寸单位，实际px是相对单位，与屏幕分辨率有关，会跟随放大缩小。
有几种主要布局方式，例如三列布局，左中右，左右都可以用像素，中间分配剩余宽度。
例如移动端框架framework7等一系列专用框架
另一种就是几列都用百分比，例如bootstrap。
使用rem作为宽度的很少。如果要做到根据视口大小放大，px更容易。
比如做一个750像素宽的页面，不同手机，根据视口放大缩小，rem计算量太大。px需要写适配的js，rem也要写适配js，反正都需要写辅助js，都是基于px，那还不如省事直接用px。
多数设定并不需要页面根据视口放大缩小。
CSS里面，rem是什么>单元/h2>
rem是一个相对单位，相对根元素字体大小的单位。我们只需要指定根元素为参考值，就可以了。主要用于屏幕适配布局，移动端使用比较广泛。使用这种方式，只要根据不同屏幕设置不同的根元素即可使系统适配不同的屏幕。希望可以帮到你
