实现网页布局的自适应 利用@media screen

Posted 2020-06-30

利用@media screen实现网页布局的自适应，IE9一下不支持 @media screen

/*1280分辨率以上（大于1200px）*/
@media screen and (min-width:1200px){
    .p1{color: #f00};
}
/*1100分辨率（大于960px，小于1199px）*/
@media screen and (min-width: 960px) and (max-width: 1199px) {
    .p2{color: #f00};
}
/*880分辨率（大于768px，小于959px）*/
@media screen and (min-width: 768px) and (max-width: 959px) {
    .p3{color: #f00};
}
/*720分辨率（大于480px，小于767px）*/
@media only screen and (min-width: 480px) and (max-width: 767px){
    .p4{color: #f00};
}
/*440分辨率以下（小于479px）*/
@media only screen and (max-width: 479px) {
    .p5{color: #f00};
}