说好的响应式呢？移动端适配方案探究：Rem vs Em vs vw/vh

说好的响应式呢？移动端适配方案探究：Rem vs Em vs vw/vh

在移动互联网迅猛发展的今天，各种大小、分辨率的设备层出不穷，如何让你的网页或应用在各种设备上都能保持良好的视觉体验和用户交互，成为了每个前端开发者不得不思考的问题。今天，我们就来聊聊在移动端适配这块，常见的几种单位：Rem、Em、vw/vh的使用和它们之间的较量。

1. 各路选手简介

Em：老派风格的代表

Em单位是相对于其父元素的字体大小来定义的。如果没有设置父元素的字体大小，默认是16px。1em等于父元素的字体大小，2em就是父元素字体大小的两倍。听起来似乎很简单，但嵌套使用时会使事情变得复杂，因为em是相对于当前元素的父元素来计算的，层层嵌套下去，计算起来就像是在玩俄罗斯套娃。

Rem：相对单位的革新者

Rem（Root em）单位则是相对于根元素（html）的字体大小来定义的，这就避免了em单位层层嵌套计算的复杂性。在响应式设计中，通过改变根元素的字体大小，我们可以很方便地对整个页面的布局进行缩放。

vw/vh：视窗大小的亲儿子

vw（视窗宽度的1%）和vh（视窗高度的1%）则完全是根据视窗的大小来决定元素的大小，100vw等于视窗的宽度，100vh等于视窗的高度。这使得根据不同设备的屏幕大小动态调整元素大小变得十分简单。

2. 战场实测

来到真实的战场，我们分别以Rem、Em、vw/vh这三种单位来实现一个简单的响应式布局，看看谁能更好地适应不同的屏幕尺寸。

实验一：字体适配

假设我们需要一个标题在手机屏幕上显示为24px，在桌面屏幕上显示为36px。

• 使用em或rem实现时，我们需要在CSS中预设不同设备的根字体大小，然后计算相应的em或rem值。
• 使用vw实现时，我们可以简单地设置字体大小为3.2vw（假设设计稿宽度为750px），这样字体大小就会随着视窗宽度的变化而自动调整。

显然，在这个场景下，vw的方案更具有灵活性和简便性。

实验二：布局适配

假设我们有一个两列布局，希望在手机上以单列显示，在桌面上以两列并排显示。

• 使用em或rem，我们需要通过媒体查询来为不同的设备设置不同的样式规则。
• 使用vw/vh，我们依然可以利用视窗单位直接定义元素宽度，通过媒体查询配合使用能更加精准地控制布局切换的临界点。

在布局适配方面，vw/vh与em/rem各有千秋，vw/vh提供了一种更为直观和灵活的方式来适配不同的屏幕尺寸，而em/rem则在多个场景下表现稳定。

3. 选手综合评价

• Em：适合于组件内部尺寸的相对调整，但在嵌套使用时需谨慎，以免造成计算上的困扰。
• Rem：在响应式设计中表现出色，特别是在需要全局缩放元素大小时。
• vw/vh：在进行视窗宽度或高度的直接适配方面无人能敌，特别适合于灵活的布局设计。

4. 终极适配方案

那么，如何选择这三种单位进行移动端适配呢？答案是：结合使用。是的，没有最好的单位，只有最合适的解决方案。例如，可以使用rem进行大部分布局的设置，利用vw/vh来处理全屏背景图或是某些需要视窗宽度来决定大小的布局，同时不忘记em在组件内部的相对尺寸调整上的便利。

通过灵活运用这三种单位，加上媒体查询的辅助，我们可以实现一个在大多数设备上都表现出色的响应式设计。记住，适应性和灵活性是响应式设计的灵魂，勿忘初心方得始终。

最后，别忘了测试。每一次的尝试和改动，都需要在不同的设备和浏览器上进行测试，确保我们的设计真正达到了预期的效果。只有这样，我们才能真正地说，我们做到了响应式。

算法面试宝典小程序

算法面试宝典小程序提供了字节等大厂面试题库，涵盖7种编程语言的Top5答案，配有详细题解报告和视频讲解。无论您是准备面试还是想提升编程能力，都能轻松掌握各种算法题型，从容面对挑战！

欢迎加入wx前端技术交流群,二维码长期有效

在这里，我们分享技术经验、职位机会、面试总结，甚至人生感悟。无论您是前端开发新手还是资深工程师，这里都有丰富的资源和热情的交流氛围等待着您。加入我们，与同行们一起探讨前端技术发展趋势，共同成长，共享精彩！

探讨前端技术发展趋势，共同成长，共享精彩！

[外链图片转存中…(img-TLd44w2u-1712327420807)]