【移动端】适配

秀秀_heo

于 2024-10-05 09:59:00 发布

阅读量382

点赞数 7

分类专栏：移动端开发文章标签：前端 html

本文链接：https://blog.csdn.net/XiugongHao/article/details/142711372

版权

移动端开发专栏收录该内容

5 篇文章 0 订阅

订阅专栏

移动端适配是指为了让网页或应用在各种不同尺寸的移动设备（如手机、平板电脑）上表现良好而进行的一系列技术手段。由于设备屏幕大小和分辨率差异较大，我们需要选择合适的适配方案，确保页面在不同设备上都能够正确显示、缩放和交互。

1. 百分比适配

基本原理：

百分比适配是指根据父元素的尺寸，以百分比来设置子元素的尺寸、宽度、高度等样式。相对单位让页面中的元素能够根据容器的尺寸进行缩放。

优点：
- 简单，且适用于一些较为简单的布局需求。
- 容器的大小随着父容器的变化而变化，适用于多种屏幕尺寸。
缺点：
- 不能适配所有的场景，尤其是在复杂的设计中。
- 对于字体、图片等元素，不容易精确控制。
示例：

.container {
  width: 100%;   /* 父元素的宽度 */
}

.box {
  width: 50%;    /* 50% 的父容器宽度 */
  height: 200px; /* 固定高度 */
}

在上述例子中，.box 的宽度会根据父容器的宽度变化。适用于简单的流式布局。

2. Viewport 缩放适配

基本原理：

Viewport 缩放适配是通过控制页面的视口（viewport）来适配不同的设备。原理是把所有机型的 CSS 像素（设备宽度）设置为一致的。

在 HTML 中通过 <meta> 标签控制缩放比例，常用设置包括禁止用户缩放、初始缩放比例、最小和最大缩放比例等。

<meta> 标签常见设置：

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

优点：
- 简单、直接，可以很快适配不同设备的宽度。
缺点：
- 仅调整了页面缩放比例，不能解决所有的适配问题（如字体大小、元素间距等）。
- 计算结果存在误差（小数），对设计稿测量存在问题。
使用场景：
- 用于确保页面内容根据设备宽度自动缩放，特别是避免页面放大或缩小到难以交互的状态。

实现：通过设备宽度与 375px （默认宽度）的缩放比对不同设备进行meta 缩放。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Viewport 缩放适配</title>
    <style>
        /* 页面基本样式 */
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            background-color: #f4f4f4;
        }

        .container {
            width: 100%;
            max-width: 375px; /* 模拟设计稿宽度 */
            margin: 0 auto;
            background-color: white;
            padding: 20px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        }

        h1 {
            font-size: 24px;
            color: #333;
        }

        p {
            font-size: 16px;
            line-height: 1.5;
            color: #666;
        }
    </style>
    <script>
        // 动态设置 viewport 缩放比例
        (function () {
            // 设计稿宽度：375px
            const designWidth = 375;

            // 获取当前设备宽度
            const deviceWidth = window.innerWidth || document.documentElement.clientWidth;

            // 计算缩放比例
            const scale = deviceWidth / designWidth;

            // 创建并设置 viewport meta 标签
            const metaViewport = document.createElement('meta');
            metaViewport.name = "viewport";
            metaViewport.content = `width=${designWidth}, initial-scale=${scale}, maximum-scale=${scale}, user-scalable=no`;

            // 将 meta 标签添加到 head 中
            document.head.appendChild(metaViewport);
        })();
    </script>
</head>
<body>
    <div class="container">
        <h1>Viewport 缩放适配</h1>
        <p>这个页面的宽度将根据不同设备的宽度进行缩放，确保设计稿（375px）能够正确适配不同的屏幕尺寸。</p>
    </div>
</body>
</html>

3. DPR（设备像素比）缩放适配

基本原理：

设备像素比（DPR, Device Pixel Ratio）是设备物理像素与 CSS 像素的比值。例如，iPhone 的 DPR 是 2，这意味着一个 CSS 像素实际上由 2×2 个物理像素构成。

使用场景：

主要用于处理高分辨率屏幕下的图片和图标显示，避免图片模糊。

获取设备像素比：

console.log(window.devicePixelRatio);

常用方案：
- 根据 DPR 加载不同尺寸的图片资源，例如 1x, 2x, 3x 图像。
- 使用 srcset 标签来根据设备像素比选择合适的图片。
示例：

<img src="image@1x.png" srcset="image@1x.png 1x, image@2x.png 2x, image@3x.png 3x" alt="image">

在高分辨率设备上，浏览器会自动加载对应 DPR 值的图片，从而保证图片在高清屏幕上的清晰度。

一般情况下，我们在设置值会按照物理像素去计算（比如 750px），保证高分辨率的屏幕下足够清楚，即使低分辨率下会有锐利度的问题；但也比高分辨率下反而变得更加模糊要好。

4. rem 适配

基本原理：

rem 是相对根元素（html 标签）字体大小的单位，可以根据根元素的字体大小来调整页面其他元素的大小。这种适配方式通过动态调整根元素的字体大小，间接地控制页面中所有元素的大小。

计算公式：
- 页面中的元素尺寸可以通过 rem 单位设置，1rem = html 的 font-size。
- 通过 JavaScript 设置 html 的 font-size，根据设备的宽度动态调整。
简单的 rem 适配方案：

<style>
  html {
    font-size: calc(100vw / 3.75);  /* 假设设计稿宽度为 375px */
  }
  body {
    font-size: 14px;  /* 基于 rem 的字体大小 */
  }
  .box {
    width: 5rem;      /* 宽度为 5rem，即相对 html 元素 font-size */
    height: 2rem;
  }
</style>

这里假设设计稿的宽度是 375px，通过 vw 动态调整 html 的字体大小。这样 rem 单位的元素会随着屏幕宽度的变化进行自适应缩放。

优点：
- 一次设置根元素的字体大小后，其他元素都能跟随变化。
- 适合响应式布局，能很好地适应不同屏幕尺寸。
缺点：
- 需要手动计算设计稿中的尺寸对应的 rem 值。
- 对于不同的屏幕密度，字体大小可能需要进一步调整。

5. vw 和 vh 适配

基本原理：

vw 和 vh 是相对视口宽度和高度的单位，1vw 等于视口宽度的 1%，1vh 等于视口高度的 1%。通过这些单位，可以基于屏幕的尺寸进行布局，而不依赖于固定的像素单位。

常用单位：
- vw：视口宽度的百分比。
- vh：视口高度的百分比。
示例：

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

优点：
- 自适应效果好，可以精确根据视口大小调整元素尺寸。
- 对于全屏设计或者需对屏幕尺寸进行高度自适应的页面非常有用。
缺点：
- 过于依赖屏幕的宽高，在某些情况下可能导致布局不准确，如横屏、竖屏切换时。

各种适配方式的总结与对比

适配方式	优点	缺点	使用场景
百分比适配	简单，适用于流式布局	控制精度不高，不能适用于所有布局	适用于简单的响应式布局
Viewport 缩放	快速实现基础的屏幕适配	仅调整缩放比例，无法精确控制字体和元素大小	用于确保页面内容在不同设备上缩放正常
DPR 缩放	保证高清屏幕下图片和图标清晰	不适用于布局，需要配合其他方式使用	针对高清屏设备的图片适配，如高分辨率图标
rem 适配	通过调整根元素字体大小实现整体自适应布局	需要计算和设置字体大小，需处理复杂布局的适配	适用于响应式页面，尤其是大范围布局的适配
vw/vh 适配	精确控制视口单位，适合全屏布局和响应式设计	横屏和竖屏切换时可能产生问题	适用于全屏应用、全屏背景、视频播放器等