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

css怎么实现响应式布局

青灯夜游
青灯夜游asal
2021-05-13 13:56:0813444semak 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;
}

优点

  • 代码简单,布局方便

缺点

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

image

绝对布局

.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;
}

优点

  • 写法简便

缺点

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

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按顺序写
  • 压缩变小之后,产生换行
  • 中间内容不会消失
    image

解决方式

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

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怎么设置字母大写