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

素颜马尾好姑娘i 2023-09-23 15:47 110阅读 0赞

**目录**

| 移动端布局

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

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

--------------------

### | 移动端布局 ###

![11d41260715f44d985fdbe93b8ad802a.png][]

--------------------

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

介绍

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

图片

![31913fb027ee4b4c86ffee0d90c1e2a0.png][]

示例代码

<!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%

![68841f71ee674047a26203d6b34b2698.png][]

--------------------

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

*  移动端常用的 max-width 为320px

*  两边的按钮固定像素。中间的搜索栏用 calc( 100% - 两边按钮的像素大小 ) 即可完成“按钮固定、搜索栏随页面大小而变化” 的效果

![d568c4fcb7154dd8a3f02e3c084dec31.png][]

有时候精灵图需要缩放（因为1px在手机端实际为2px。因此需要考虑到缩放问题）。下面给出 物理像素比==2 的手机中的精灵图的处理方法

![7b654c5360164f48b787bc50970fc5c1.png][]

[11d41260715f44d985fdbe93b8ad802a.png]: https://img-blog.csdnimg.cn/11d41260715f44d985fdbe93b8ad802a.png
[31913fb027ee4b4c86ffee0d90c1e2a0.png]: https://img-blog.csdnimg.cn/31913fb027ee4b4c86ffee0d90c1e2a0.png
[68841f71ee674047a26203d6b34b2698.png]: https://img-blog.csdnimg.cn/68841f71ee674047a26203d6b34b2698.png
[d568c4fcb7154dd8a3f02e3c084dec31.png]: https://img-blog.csdnimg.cn/d568c4fcb7154dd8a3f02e3c084dec31.png
[7b654c5360164f48b787bc50970fc5c1.png]: https://img-blog.csdnimg.cn/7b654c5360164f48b787bc50970fc5c1.png