Rumah > Artikel > hujung hadapan web > css怎么实现响应式布局

css怎么实现响应式布局

青灯夜游asal: 2021-05-13 13:56:0813419semak imbas

css实现响应式布局的方法：1、使用flex布局，优点是代码简单、布局方便；2、使用绝对布局，结合使用media可以实现响应式布局；3、使用grid布局，优点是写法简便；4、使用float布局，优点是兼容性比较好。

css怎么实现响应式布局

本教程操作环境：windows7系统、CSS3&&HTML5版、Dell G3电脑。

简单介绍四种响应式布局的四种方式

总的html代码

<body>
    <div class="box">
        <div class="left">left</div>
        <div class="center">中间</div>
        <div class="right">right</div>
    </div>
</body>

flex布局

.box{
    width: 100%
    height: 100px;
    display: flex;
}
.left{
    width: 300px;
    background-color: purple;
}
.center{
    flex: 1;
    background-color: pink;
}
.right{
    width: 300px;
    background-color: burlywood;
}

优点

代码简单，布局方便

缺点

如果中间有内容，缩到最小就不会在小了
且左右侧的宽度变小了

绝对布局

.box{
    position: relative;
    width: 100%;
    height: 100px;
}
.left{
    position: absolute;
    left: 0px;
    width: 300px;
    background-color: pink;
}
.right{
    position: absolute;
    right: 0px;
    width: 300px;
    background-color: pink;
}
.center{
    position: absolute;
    left: 300px;
    right: 300px;
    background-color: burlywood;
}
@media (max-width: 600px){
    .left,.right{
       /* 平分屏幕 */
        width: 50%;
    }
}

优点

结合使用media可以实现响应式布局

缺点

代码写法复杂，布局较繁琐
如果不使用media平分屏幕，宽度小于600的情况下，右侧会覆盖左侧

grid布局

.box{
    display: grid;
    grid-template-columns: 300px 1fr 300px;
    grid-template-rows: 100px;
}
.left,.right{
    background-color: pink;
}
.center{
    background-color: burlywood;
}

优点

写法简便

缺点

中间有内容时，无法继续缩
宽度会被定死，网页宽度小于定的宽度时，下面可滑动

float布局

浮动流需要将right和center位置换一下

<div class="box">
    <div class="left">left</div>
    <div class="right">right</div>
    <div class="center">center</div>
</div>

.box{
    height: 200px;
}
.left{
    float: left;
    width: 300px;
    background-color: pink;
}
.right{
    float: right;
    width: 300px;
    background-color: pink;
}
.center{
    margin:0 300px;
    background-color: burlywood;
}

优点

比较简单，兼容性比较好

缺点

同行浮动的两块需要按顺序写在一起（即left和right的p按顺序写
压缩变小之后，产生换行
中间内容不会消失

解决方式

@media (max-width: 600px){
      .left,.right{
        width: 50%;
    }
    .center{
        opacity: 0;
    }
}

第三个问题

flex布局可以根据内部的任何一个高度来撑开父元素高度
grid布局也可以根据内部的任何一个高度来撑开父元素高度

学习视频分享：css视频教程

Atas ialah kandungan terperinci css怎么实现响应式布局. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

html5 css css3 html Float flex

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：css怎么设置字体颜色渐变Artikel seterusnya：css怎么设置字母大写

Artikel berkaitan

Lihat lagi