css实现响应式布局的方法：1、使用flex布局，优点是代码 简单 、布局方便；2、使用绝对布局，结合使 用M edia可以实现响应式布局；3、使用grid布局，优点是写法简便；4、使用float布局，优点是兼容性比较好。
本教程操作环境：windows7系统、CSS3 && HT ML 5版、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%
h ei ght: 100px;
dis play : flex;
}
.left{
width: 300px;
background-color: purple;
}
.center{
flex: 1;
background-color: pink;
}
.right{
width: 300px;
background-color: burlywood;
}优点
代码简单，布局方便缺点
如果中间有内容，缩到最小就不会在小了 且左右侧的 宽 度变小了绝对布局
.box{
pos IT ion: 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 -t emplate-columns: 300px 1fr 300px;
grid-template-rows: 100px;
}
.left,.right{
background-color: pink;
}
.center{
background-color: burlywood;
}优点
写法简便缺点
中间有内容时，无法继续缩 宽度会被定死，网页宽度小于定的宽度时，下面可滑动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{
m arg in:0 300px;
background-color: burlywood;
}优点
比较简单，兼容性比较好缺点
同行浮动的两块需要按顺序写在一起（即left和right的p按顺序写 压缩变小之后，产生换行 中间内容不会 消失
解决方式
@media (max-width: 600px){
.left,.right{
width: 50%;
}
.center{
opacity: 0;
}
} 第三个问题 flex布局可以根据内部的任何一个高度来撑开父元素高度 grid布局也可以根据内部的任何一个高度来撑开父元素高度 学习视频分享：css视频教程
以上就是css怎么实现响应式布局的详细内容，更多请关注其它相关 文章 ！
总结
以上是 为你收集整理的 css怎么实现响应式布局 全部内容，希望文章能够帮你解决 css怎么实现响应式布局 所遇到的问题。
如果觉得 网站内容还不错， 推荐好友。
声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://haodehen.cn/did199822