H5--开发适配 - 技术栈

在 H5 开发中，适配不同设备和屏幕尺寸至关重要，它能确保页面在各种环境下都有良好的显示效果和用户体验。以下介绍几种常见的 H5 开发适配方案：

视口（Viewport）设置
视口单位是相对于浏览器视口的尺寸进行度量的单位，常用的视口单位有 vw（视口宽度的百分比）、vh（视口高度的百分比）、vmin（视口宽度和高度中较小值的百分比）和 vmax（视口宽度和高度中较大值的百分比）。使用视口单位可以实现元素大小随视口尺寸的变化而自适应调整。

javascript 复制代码

<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 样式。

javascript 复制代码

/* 当屏幕宽度小于 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 是一种一维的布局模型，通过设置容器和子元素的属性，可以灵活地控制元素的排列方向、对齐方式和空间分配，从而实现自适应布局。

javascript 复制代码

<!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 是一种二维的布局模型，通过定义网格容器和网格项，可以精确地控制元素在二维空间中的位置和大小，实现复杂的布局适配。

javascript 复制代码

<!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 属性可以根据不同的屏幕尺寸和设备像素比加载合适的图片。

javascript 复制代码

<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 作为单位，可以实现整体的缩放。

javascript 复制代码

html {
    font-size: 16px;
}

p {
    font-size: 1.2rem; /* 相当于 1.2 * 16px = 19.2px */
}

javascript 复制代码

.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%。

javascript 复制代码

.box {
    width: 50vw; /* 宽度为视口宽度的 50% */
    height: 30vh; /* 高度为视口高度的 30% */
}