这篇文章分享给大家的内容是关于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;}
效果图：
窗口大于1024px时显示的样子
当大于640小于980时，右侧栏在底部
当小于480时，导航栏折叠，body三部分竖直排列显示，若窗口持续缩小，不在发生变化，区域被压缩
相关推荐：
CSS实现响应式布局的方法
css实现响应下拉式菜单的代码
以上就是关于css响应式的实现代码及效果的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1610871.html
微信扫一扫 
支付宝扫一扫 
