响应式常用尺寸
/*大型屏幕pc 超大屏*/
@media screen and (min-width:1200px) {
.test {
color: #f00;
background: #000;
}
}
/*1200>=pc>=992 大屏,字体红色,背景黑色 ipadpro*/
@media screen and (min-width:992px) and (max-width: 1199px) {
.test {
color: #f00;
background: #000;
}
}
/*768<=pad<992 中屏,字体黄色,背景红色 平板ipad*/
@media screen and (min-width: 768px) and (max-width: 991px) {
.test {
color: #ff0;
background: #f00;
}
}
/*phone<768 小屏,字体黑色,背景蓝色 手机平板之间*/
@media screen and (max-width: 767px) and (min-width: 480px) {
.test {
color: #000;
background: #0ff;
}
}
/* 超小屏,字体黑色,背景粉色 大多数手机*/
@media screen and (max-width: 480px) {
.test {
color: #000;
background: pink;
}
}