css实现响应式布局的方法：1、使用flex布局，优点是代码简单、布局方便；2、使用绝对布局，结合使用media可以实现响应式布局；3、使用grid布局，优点是写法简便；4、使用float布局，优点是兼容性比较好。
本教程操作环境：windows7系统、CSS3&&HTML5版、Dell G3电脑。
简单介绍四种响应式布局的四种方式
总的html代码
flex布局
优点
使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
下载
代码简单，布局方便
缺点
如果中间有内容，缩到最小就不会在小了
且左右侧的宽度变小了
立即学习
“
前端免费学习笔记（深入）
”；
绝对布局
优点
结合使用media可以实现响应式布局
缺点
代码写法复杂，布局较繁琐
如果不使用media平分屏幕，宽度小于600的情况下，右侧会覆盖左侧
grid布局
优点
写法简便
缺点
中间有内容时，无法继续缩
宽度会被定死，网页宽度小于定的宽度时，下面可滑动
float布局
浮动流需要将right和center位置换一下
优点
比较简单，兼容性比较好
缺点
同行浮动的两块需要按顺序写在一起（即left和right的p按顺序写
压缩变小之后，产生换行
中间内容不会消失
解决方式
第三个问题
flex布局可以根据内部的任何一个高度来撑开父元素高度
grid布局也可以根据内部的任何一个高度来撑开父元素高度
学习视频分享：
css视频教程
left
中间
right
.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%;
}
}.box{
display: grid;
grid-template-columns: 300px 1fr 300px;
grid-template-rows: 100px;
}
.left,.right{
background-color: pink;
}
.center{
background-color: burlywood;
}
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;
}
}