首页 > 分享 > 移动端的几种适配方案

移动端的几种适配方案

花匠小妙招
2024-12-07 18:32

前言

说到适配，我们经常会提到两个词：自适应、响应式。

响应式

定义：它使用CSS媒体查询和灵活的单位（如百分比、em、rem等）来创建可以适应不同屏幕尺寸的布局。这意味着同一个网页可以在不同的设备上（比如 pc、平板、手机）显示不同的布局，但内容和结构保持一致。特点：一对多关系：一个设计适应多个设备灵活性：可以适应不同屏幕尺寸和分辨率维护简单：只需要维护一个代码库

自适应

定义：自适应是为特定设备或屏幕尺寸创建优化的布局。它通常涉及为不同的设备或屏幕尺寸创建多个版本，每个版本都有特定的布局和设计特点：一对一关系：每个设备都有单独的布局视觉保真度：针对特定设备优化，提供更高的视觉保真度灵活性：可能无法很好地适应未预见的屏幕尺寸

为什么要做移动端适配？

视觉一致性、提升用户体验

一般我们会根据UI提供的设计稿使用绝对长度单位px进行前端页面开发，像素px是相对于显示器屏幕分辨率而言的，它不依赖于环境（显示器、分辨率、操作系统等），因此当我们使用不同大小的设备预览时表现效果是不同的；

如果不做适配，那么在过大或过小的尺寸设备展示效果可能就会出现内容显示不全、重叠错乱、空白区域过大等问题。我们期望在一定的范围内，页面样式在设备上展示的比例一致。

有哪些适配方案，它们分别有什么优缺点？

媒体查询 @media

根据不同的设备特性（如屏幕尺寸、分辨率、方向等）来应用不同的样式

@media screen and (min-width: 360px) {

box {

width: 200px;

}

@media screen and (min-width: 400px) {

box {

width: 220px;

}

@media screen and (min-width: 480px) {

box {

width: 240px;

}

优点：提升用户体验、较灵活（可以根据设备特性进行调整）

缺点：代码冗余、可维护性低、体积较大、可能会对性能造成影响

viewport（视口单位vw/vh）

视口单位 vw 和 vh 是CSS中用于实现响应式布局的重要单位。它们分别表示视口宽度的百分比（vw）和视口高度的百分比（vh）。

.box {

width: 33.33vw;

height: 100vh;

}

优点：简洁易读、基于视口大小不受父元素影响

缺点：兼容问题

滚动条问题：在 Windows 系统的某些浏览器中，100vw可能会包含垂直滚动条的宽度，导致出现横向滚动条。兼容性问题：现代浏览器普遍支持vw单位，但老旧浏览器中可能存在兼容性问题。视口单位在移动设备上（安卓、ios）、桌面浏览器的表现行为可能都不一致，尤其是在地址栏或工具栏出现和消失时。 flex

Flex布局（弹性盒子布局）是一种强大的CSS布局模型，它提供了一种灵活的方式来排列和分配容器中的项目。

Flex布局特别适用于需要响应式设计和动态内容的项目。如：

.container {

display: flex;

justify-content: space-between;

align-items: center;

}

优点：代码简洁、灵活，特别适合动态内容展示

缺点：浏览器兼容性、某些情况下可能会导致性能问题

gird

CSS Grid布局是一种二维布局系统，它允许开发者在一个网格中精确地定位和排列元素。

Grid布局非常适合创建复杂的布局，如网站的主导航、侧边栏、页眉和页脚等。如：

.container {

display: grid;

grid-template-columns: 33.33% 33.33% 33.33%;

grid-template-rows: 33.33% 33.33% 33.33%;

}

优点：代码简洁、灵活、精确控制

缺点：浏览器兼容性、学习曲线相对较陡

百分比%

通过百分比单位"%"来实现响应式的效果，比如当浏览器的宽度或者高度发生变化时，通过百分比单位，可以使得浏览器中的组件的宽和高随着浏览器的变化而变化，从而实现响应式的效果。

但是某些属性相对的参照物不同：比如 height、width 属性的百分比依赖于父标签的宽高，但是其他盒子属性则不完全依赖父元素：

子元素的 top / left / bottom / right 如果设置百分比，则相对于直接非 static 定位的父元素的高度/宽度子元素的 padding 如果设置百分比，不论是垂直方向或是水平方向，都相对于直接父亲元素的width，而与父元素的 height 无关。子元素的 margin 如果设置成百分比，不论是垂直方向还是水平方向，都相对于直接父元素的 width。如果设置 border-radius 为百分比，则是相对于自身的宽度

可见，每个属性都使用百分比，会造成布局的复杂度，所以不建议使用百分比来实现。

rem

rem 是相对于 html 元素的 font-size 设置的，通过监听屏幕宽度的变化，在不同屏幕尺寸下，动态修改 html 元素的 font-size 值来达到适配效果，是常见的应用方案。