css实现响应式布局的方法：1、使用flex布局，优点是代码简单、布局方便；2、使用绝对布局，结合使用media可以实现响应式布局；3、使用grid布局，优点是写法简便；4、使用float布局，优点是兼容性比较好。
本教程操作环境：windows7系统、CSS3&&HTML5版、Dell G3电脑。
简单介绍四种响应式布局的四种方式
总的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;}
登录后复制
优点
代码简单，布局方便
缺点
如果中间有内容，缩到最小就不会在小了且左右侧的宽度变小了
立即学习“前端免费学习笔记（深入）”；
绝对布局
.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位置换一下
leftrightcenter
登录后复制
.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视频教程
以上就是css怎么实现响应式布局的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2874933.html
