关于css响应式的实现代码及效果

这篇文章分享给大家的内容是关于css响应式的实现代码及效果，内容很有参考价值，希望可以帮到有需要的小伙伴。

1.CSS 来实现响应式

CSS实现响应式网站的布局要用到的就是CSS中的媒体查询接下来来简单介绍一下：

• @media 类型 and (条件1) and (条件二){css样式}

我们只需用到width衍生出的max-width这个属性，定义输出设备中的页面可见区域宽度来控制该改变的样式即可。
html代码如下：

立即学习“前端免费学习笔记（深入）”；

    
    

    
    
    


    

        头部
    
    

        
左部
        
中部
        
右部
    

    
底部

demo01.css样式如下：

body{
    margin:0;
    text-align:center;
}

.header{
    height:100px;
    background-color:red;
}
.container{
    height:400px;
    background-color:pink;
}
.clearfix:after{
    display:block;
    content:"";
    visibility:hidden;
    height:0;
    clear:both;
}
.footer{
    height:100px;
    background-color:blue;
}
.left{
    width:20%;
    background-color:orange;
    float:left;
    height:300px;
}
.center{
    width:55%;
    background-color:gray;
    float:left;
    height:300px;
    margin:0 2.5%;
}
.right{
    width:20%;
    background-color:yellow;
    float:left;
    height:300px;
}

demo02的样式如下：

body{
    margin:0;
    text-align:center;
}

.header{
    height:100px;
    background-color:red;
}
.container{
    height:400px;
    background-color:pink;
}
.clearfix:after{
    display:block;
    content:"";
    visibility:hidden;
    height:0;
    clear:both;
}
.footer{
    height:100px;
    background-color:blue;
}
.left{
    width:30%;
    background-color:orange;
    float:left;
    height:300px;
}
.center{
    width:70%;
    background-color:gray;
    float:left;
    height:300px;
}
.right{
    width:100%;
    background-color:yellow;
    height:300px;
}

demo03的样式：

body{
    margin:0;
    text-align:center;
}

.header{
    height:100px;
    background-color:red;
}
.container{
    background-color:pink;
}
.clearfix:after{
    display:block;
    content:"";
    visibility:hidden;
    height:0;
    clear:both;
}
.footer{
    height:100px;
    background-color:blue;
}
.left{
    width:100%;
    background-color:orange;
    height:300px;
}
.center{
    width:100%;
    background-color:gray;
    height:300px;
}
.right{
    width:100%;
    background-color:yellow;
    height:300px;
}

效果图：

触网万能商城建站系统免费版

触网万能商城系统，3年专注打磨一款产品，专为网络服务公司、建站公司、威客、站长、设计师、网络运营及营销人员打造，是一款超级万能建站利器，彻底告别代码编程和找模板，改模板，改代码的低效高成本方式，仅需一个人可服务无数客户，系统集万能官网+万能商城+万能表单+博客+新闻+分销...于一体，通过海量模块拖拽布局、万能组合和超级自定义功能，可以构建各种类型的响应式网站。

下载

窗口大于1024px时显示的样子

当大于640小于980时，右侧栏在底部

当小于480时，导航栏折叠，body三部分竖直排列显示，若窗口持续缩小，不在发生变化，区域被压缩

相关推荐：

CSS实现响应式布局的方法

css实现响应下拉式菜单的代码