响应式开发设备屏幕尺寸划分
响应式开发设备屏幕尺寸划分
1、设备划分
设备划分尺寸区间宽度设置超小屏幕(手机)< 768px100%小屏设备(平板)>= 768px ~ 992px750px中等屏幕(桌面显示器)>= 992px ~ < 1200px970px宽屏设备(大桌面显示器)>=1200px1170px2、应用
.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;
}
}
3、实例效果