06-响应式布局

image-20251125100829463

1. 常见布局方案

  • 固定布局：以像素作为页面基本单位，不管设备屏幕及浏览器宽度，只设计一套尺寸。
  • 可切换的固定布局：同样以像素作为页面单位，参考主流设备尺寸，设计几套不同宽度的布局。通过识别的屏幕尺寸或者浏览器宽度，选择最合适的那套宽度布局。
  • 弹性布局：以百分比作为页面基本单位，可以适应一定范围内的所有尺寸的设备屏幕及浏览器宽度，并能完美利用有效空间展现最佳效果。
  • 混合布局：同弹性布局类似，可以适应一定范围内的所有尺寸的设备屏幕及浏览器宽度，并能完美利用有效空间展现最佳效果；只是混合像素、百分比两种单位作为页面单位。
  • 布局响应：对页面进行响应式的设计实现，需要对相同内容进行不同宽度的布局设计，有两种方式（PC优先或移动优先）。无论基于哪种模式的设计，要兼容所有设备，布局响应时不可避免地需要对模块布局做一些变化（发声布局改变的临界点称之为断点）。
    • pc优先（从pc端开始向下设计）；
    • 移动优先（从移动端向上设计）。

2. 响应式布局原则

2.1 模块中内容：挤压 - 拉（布局不变）

image-20251202164658458

2.2 模块中内容：换行 - 平铺（布局不变）

image-20251202164741350

2.3 模块中内容：删减 - 增加（布局不变）

image-20251202164850994

2.4 模块位置变换（布局改变）

image-20251202164913267

2.5 模块展示方式改变：隐藏 - 展开（布局改变）

image-20251202165002926

3. @media 媒体查询

媒体查询可以让我们根据设备显示器的特性（如视口宽度、屏幕比例、设备方向：横向或纵向）为其设定CSS样式，媒体查询由媒体类型和一个或多个检测媒体特性的条件表达式组成。媒体查询中可用于检测的媒体特性有 width/height/color等。

使用媒体查询，可以在不改变页面内容的情况下，为特定的一些输出设备定制显示效果。

  1. 媒体查询操作方式

实际操作为：对设备提出询问（称作表达式）开始，如果表达式结果为真，媒体查询中的CSS被应用；反之，媒体查询中的CSS被忽略。

  1. 语法结构示例
1
2
3
4
5
6
/* and 与，后面跟小括号(条件) */
@media all and (min-width:320px) {
    body {
        background-color:blue;
    }
}
  1. 设备类型 media_type，常用是 screen 或者直接 all

image-20251202170137860

  • screen，是媒体类型里的一种，CSS2.1 定义了10种媒体类型
  • and 被成为关键字，其他关键字还包括 not（排除某种设别），only（限定某种设备）
  • （min-width: 400px），就是媒体特性，其被放置在一堆圆括号中，如最小宽度达到400px（> 400px）
1
2
3
4
/* PC客户端或大屏幕设备 1028px 至更大 */
@media only screen and (min-width: 1029px) {
    对应样式
}

如图参考常规响应式尺寸判断点：

image-20251202170802311

4. 响应式布局特点

设计特点：

  • 面对不同分辨率设备灵活性强
  • 能够快捷解决多设备显示适应问题

缺点：

  • 兼容各种设备工作量大，效率低下
  • 代码累赘，会除夕拿隐藏无用的元素，加载时间长
  • 这是一种折中的设计解决方案，多方面因素影响而达不到最佳效果
  • 一定程度上改变了网站原有的布局结构，会出现用户混淆的情况

示例：

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        html, body{
            height: 100%;
        }

        /* 大于1000px时，背景黄色 */
        @media screen and (min-width:1000px) {
            body{
                background: yellow;
            }
        }
        /* 大于500px 且 小于1000px时，背景红色 */
        @media screen and (max-width:1000px) and (min-width:500px) {
            body{
                background: red;
            }
        }
        /* 小于500px时，背景绿色 */
        @media screen and (max-width:500px) {
            body{
                background: green;
            }
        }
    </style>
</head>
<body>
</body>
</html>

5. 横竖屏检测

1
2
3
4
5
6
7
8
9
/* 竖屏 orientation:portrait */
@media screen and (orientation:portrait) and (max-width: 720px) {
    对应样式
}

/* 横屏 orientation:landscape */
@media screen and (orientation:landscape) {
    对应样式
}

示例：

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
41
42
43
44
45
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        body{
            display: flex;
            flex-wrap: wrap;
        }
        div{
            height: 100px;
            background: yellow;
            border: 2px solid red;
            box-sizing: border-box;
        }

        /* 竖屏 */
        @media screen and (orientation: portrait) {
            div{
                width: 33.333%;
            }
        }
        /* 横屏 */
        @media screen and (orientation:landscape) {
            div{
                width: 20%;
            }
        }
    </style>
</head>
<body>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</body>
</html>

效果：（F12 切换为移动端模拟器仿真，也可以验证）

横屏

image-20251202172526247

竖屏

image-20251202172537367

案例：响应式布局例子

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
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .top{
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
        }
        /* 默认 >768px，左右两侧大div各占 49% */
        .top>div{
            width: 49%;
        }
        .top img{
            width: 100%;
        }
        .top .right{
            display: flex;
            justify-content: space-between;
        }
        .top .right>div{
            width: 49%;
        }

        /* 媒体查询 <768px 时，左右两侧的大div各占100%，右侧就会因为 flex-wrap 折行到下一行 */
        @media screen and (max-width:768px) {
            .top>div{
                width: 100%;
            }
        }

        .bottom{
            display: flex;
            flex-wrap: wrap;
            justify-content: space-around;

            margin-top: 20px;
        }
        /* 默认 >1024px，图文的div各占23%，flex-wrap 折行排列，每行显示为4个 */
        .bottom>div{
            width: 23%;

            padding: 5px;
            box-sizing: border-box;
            border: 1px solid gray;

            margin-bottom: 10px;
            box-shadow: 0 0 5px black;
        }
        .bottom img{
            width: 100%;
        }

        /* <1024px and >768px，图文的div各占31%，每行显示为3个 */
        @media screen and (min-width:768px) and (max-width:1024px) {
            .bottom>div{
                width: 31%;
            }
        }
        /* <768px and >1024px，图文的div各占48%，每行显示为2个 */
        @media screen and (min-width:450px) and (max-width:768px) {
            .bottom>div{
                width: 48%;
            }
        }
        /* <450px，图文的div各占90%，每行显示为1个 */
        @media screen and (max-width:450px) {
            .bottom>div{
                width: 90%;
            }
        }
    </style>
</head>
<body>
    <!-- 
        top: flex, wrap
          >768px  左49%    右49%    （设置初始大小）
          <768px  上100%   下100%
    
        bottom: flex, wrap
          >1024px      23% * 4      （设置初始大小）
          768> <1024   31% * 3

          450> <768    48% * 2
          <450         90% * 1
    -->

    <div class="top">
        <div class="left">
            <img src="./img/1.png" alt="">
        </div>
        <div class="right">
            <div>
                <img src="./img/1.png" alt="">
            </div>
            <div>
                <img src="./img/1.png" alt="">
            </div>
        </div>
    </div>

    <div class="bottom">
        <div>
            <img src="./img/1.png" alt="">
            <p>迷你微型摄影展</p>
        </div>
        <div>
            <img src="./img/1.png" alt="">
            <p>迷你微型摄影展</p>
        </div>
        <div>
            <img src="./img/1.png" alt="">
            <p>迷你微型摄影展</p>
        </div>
        <div>
            <img src="./img/1.png" alt="">
            <p>迷你微型摄影展</p>
        </div>
        <div>
            <img src="./img/1.png" alt="">
            <p>迷你微型摄影展</p>
        </div>
        <div>
            <img src="./img/1.png" alt="">
            <p>迷你微型摄影展</p>
        </div>
        <div>
            <img src="./img/1.png" alt="">
            <p>迷你微型摄影展</p>
        </div>
        <div>
            <img src="./img/1.png" alt="">
            <p>迷你微型摄影展</p>
        </div>
    </div>
</body>
</html>

效果：（根据屏幕宽度响应样式）

1

image-20251202180559769

2

image-20251202180642699

3

image-20251202180744908

4

image-20251202180821162

04_大前端 > 02_CSS
#CSS #CSS3 #响应式布局
06-响应式布局
https://janycode.github.io/2017/04/28/04_大前端/02_CSS/06-响应式布局/
作者
Jerry(姜源)
发布于
2017年4月28日
许可协议