【第三部分 | 移动端开发】2：流式布局

news2024/12/24 2:09:40

| 移动端布局

| 流式布局（百分比布局）

| 案例：京东搜索页相关知识点

| 移动端布局

| 流式布局（百分比布局）

介绍

核心思想：不使用固定布局，而是使用百分比
为了保护盒子的内容不因拉伸得过小而挤掉内容，我们需要设置最大 / 最小长度限制
从某种意义上来说，流式布局比web端的简单得多。因为无需精确测量width了，且可以使用CSS3的盒子无需考虑border和padding

图片

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, user-scalable=0, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            /* 流式布局的特点：宽度使用百分比，而不是使用固定像素 */
            width: 100%;
        }

        .box1 {
            width: 80%;
            height: 400px;
            margin: 20px auto;
            /* 设置最大宽度 / 最小宽度 放置用户随意拉伸而导致内容挤掉 */
            max-width: 1200px;
            min-width: 600px;

            background-color: pink;
        }

        .box2 {
            width: 50%;
            height: 300px;
            margin: 20px auto;
            max-width: 800px;
            min-width: 300px;

            background-color: greenyellow;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="box1"></div>
        <div class="box2"></div>
    </div>
</body>
</html>

应用案例

如京东页面：一行放5个盒子。每个盒子的width为20%