css移动端适配

CSS 移动端适配

进阶：移动端布局

  • 移动端布局属于 CSS 的进阶内容。
  • 常见目标是在不同设备宽度下，让页面仍然保持合适的显示效果。

响应式布局实现方法

主流实现方案常见有两种：

  1. 通过 rem、vw/vh 等单位实现等比适配
  2. 通过媒体查询 @media，实现一套 HTML 配合多套 CSS

Viewport

基本概念

  • viewport 可以理解为视口或视窗。
  • 它表示浏览器用来显示网页内容的区域。
  • viewport 会直接影响网页在移动设备上的显示效果。

常见写法

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

常见属性说明

  • width=device-width：让视口宽度等于设备宽度
  • initial-scale=1.0：初始缩放比例为 1
  • minimum-scale=1.0：最小缩放比例为 1
  • maximum-scale=1.0：最大缩放比例为 1
  • user-scalable=no：不允许用户缩放

rem

基本概念

  • rem 是一个倍数单位。
  • 它是基于 html 标签中 font-size 属性值的倍数。
  • 在响应式网页和移动端布局中，经常使用 rem 而不是 px。

理解方式

  • 如果 html 的 font-size 是 20px
  • 那么 1rem = 20px
  • 5rem = 100px

rem 适配原理

  • 只要根据不同设备宽度动态设置 html 的 font-size
  • 页面中使用 rem 的元素就会跟着等比缩放
  • 这样就能在不同设备上尽量保持统一比例

课堂完整示例代码

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
33
34
35
36
37
38
39
40
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>移动端rem适配原理</title>
    <style>
        /* html{
            font-size: 20px;
        } */
        .box-px{
            width: 300px;
            height: 100px;
            background-color: blueviolet;
            margin-bottom: 50px;
        }
        .box-rem{
            width: 5rem;
            height: 3rem;
            background-color: aqua;
        }
    </style>
</head>
<body>
    <div class="box-px"></div>
    <div class="box-rem"></div>

    <script>
        // 根据设备宽度计算 HTML 标签的 font-size，设备宽度的 1/10
        function resethtmlFontSize(){
            document.documentElement.style.fontSize = screen.width / 10 + 'px';
        }

        resethtmlFontSize();

        // 绑定事件
        window.onresize = resethtmlFontSize;
    </script>
</body>
</html>

知识点总结

  • 移动端适配常见方案有 rem 方案和媒体查询方案。
  • viewport 是移动端页面显示的基础配置。
  • rem 的核心是跟随根元素 html 的 font-size 变化。
  • 通过动态修改根字体大小，可以实现页面按比例缩放。

复习表达

移动端适配常见实现方式包括 rem 适配、vw/vh 适配以及媒体查询。rem 本质上是相对于根元素 html 的 font-size 来计算尺寸，因此可以通过 JavaScript 根据设备宽度动态设置根字体大小，让页面中的元素按比例缩放。与此同时，移动端开发通常还需要正确设置 viewport，保证页面按照设备宽度进行布局和显示。