Web自适应布局那些事儿

星野丶
841 阅读2分钟

前言

最近做了一个项目需要自适应布局，对于萌新的我，就百度，视频，书等学习下，归纳了实现自适应布局各种方式，有什么不足，希望多提意见

自适应布局

  • 浮动布局
  • 定位布局
  • flex布局
  • table-cell布局
  • grid布局

题目：假设高度已知，请写出二栏布局，其中左栏、宽度为160px，中间自适应

image.png

flex布局

html结构，大盒子设置flex，里面设置左右两个小盒子

<body>
    <section class="box">
        <article class="box-left">
        </article>
        <article class="box-right">
            <h1>hello</h1> 
        </article>
    </section>
</body>

CSS部分

        html * {        //去除浏览器默认边距
            margin: 0;
            padding: 0;
        }

        .box {
            display: flex;
            width: 100%;
            // height:100vh;    //高度无法自适应，遇到内容过多，会溢出盒子，用下面方法替代
            min-height: 100vh;
            
        }

        .box-left {
            width: 160px;
            min-height: 100vh;
            
            background: greenyellow;
        }

        .box-right {
            // 方法一：
            flex: 1;
            // 方法二：
            width: calc(100% -160px);   // 剩余宽度等于总宽度减去左盒子宽度
            min-height: 100vh;
            background: darkcyan;
        }

float 布局，基本就css有些地方改动而已

CSS

.box {
            width: 100%;
            min-height: 100vh;
            max-height: 100%;
        }

        .box-left {
            float: left;            //修改地方 
            width: 160px;
            min-height: 100vh;
            max-height: 100%;
            background: greenyellow;
        }

        .box-right {
            min-height: 100vh;
            max-height: 100%;
            background: darkcyan;
        }

定位布局

CSS

        .box {
            width: 100%;
            min-height: 100vh;
            max-height: 100%;
            position: relative;  //修改地方
        }

        .box-left {
            position: absolute;  //修改地方
            left: 0;   //修改地方
            width: 160px;
            min-height: 100vh;
            max-height: 100%;
            background: greenyellow;
        }

        .box-right {
            position: absolute;    //修改地方
            left: 160px;  //修改地方
            right: 0;   //修改地方
            min-height: 100vh;
            max-height: 100%;
            background: darkcyan;
        }

table-cell 布局

CSS

.box {
            width: 100%;
            min-height: 100vh;
            display: table;  //修改地方
        }

        .box>article {
            display: table-cell;  //修改地方
        }

        .box-left {
            width: 160px;
            min-height: 100vh;
            background: greenyellow;
        }

        .box-right {
            min-height: 100vh;
            background: darkcyan;
        }

grid 布局

CSS

.box {
            width: 100%;
            min-height: 100vh;
            display: grid;  //修改地方
            grid-template-columns: 160px auto;   //修改地方
        }
        .box-left {
            background: greenyellow;
        }

        .box-right {
            background: darkcyan;
        }

后续：

最近完成 项目

如果有兴趣想看下这项目话，账号为12345678911，密码123或者自己注册下账号

顺便开源下这项目源代码

avatar
文章
阅读
粉丝