05-移动端&多列布局

image-20251125100829463

1. 分辨率

image-20251202120416912

浏览器中模拟器上显示的分辨率：CSS分辨率（设备的独立像素）。

物理分辨率：设备像素。

设备像素比(dpr) = 物理像素 / CSS像素。

设计稿：

  1. css 像素 375？物理像素?750 ，对，（为了更清晰的页面）
  2. 设计稿只提供一份

解决方案：

  • 百分比
  • 弹性盒布局
  • rem布局 - 移动端最常用

2. viewport

参考资料：https://juejin.cn/post/7218510156266586172

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

移动端设备分辨率兼容必备，默认创建时就会携带。

image-20251202122356732

案例：足球圈首页-H5

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
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!-- 以下px像素值，均为量取的物理分辨率都除以2后的结果 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../08-css3/font_5078037_fsrix9gsee/iconfont.css">
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        ul{
            list-style: none;
        }
        html,body{
            height: 100%;
        }

        body{
            display: flex;
            flex-direction: column;
        }

        header{
            height: 44px; 
            background: green;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        header div{
            width: 60px;
            height: 25px;
            line-height: 25px;
            text-align: center;
            color: white;
        }
        header div:nth-child(1){
            /* 绘制圆角 */
            border-radius: 12px 0 0 12px;
            background: lightgreen;
        }
        header div:nth-child(2){
            border-radius: 0 12px 12px 0;
            background: #a9e4b4;
        }
        
        section{
            flex: 1;
            overflow: auto;  /* 溢出滚动，会添加滚动条 */
        }

        section ul{
            display: flex;
            /* 粘性定位：滚动时固定顶部导航 */
            position: sticky;
            top: 0;
            background: white;
        }
        section ul li{
            flex: 1;
            text-align: center;
            height: 35px;
            line-height: 35px;
            border-bottom: 1px solid #d9d9d9;
            color: gray;
            font-size: 14px;
        }
        section ul li:hover{
            border-bottom: 2px solid #08c63e;
            color: #08c63e;
        }
        section .list{
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
        }
        section .list>div{
            width: 49%;
            margin-top: 4px;
            border: 1px solid gray;
        }

        section .list>div img{
            width: 100%;
        }

        section .list>div p{
            height: 30px;
            line-height: 30px;
            text-indent: 10px;
        }

        footer{
            height: 44px; 
            background: white;
        }

        footer ul{
            display: flex;
            height: 100%;
        }

        footer ul li{
            flex: 1;
            display: flex;
            flex-direction: column;
            justify-content: center;

            color: gray;
        }

        footer ul li i{
            height: 21px;
            line-height: 21px;
            text-align: center;
            font-size: 16px;
        }
        footer ul li span{
            height: 17px;
            line-height: 17px;
            text-align: center;
            font-size: 12px;
        }

        footer ul li:hover{
            color: #08c63e;
        }

        footer ul li:nth-child(3) {
            position: relative;       /* 使用定位脱离文档流，父相 */
        }

        footer ul li:nth-child(3) i{
            /* 绘制圆形 */
            width: 50px;
            height: 50px;
            border: 1px solid gray;
            border-radius: 50%;

            position: absolute;        /* 使用定位脱离文档流，子绝 */
            left: 50%;
            margin-left: -26px;
            top: -8px;

            font-size: 30px;
            text-align: center;
            line-height: 50px;
            background: white;
        }
    </style>
</head>
<body>
    <header>
        <div>热点</div>
        <div>关注</div>
    </header>
    <section>
        <ul>
            <li>足球现场</li>
            <li>足球生活</li>
            <li>足球美女</li>
        </ul>

        <div class="list">
            <div>
                <img src="../08-css3/img/2.png" alt="">
                <p>大家好</p>
            </div>
            <div><img src="../08-css3/img/2.png" alt="">
                <p>大家好</p></div>
            <div><img src="../08-css3/img/2.png" alt="">
                <p>大家好</p></div>
            <div><img src="../08-css3/img/2.png" alt="">
                <p>大家好</p></div>
            <div><img src="../08-css3/img/2.png" alt="">
                <p>大家好</p></div>
            <div><img src="../08-css3/img/2.png" alt="">
                <p>大家好</p></div>
            <div><img src="../08-css3/img/2.png" alt="">
                <p>大家好</p></div>
        </div>
    </section>
    <footer>
        <ul>
            <li>
                <i class="iconfont icon-anquan"></i>
                <span>首页</span>
            </li>
            <li><i class="iconfont icon-daka"></i>
                <span>发现</span></li>
            <li><i class="iconfont icon-fenxiang"></i></li>
            <li><i class="iconfont icon-fapiao"></i>
                <span>我的</span></li>
            <li><i class="iconfont icon-houtai"></i>
                <span>退出</span></li>
        </ul>
    </footer>
</body>
</html>

效果：

127.0.0.1_5500

3. 隐藏滚动条

1
2
3
4
/* 全局隐藏滚动条 */
::-webkit-scrollbar{
    display: none;
}

案例：京东分类-H5

1
2
3
overflow: auto; /* 父元素溢出auto时，配合 flex-shrink:0 可以让子元素在一行内横向滚动 */

flex-shrink: 0;    /* 子元素：不允许被挤压 */

代码：

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
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>京东分类手机端案例</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        html, body{
            height: 100%;
        }
        ul{
            list-style: none;
        }
        body{
            display: flex;
            flex-direction: column;
        }

        header{
            height: 45px;
            background: gray;
        }

        header ul{
            display: flex;
            overflow: auto; /* 配合 flex-shrink:0 可以在一行内横向滚动 */
        }

        header ul li{
            flex-shrink: 0;    /* 不允许被挤压 */
            line-height: 45px;
            padding: 0 10px;
        }

        header ul li:hover{
            background: white;
            color: red;
        }

        footer{
            height: 50px;
            background: gray;
        }

        /* 全局隐藏滚动条 */
        ::-webkit-scrollbar{
            display: none;
        }
        
        section{
            flex: 1;
            display: flex;
            overflow: auto;  /* 整体被内容撑开时，显示滚动条 */
        }

        section ul{
            width: 85px;
            overflow: auto;  /* 左侧分类被内容撑开时，显示滚动条（因此会显示为左侧滚动条） */
        }

        section ul li{
            height: 45px;
            line-height: 45px;
            text-align: center;
            font-size: 14px;
            background: #f8f8f8;
        }

        section ul li:hover{
            background: white;
            color: red;
        }

        section>div{
            flex: 1;

            display: flex;
            flex-wrap: wrap;
            align-content: flex-start;   /* 折行后内容朝起点对齐 */

            overflow: auto;   /* 右侧内容区域也溢出时添加滚动条 */
        }

        section .content>div{
            height: 101px;
            width: 33.33%;       /* 即每行显示3个 */
            text-align: center;
        }

        section .content>div img{
            width: 60px;
            height: 50px;
            margin-top: 11px;
        }
    </style>
</head>
<body>
    <header>
        <ul>
            <li>热门推荐</li>
            <li>热门推荐</li>
            <li>热门推荐</li>
            <li>热门推荐</li>
            <li>热门推荐</li>
            <li>热门推荐</li>
            <li>热门推荐</li>
            <li>热门推荐</li>
            <li>热门推荐</li>
            <li>热门推荐</li>
            <li>热门推荐</li>
            <li>热门推荐</li>
            <li>热门推荐</li>
            <li>热门推荐</li>
            <li>热门推荐</li>
            <li>热门推荐</li>
            <li>热门推荐</li>
            <li>热门推荐</li>
        </ul>
    </header>
    <section>
        <ul>
            <li>热门推荐</li>
            <li>热门推荐</li>
            <li>热门推荐</li>
            <li>热门推荐</li>
            <li>热门推荐</li>
            <li>热门推荐</li>
            <li>热门推荐</li>
            <li>热门推荐</li>
            <li>热门推荐</li>
            <li>热门推荐</li>
            <li>热门推荐</li>
            <li>热门推荐</li>
            <li>热门推荐</li>
            <li>热门推荐</li>
            <li>热门推荐</li>
            <li>热门推荐</li>
            <li>热门推荐</li>
            <li>热门推荐</li>
        </ul>

        <div class="content">
            <div>
                <img src="./img/images/jd-h5-1_03.jpg" alt="">
                <p>电脑</p>
            </div>
            <div>
                <img src="./img/images/jd-h5-1_03.jpg" alt="">
                <p>电脑</p>
            </div>
            <div>
                <img src="./img/images/jd-h5-1_03.jpg" alt="">
                <p>电脑</p>
            </div>
            <div>
                <img src="./img/images/jd-h5-1_03.jpg" alt="">
                <p>电脑</p>
            </div>
            <div>
                <img src="./img/images/jd-h5-1_03.jpg" alt="">
                <p>电脑</p>
            </div>
            <div>
                <img src="./img/images/jd-h5-1_03.jpg" alt="">
                <p>电脑</p>
            </div>
            <div>
                <img src="./img/images/jd-h5-1_03.jpg" alt="">
                <p>电脑</p>
            </div>
            <div>
                <img src="./img/images/jd-h5-1_03.jpg" alt="">
                <p>电脑</p>
            </div>
            <div>
                <img src="./img/images/jd-h5-1_03.jpg" alt="">
                <p>电脑</p>
            </div>
            <div>
                <img src="./img/images/jd-h5-1_03.jpg" alt="">
                <p>电脑</p>
            </div>
            <div>
                <img src="./img/images/jd-h5-1_03.jpg" alt="">
                <p>电脑</p>
            </div>
            <div>
                <img src="./img/images/jd-h5-1_03.jpg" alt="">
                <p>电脑</p>
            </div>
            <div>
                <img src="./img/images/jd-h5-1_03.jpg" alt="">
                <p>电脑</p>
            </div>
            <div>
                <img src="./img/images/jd-h5-1_03.jpg" alt="">
                <p>电脑</p>
            </div>
            <div>
                <img src="./img/images/jd-h5-1_03.jpg" alt="">
                <p>电脑</p>
            </div>
            <div>
                <img src="./img/images/jd-h5-1_03.jpg" alt="">
                <p>电脑</p>
            </div>
            <div>
                <img src="./img/images/jd-h5-1_03.jpg" alt="">
                <p>电脑</p>
            </div>
            <div>
                <img src="./img/images/jd-h5-1_03.jpg" alt="">
                <p>电脑</p>
            </div>
            <div>
                <img src="./img/images/jd-h5-1_03.jpg" alt="">
                <p>电脑</p>
            </div>
            <div>
                <img src="./img/images/jd-h5-1_03.jpg" alt="">
                <p>电脑</p>
            </div>
            <div>
                <img src="./img/images/jd-h5-1_03.jpg" alt="">
                <p>电脑</p>
            </div>
            <div>
                <img src="./img/images/jd-h5-1_03.jpg" alt="">
                <p>电脑</p>
            </div>
            <div>
                <img src="./img/images/jd-h5-1_03.jpg" alt="">
                <p>电脑</p>
            </div>
            <div>
                <img src="./img/images/jd-h5-1_03.jpg" alt="">
                <p>电脑</p>
            </div>
        </div>
    </section>
    <footer>footer</footer>
</body>
</html>

效果：

image-20251202160720811

4. 多列布局

参考案例：https://m.mogu.com

image-20251202160955884

瀑布流布局方式。

4.1 column-xxx 属性

  • column-count，规定元素应该被分隔的列数。适用于除table外的非替换块级元素，table cells，inline-block元素
  • column-gap，规定列之间的间隔大小
  • column-rule，设置或检索对象的列与列之间的边框。复合属性。
    • column-rule-color，规定列之间规则的颜色
    • column-rule-style，规定列之间规则的样式
    • column-rule-width，规定列之间规则的宽度
  • column-span，横跨列，none-不横跨（默认），all-横跨所有列

示例：

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
<!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>
        div{
            height: 300px;
            background: yellow;

            /* 控制显示的列数量 */
            column-count: 5;
            /* 调整列之间的间距 */
            column-gap: 100px;
            /* 设置每个列的边框 */
            column-rule: 2px solid red;
            /* 列高度统一，auto 即把父盒子占满 */
            /* column-fill: auto; */
            /* 调整列宽，与 column-count 会有冲突 */
            /* column-width: 500px; */
        }
        div>h1{
            /* 横跨所有列 */
            column-span: all;
            text-align: center;
        }
    </style>
</head>
<body>
    <div>
        <h1>赵钱孙李</h1>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Laboriosam ullam corporis accusamus! Consequuntur, labore. Tempora ratione neque perferendis, doloremque atque sint obcaecati rem laborum dolor! Deserunt expedita ab quidem voluptate.
        Lorem ipsum dolor sit amet consectetur, adipisicing elit. Error id odio molestias nisi repellendus. Ipsum vitae libero molestiae dolorum, reiciendis fuga optio facere est placeat iure animi explicabo architecto inventore.
        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Repudiandae qui quibusdam nesciunt veritatis corporis repellat dolore provident consequatur iusto, amet velit officiis neque eaque enim quos ipsum, sit nobis iste.
        Lorem, ipsum dolor sit amet consectetur adipisicing elit. Velit saepe deserunt nam qui odio modi doloribus rerum cupiditate ducimus quibusdam! Velit ipsum excepturi dolores non nisi. Voluptate quos architecto modi?Lorem ipsum dolor sit amet consectetur adipisicing elit. Quidem a quaerat accusantium repudiandae eligendi ea distinctio enim, fuga nobis quam esse, saepe perspiciatis architecto odit pariatur? Nemo quia laudantium architecto?
    </div>
</body>
</html>

效果：

image-20251202162014704

案例：多列布局-图片瀑布显示

1
2
/* 禁止盒子内部折行 */
break-inside: avoid;

代码：

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
<!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>
        .box{
            column-count: 5;
        }
        .box img{
            width: 100%;
        }
        .box div{
            border: 3px solid green;
            padding: 5px;
            margin-bottom: 10px;

            /* 禁止盒子内部折行 */
            break-inside: avoid;
        }
        .box div p{
            font-size: 30px;
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="box">
        <div>
            <img src="./img/mx1.jpg" alt="">
            <p>明星大腕</p>
        </div>
        <div>
            <img src="./img/mx2.jpg" alt="">
            <p>明星大腕</p>
        </div>
        <div>
            <img src="./img/mx3.jpg" alt="">
            <p>明星大腕</p>
        </div>
        <div>
            <img src="./img/mx4.jpg" alt="">
            <p>明星大腕</p>
        </div>
        <div>
            <img src="./img/mx5.jpg" alt="">
            <p>明星大腕</p>
        </div>
        <div>
            <img src="./img/mx1.jpg" alt="">
            <p>明星大腕</p>
        </div>
        <div>
            <img src="./img/mx2.jpg" alt="">
            <p>明星大腕</p>
        </div>
        <div>
            <img src="./img/mx3.jpg" alt="">
            <p>明星大腕</p>
        </div>
        <div>
            <img src="./img/mx4.jpg" alt="">
            <p>明星大腕</p>
        </div>
        <div>
            <img src="./img/mx5.jpg" alt="">
            <p>明星大腕</p>
        </div>
        <div>
            <img src="./img/mx1.jpg" alt="">
            <p>明星大腕</p>
        </div>
        <div>
            <img src="./img/mx2.jpg" alt="">
            <p>明星大腕</p>
        </div>
        <div>
            <img src="./img/mx3.jpg" alt="">
            <p>明星大腕</p>
        </div>
    </div>
</body>
</html>

效果：

image-20251202163606552

04_大前端 > 02_CSS
#CSS #CSS3 #怪异盒模型 #弹性盒布局
05-移动端&多列布局
https://janycode.github.io/2017/04/28/04_大前端/02_CSS/05-移动端&多列布局/
作者
Jerry(姜源)
发布于
2017年4月28日
许可协议