在 H5 开发中，适配不同设备和屏幕尺寸至关重要，它能确保页面在各种环境下都有良好的显示效果和用户体验。以下介绍几种常见的 H5 开发适配方案：
- 视口（Viewport）设置
视口单位是相对于浏览器视口的尺寸进行度量的单位，常用的视口单位有 vw（视口宽度的百分比）、vh（视口高度的百分比）、vmin（视口宽度和高度中较小值的百分比）和 vmax（视口宽度和高度中较大值的百分比）。使用视口单位可以实现元素大小随视口尺寸的变化而自适应调整。
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
width=device-width：将视口宽度设置为设备的宽度。
initial-scale=1.0：页面初始缩放比例为 1。
maximum-scale=1.0 和 minimum-scale=1.0：限制用户最大和最小缩放比例为 1。
user-scalable=no：禁止用户手动缩放页面。
- 媒体查询（Media Queries）
媒体查询是 CSS3 提供的一种技术，它可以根据不同的设备屏幕尺寸和特性，应用不同的 CSS 样式。
/* 当屏幕宽度小于 768px 时应用以下样式 */
@media screen and (max-width: 768px) {
body {
font-size: 14px;
}
.container {
width: 90%;
}
}
/* 当屏幕宽度在 768px 到 992px 之间时应用以下样式 */
@media screen and (min-width: 768px) and (max-width: 992px) {
body {
font-size: 16px;
}
.container {
width: 80%;
}
}
/* 当屏幕宽度大于 992px 时应用以下样式 */
@media screen and (min-width: 992px) {
body {
font-size: 18px;
}
.container {
width: 70%;
}
}
- 弹性布局（Flexbox）
Flexbox 是一种一维的布局模型，通过设置容器和子元素的属性，可以灵活地控制元素的排列方向、对齐方式和空间分配，从而实现自适应布局。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.flex-container {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
}
.flex-item {
width: 200px;
height: 200px;
background-color: lightblue;
margin: 10px;
}
</style>
</head>
<body>
<div class="flex-container">
<div class="flex-item"></div>
<div class="flex-item"></div>
<div class="flex-item"></div>
</div>
</body>
</html>
在上述代码中，.flex-container 设置为 display: flex 后，其子元素会按照弹性布局排列。flex-wrap: wrap 允许元素在空间不足时换行，justify-content: space-around 让元素在容器中均匀分布。
- 网格布局（Grid）
CSS Grid 是一种二维的布局模型，通过定义网格容器和网格项，可以精确地控制元素在二维空间中的位置和大小，实现复杂的布局适配。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.grid-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
grid-gap: 10px;
}
.grid-item {
background-color: lightgreen;
height: 200px;
}
</style>
</head>
<body>
<div class="grid-container">
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
</div>
</body>
</html>
.grid-container 设置为 display: grid 开启网格布局，grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) 表示列的宽度会根据容器宽度自动调整，最小为 200px，最大会平均分配剩余空间。
- 响应式图片
使用 < picture > 元素和 srcset 属性可以根据不同的屏幕尺寸和设备像素比加载合适的图片。
<picture>
<source media="(min-width: 1200px)" srcset="large-image.jpg">
<source media="(min-width: 768px)" srcset="medium-image.jpg">
<img src="small-image.jpg" alt="Responsive Image">
</picture>
上述代码中，当屏幕宽度大于 1200px 时，加载 large-image.jpg；宽度在 768px 到 1200px 之间时，加载 medium-image.jpg；宽度小于 768px 时，加载 small-image.jpg。
- REM 和 EM 单位
- REM（Root EM）：相对于根元素（< html >）的字体大小。通过设置根元素的字体大小，然后使用 rem 作为单位，可以实现整体的缩放。
html {
font-size: 16px;
}
p {
font-size: 1.2rem; /* 相当于 1.2 * 16px = 19.2px */
}
- EM：相对于父元素的字体大小。
.parent {
font-size: 14px;
}
.child {
font-size: 1.5em; /* 相当于 1.5 * 14px = 21px */
}
- VH 和 VW 单位
- vh（Viewport Height）：视口高度的百分比，1vh 等于视口高度的 1%。
- vw（Viewport Width）：视口宽度的百分比，1vw 等于视口宽度的 1%。
.box {
width: 50vw; /* 宽度为视口宽度的 50% */
height: 30vh; /* 高度为视口高度的 30% */
}
