关于前端开发中的布局单位rem，本篇文章提供了一个利用JavaScript实现自动匹配屏幕宽度并动态计算根元素font-size的示例。通过动态调整font-size的值，可以实现页面的自适应布局，适应不同屏幕尺寸的设备。以下是文章所涉及到的关键知识点：
1. **rem布局单位**：
rem（root em）是CSS3中新增的一个相对长度单位，它的基准是HTML根元素（即`<html>`）的字体大小。与em单位不同的是，em单位是相对于其父元素的字体大小计算的，而rem始终是相对于根元素的字体大小计算的。
2. **自适应布局**：
自适应布局是网页设计中的一种布局方式，它能够使页面元素自动调整大小，以适应不同分辨率和屏幕尺寸的显示设备。使用rem单位配合JavaScript脚本动态计算font-size，是实现自适应布局的一种有效手段。
3. **JavaScript实现**：
文章中提供了一段JavaScript代码，用于监听屏幕尺寸的变化，并根据屏幕宽度调整根元素的font-size。当屏幕宽度变化时，通过计算公式动态设置font-size，以便达到自适应效果。
4. **屏幕宽度的基准值选择**：
代码中的基准宽度值选择为640px，意味着当屏幕宽度大于或等于640px时，根元素的font-size会被设置为100px。如果屏幕宽度小于640px，则按照比例减少font-size的大小。这个基准值的选取是基于移动端屏幕适配的考虑，保证在大多数移动端设备上，页面布局不会出现横向滚动条。
5. **CSS逻辑像素与物理像素的区别**：
在不同的设备上，CSS中的1px可能代表不同的物理像素点。例如，Retina屏幕具有较高的像素密度，因此，在物理上可能需要2个或更多的像素点来表示1个CSS像素。本文指出iPhone5的物理像素数为640x1136px，但CSS逻辑像素数为320x568px，这说明实际显示效果为2个物理像素点表示一个逻辑像素点。
6. **rem与px的混用**：
为了兼容不支持rem的旧版浏览器（如IE6-8），可以将px和rem结合使用。在REM单位广泛支持的浏览器中使用rem，而在IE6-8中使用px。这样可以保证在现代浏览器上利用rem带来的灵活性和可维护性，同时在旧版浏览器上保证基本的布局显示。
7. **浏览器兼容性**：
文章还提到，目前支持rem单位的浏览器已经较多，包括Firefox、Safari、Chrome、IE9+以及Opera11+。然而对于IE6-8这样的老旧浏览器，由于不支持rem单位，需要采用其他方法进行兼容。
8. **响应式布局**：
响应式布局的实现通常需要依赖于视口（viewport）的设置。文章中提到的viewport meta标签，可以控制页面的布局在不同设备上如何响应。比如设置`initial-scale=1.0`可以让页面按实际尺寸加载，并通过`maximum-scale`和`user-scalable`控制用户的缩放权限。
9. **px与rem的转换关系**：
在实际开发中，当需要将设计图转换为代码时，开发者常常需要计算出rem与px之间的转换关系。例如，假设设计图宽度为640px，那么1rem就可以等同于64px（因为640px是参考基准值）。如果某个元素在设计图中宽为60px，那么在代码中就可以设置为`width: 0.6rem;`。
通过上述的要点分析，可以看出，使用rem作为布局单位，结合JavaScript进行动态字体大小调整，能够为网页设计和开发带来更高的灵活性和更好的用户体验。这种方法尤其适用于响应式网页设计，在当前各种尺寸的设备层出不穷的环境下，具有重要的实践价值。同时，了解CSS逻辑像素与物理像素的区别以及浏览器对rem单位的兼容性，对于前端开发者来说也是必不可少的知识。
