大橙子网站建设,新征程启航

为企业提供网站建设、域名注册、服务器等服务

怎么在css中实现响应式布局

今天就跟大家聊聊有关怎么在css中实现响应式布局,可能很多人都不太了解,为了让大家更加了解,小编给大家总结了以下内容,希望大家根据这篇文章可以有所收获。

成都创新互联-专业网站定制、快速模板网站建设、高性价比孝义网站开发、企业建站全套包干低至880元,成熟完善的模板库,直接使用。一站式孝义网站制作公司更省心,省钱,快速模板网站建设找我们,业务覆盖孝义地区。费用合理售后完善,10多年实体公司更值得信赖。

响应式布局的四种方式

总的html代码

    
        left
        中间
        right
    
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;
}

优点

缺点

怎么在css中实现响应式布局

绝对布局
.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%;
    }
}

优点

缺点

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位置换一下


    left
    right
    center
.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;
}

优点

缺点

解决方式

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

什么是css

css是一种用来表现HTML或XML等文件样式的计算机语言,主要是用来设计网页的样式,使网页更加美化。它也是一种定义样式结构如字体、颜色、位置等的语言,并且css样式可以直接存储于HTML网页或者单独的样式单文件中,而样式规则的优先级由css根据这个层次结构决定,从而实现级联效果,发展至今,css不仅能装饰网页,也可以配合各种脚本对于网页进行格式化。

看完上述内容,你们对怎么在css中实现响应式布局有进一步的了解吗?如果还想了解更多知识或者相关内容,请关注创新互联行业资讯频道,感谢大家的支持。


当前名称:怎么在css中实现响应式布局
链接地址:http://dzwzjz.com/article/gpocco.html

其他资讯

在线咨询
服务热线
服务热线:028-86922220
TOP