如何实现部分div或者组件为移动端自适应效果？

Question

背景

• 页面中有一个组件是来展示移动端效果
• 这个组件可以切换不同机型(宽高像素比)来展示不同效果
• 这个组件里的元素单位都是rem

需求

• 如何实现组件的移动端自适应效果
• 同时不影响整个页面的布局
• 最好不要改变原组件

我的思考

第一种方案，就是这个组件都用新单位进行书写

缺点

• 需要改动原来的组件
• 同时还需要新增一个插件来实现转换

第二种方案，运行时动态修改组件大小

子方案一，获取所有组件元素的大小，然后重新设置值

缺点

• 复杂
• 很难完善所有效果

第三种方案，将rem动态修改为em

构建时将某个className的样式单位都改为em

缺点

• 理论上还是修改了原组件
• 我们用的是原子css的方案，所以实现起来非常的复杂

运行时

缺点

• 不能保证完全实现效果
• 有点麻烦

第四种方案 将组件用iframe包裹

就是用iframe来包裹组件，然后设置iframe里的html字体大小

优点

• 比较简单
• 也没有改动原组件

缺点

• 通信变得优点麻烦

Answer 1

一般来说现在的项目都会使用UI库作为基本样式和组件的使用，所以在你想要适配的部分使用UI库提供的栅格布局就好了，一般的UI库都会提供一下这几个断点：

尺寸	断点
xs	<576px
sm	≥576px
md	≥768px
lg	≥992px
xl	≥1200px
xxl	≥1600px
xxxl	≥2000px

看看你的UI库提供的断点是否合适，如果不合适的话只能自己使用 @media 去写媒体查询了。

---

本文参与了SegmentFault 思否面试闯关挑战赛，欢迎正在阅读的你也加入。