移动端常见的 css 适配方案

,

1. 媒体查询（Media Queries）

媒体查询是最常见的适配方案，通过CSS中的@media规则来针对不同的屏幕尺寸和分辨率应用不同的样式。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
/* 默认样式 */
body {
  font-size: 16px;
}

/* 屏幕宽度小于600px时 */
@media (max-width: 600px) {
  body {
    font-size: 14px;
  }
}

/* 屏幕宽度在600px到1200px之间时 */
@media (min-width: 600px) and (max-width: 1200px) {
  body {
    font-size: 15px;
  }
}

2. 弹性盒模型（Flexbox）和网格布局（Grid Layout）

使用Flexbox和Grid Layout可以更容易地创建自适应布局，尤其适合移动端开发。

1
2
3
4
5
6
7
8
9
.container {
  display: flex;
  flex-wrap: wrap;
}

.item {
  flex: 1 1 auto;
  margin: 10px;
}

Grid Layout示例：

1
2
3
4
5
6
7
8
9
10
.container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  gap: 10px;
}

.item {
  background-color: lightblue;
  padding: 20px;
}

3. 视口（Viewport）设置

通过设置 标签来控制视口，可以确保页面在不同设备上有正确的缩放和布局。

1
<meta name="viewport" content="width=device-width, initial-scale=1.0">

4. 百分比和视口单位（Percentage and Viewport Units）

使用百分比和视口单位（如vw, vh）可以创建响应式设计，使元素的尺寸随屏幕尺寸变化。

1
2
3
4
5
6
7
8
9
.container {
  width: 100vw;
  height: 100vh;
}

.item {
  width: 50%;
  height: 50%;
}

5. REM和EM单位

使用REM和EM单位可以实现相对尺寸的调整，方便响应式设计中的字体和间距控制。

1
2
3
4
5
6
7
8
9
10
11
html {
  font-size: 16px;
}

body {
  font-size: 1rem; /* 16px */
}

.container {
  padding: 1.5rem; /* 24px */
}

6. 响应式图片

通过元素和srcset属性加载不同分辨率的图片，以适应不同设备。

1
2
3
4
5
<picture>
  <source srcset="image-320w.jpg" media="(max-width: 320px)">
  <source srcset="image-768w.jpg" media="(max-width: 768px)">
  <img src="image-1024w.jpg" alt="Example Image">
</picture>

以 iphone8、iphone8 plus 为例

为了在 iPhone 8 和 iPhone 8 Plus 上实现一致的字体比例大小，可以使用基于视口单位（viewport units）和媒体查询的组合方法。这种方法通过使用相对单位（如 vw 或 vh）来确保字体在不同屏幕尺寸上的比例保持一致。
iPhone 8 和 iPhone 8 Plus 的屏幕尺寸和分辨率分别为：

  • iPhone 8：4.7英寸，750x1334 像素
  • iPhone 8 Plus：5.5英寸，1080x1920 像素

步骤

  1. 使用视口单位（Viewport Units）：使用 vw（视口宽度单位）来设置字体大小。这些单位相对于视口尺寸，使字体大小随屏幕尺寸变化。

  2. 使用媒体查询：如果需要，可以结合媒体查询来微调不同设备的字体大小。
    以下示例演示了如何使用 vw 单位设置字体大小，以便在不同屏幕尺寸上保持一致的比例。也可以使用媒体查询来针对特定设备进行微调。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Font Size Adaptation</title>
    <style>
      /* 默认字体大小 */
      body {
        font-size: 4vw; /* 4% of the viewport width */
      }

      /* 针对iPhone 8 Plus的微调 */
      @media (min-device-width: 414px) and (max-device-width: 736px) and (orientation: portrait),
             (min-device-width: 736px) and (max-device-width: 414px) and (orientation: landscape) {
        body {
          font-size: 3.6vw; /* Adjusted slightly smaller for larger screen */
        }
      }

      /* 针对其他较大屏幕设备的微调（可选） */
      @media (min-width: 1024px) {
        body {
          font-size: 1.8vw; /* Adjusted smaller for very large screens */
        }
      }
    </style>
    </head>
    <body>
      <p>这是一个示例文本，用于展示在不同屏幕尺寸上的一致字体比例。</p>
    </body>
    </html>