1.什么是响应式开发
就是：一个网站就够兼容到多个终端
2.响应式开发的原理
2.1检测方法：
1.css3中的Media Query（媒介查询)
2.js检测
通过查询screen的宽度来指定某个宽度区间的网页布局
2.2屏幕分类
超小屏幕（移动设备） 768px以下
小屏设备（768px - 992px）
中等屏幕（992px-1200px）
宽度设备（1200px）
2.3Media Query（媒介查询)代码演示
@media screen and (max-width:768px){
/*定义我们这个区间内的样式*/
.container{
width: 100%;
background: green;
}
}
/*768-992 需要在小屏幕设备下 显示黄色并且宽度750px*/
@media screen and (min-width:768px) and (max-width: 992px){
/*定义我们这个区间内的样式*/
.container{
width: 750px;
background: yellow;
}
}
/*992-1200 需要在中等屏幕下 显示蓝色并且 宽度是 970px*/
@media screen and (min-width:992px) and (max-width: 1200px){
/*定义我们这个区间内的样式*/
.container{
width: 970px;
background: blue;
}
}
/*1200 需要在大屏幕下 显示粉红色 宽度1170px*/
@media screen and (min-width:1200px){
/*定义我们这个区间内的样式*/
.container{
width: 1170px;
background: pink;
}
}
2.4 响应式开发-移动web开发和响应式开发的对比
compare.png
2.5总结：
1.移动web开发和响应式开发都是现在主流的开发模式
2.使用的都是流式布局，来适配不同的设备
3.由于终端设备的多样化，新建站的站点会优先试用响应式来开发
