响应式开发设备屏幕尺寸划分
1、设备划分
设备划分尺寸区间宽度设置
超小屏幕（手机）< 768px100%小屏设备（平板）>= 768px ~ 992px750px中等屏幕（桌面显示器）>= 992px ~ < 1200px970px宽屏设备（大桌面显示器）>=1200px1170px
2、应用
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.container{
height: 150px;
background-color: pink;
margin: 0 auto;
}
/* 超小屏幕 */
@media screen and (max-width: 767px){
.container{
width: 100%;
}
}
/* 小屏幕 */
@media screen and (min-width: 768px){
.container{
width: 750px;
}
}
/* 中等屏幕 */
@media screen and (min-width: 992px){
.container{
width: 970px;
}
}
/* 大屏幕 */
@media screen and (min-width: 1200px){
.container{
width: 1170px;
}
}
</style>
</head>
<body>
<!-- 响应式开发里面，首先需要一个布局容器 -->
<div class="container"></div>
</body>
</html>
3、实例效果
