头部设置meta也可以做到自适应为啥还要用rem？

你问的是一个很好的问题！虽然<meta name="viewport" content="width=device-width, initial-scale=1.0"> 可以使网页在不同设备上自适应，但这与使用 rem 单位是解决不同问题的两种不同技术，它们通常结合使用以获得最佳效果。

meta viewport 的作用：

控制视口宽度: 它主要控制视口的宽度，使其与设备宽度匹配。这解决了页面在不同宽度屏幕上显示过小或过大的问题。 initial-scale=1.0 则设置初始缩放比例为 1，避免页面默认被缩放。
不控制字体大小: meta viewport 标签本身并不直接控制字体大小。它只是设置了视口的宽度，页面上的元素仍然会根据它们设置的字体大小 (例如 px、em、rem) 进行渲染。

rem 的作用：

相对根元素字体大小: rem 是一个相对单位，它基于根元素 (通常是 <html>) 的字体大小。这意味着，如果改变了根元素的字体大小，所有使用 rem 单位的元素的大小都会相应地改变。
实现字体大小的自适应: 通过 JavaScript 动态调整根元素的字体大小，可以实现页面字体大小的自适应。例如，可以根据屏幕宽度或视口宽度来调整根元素的字体大小，从而使字体在不同设备上保持合适的比例。
维护层级关系: 使用 rem 可以更容易地维护元素之间的层级关系。因为所有大小都是相对于根元素的，所以改变根元素字体大小会等比例地影响所有使用 rem 的元素，保持它们之间的比例关系。

为什么结合使用？

全面自适应: meta viewport 解决了视口宽度的问题，而 rem 解决了字体大小的自适应问题。结合使用才能实现更全面的自适应，使页面在不同设备上都具有良好的显示效果。
易于维护: 使用 rem 可以简化样式的维护，更容易实现响应式设计。只需要改变根元素的字体大小，就可以调整整个页面的字体大小，而不需要修改每个元素的样式。
提升用户体验: 通过自适应的字体大小，可以确保页面在不同设备上都具有良好的可读性，提升用户体验。

总结:

meta viewport 和 rem 是两种不同的技术，它们分别解决不同的问题。meta viewport 控制视口宽度，rem 控制字体大小。为了实现最佳的自适应效果，通常需要将它们结合使用。通过结合 meta viewport 和 JavaScript 动态调整 rem，可以创建真正响应式和用户友好的网页。