优点:
- 整体缩放与统一:通过将rem与屏幕分辨率关联起来,可以实现页面的整体缩放,使得在不同设备上的展现都统一起来。这有助于解决多屏适配问题,确保页面在不同设备上都能以合适的比例显示。
- 浏览器支持:现在大多数浏览器都支持rem单位,兼容性相对较好。这使得rem在前端开发中得到了广泛应用。
- 便于整体控制:由于rem是相对于根元素的font-size,因此可以通过调整根元素的font-size来整体控制页面元素的大小。这使得在全局范围内调整样式变得更加方便。
缺点:
- 奇葩设备表现不佳:在一些特殊的设备或浏览器上,如某些华为的高端机型,使用rem布局可能会出现错乱。这可能是由于这些设备的dpr(设备像素比)或浏览器解析方式导致的。
- iframe引用问题:在使用iframe引用其他页面时,rem可能会出现问题。这是因为iframe中的页面可能具有不同的根元素font-size,导致rem的计算结果不一致。
- 与大屏设计哲学不一致:rem在多屏幕尺寸适配上与当前两大平台(如PC和移动设备)的设计哲学可能不一致。大屏设备的设计初衷可能是为了提供更大、更清晰的展示效果,而rem的缩放方式可能无法完全满足这一需求。
- 兼容性问题:在PC端,由于浏览器对字体大小的限制(如谷歌浏览器最小字体为12px)以及老旧浏览器(如IE678)的不支持,rem的使用可能会受到限制。此外,一些史前项目可能使用了固定的px等布局方案,并且需要兼容ie9以下版本,这使得改用rem的成本较高。