移动端组件自适应方案探讨：如何在不修改原组件的情况下兼容不同机型？
本文探讨如何在保持页面整体布局不变的情况下，实现特定div或组件在移动端的自适应效果，尤其针对使用rem单位且需模拟不同机型（屏幕尺寸及像素比）的组件。 目标是不修改原组件代码。
我们面临一个挑战：一个组件用于展示移动端效果，支持切换不同机型，组件内元素使用rem单位。我们需要实现该组件的自适应，且不影响页面整体布局。
文章分析了几种方案及其优劣：
-
单位转换： 将组件内所有rem单位改为vw或vh。此方法需要修改原组件，工作量大，且可能需要额外的转换工具。
-
运行时动态修改大小： 尝试获取所有组件元素大小并重新设置。此方法过于复杂，难以保证所有效果的完整性。
-
rem转em： 构建时或运行时将特定className的样式单位从rem转换为em。这同样修改了原组件，在原子化CSS方案下实现难度较大，效果难以保证。
-
iframe包裹： 使用iframe包裹组件，通过调整iframe内html的字体大小实现自适应。此方法简单，不修改原组件，但组件间的通信会变得复杂。
推荐方案：利用UI库的响应式布局
最有效的方法是利用现有的UI库（如Ant Design、Element UI等）提供的响应式栅格布局。这些UI库通常提供预设断点（例如xs、sm、md、lg等），对应不同的屏幕尺寸。如果预设断点不足以满足需求，可以使用媒体查询（@media）自定义断点。 此方法高效便捷，无需修改原组件。