针对不同设备的适配问题,用了两种常见的解决方案:
- 有pc端UI,但无移动端,移动端适配自己排版,这种情况下我采用的是媒体查询,通过
@media
实现一套html配合多套css实现适配 - 有完整的移动端UI,我通过rem实现的不同设备相同比例的适配
首先是媒体查询(更多用法可见MDN):
无学习成本,不过要写两套css,我先写的pc端,后要求的移动端适配,所以在pc端的基础上,加入@media
,另写的一套移动端css,简而言之,你只需要根据自己的需求,对不同的屏幕适配进行处理,但这仅限于网页内容较少,如果网页内容较多,维护成本挺高,对于网页内容比较多的,我是另外开的一套,做了路由跳转。
然后是rem,这个我只做了移动端的适配,对于rem的用法@media
更简单,但是理解更难一点,在前端开发中,rem(root em)是相对单位,它是相对于根元素(html元素)的字体大小来计算的,使用rem作为单位可以实现相对于根元素的自适应布局。
说到了rem,那么不得不提到vw,vh,他们也是响应式设计中的相对单位,两者的区别在于:
- vw,vh是相对于视口宽度和高度的百分比单位。1vw等于视口宽度的1%。
- 适合用于根据视口宽度或高度调整元素大小,使得元素能够随着视口宽度或高度的变化而自动调整大小,适合根据视口大小调整元素大小的响应式设计。
- rem是相对于根元素字体大小的单位,适合整体布局的相对尺寸设计。
- rem通常用于控制整体布局比例,而vw和vh更适合用于根据视口大小调整具体元素的宽度和高度。
结合使用 rem、vw 和 vh 可以更好地控制页面的响应式布局,适应不同设备和屏幕尺寸的需求,对于简单的页面选取一种即可。
总结:
媒体查询的优缺点:
优点:
- 灵活性: 媒体查询允许根据设备的特征(如屏幕宽度、高度、方向等)来调整样式表,实现针对不同设备的定制化布局。
- 精细控制: 可以针对不同设备尺寸、分辨率等特征编写具体的样式规则,实现精细的布局调整。
缺点:
- 繁琐: 需要编写多个媒体查询规则来覆盖不同的设备特征,可能会增加样式表的复杂性。
- 维护成本高: 随着设备类型和尺寸的增多,需要维护的媒体查询规则也会增加,可能导致代码维护成本上升。
使用场景:
适用于根据设备特征动态调整页面布局和样式,实现响应式设计。
rem的优缺点:
优点:
- 相对单位: rem单位是相对于根元素字体大小的单位,可以方便地实现相对长度的计算,适合用于响应式设计。
- 易于扩展: 可以利用rem单位快速实现页面元素的缩放和响应式布局,不需要为每个媒体查询编写单独的样式规则。
缺点:
- 兼容性: 在一些旧版本的浏览器或设备上,对rem单位的支持可能不完善,需要考虑兼容性问题。
- 计算复杂: 使用rem单位时,需要计算相对于根元素字体大小的具体数值,有时可能会增加开发难度。
使用场景:
适用于整体布局的相对尺寸设计,可用于控制整体布局的比例和大小。