css3 媒体查询 and,css3 媒体查询常用适配

@media (max-1300px) {}

@media (max-1080px) {}

@media (max-799px) {}

@media (max-720px) {}

@media (max-460px) {}

@media (max-height:750px) {}

@media (max-height:310px) {}

@media (max-height:260px) {}

@media (min-1921px),(min-height:1201px) {}

@media (max-1280px) and (max-height:800px) {}

@media (max-960px) and (max-height:600px) {}

@media (max-800px),(max-height:480px) {}

/*orientation:landscape 宽度大于高度*/

@media

(orientation:landscape) and (max-height:480px),(orientation:portrait) and (max-699px) {}

@media (orientation:landscape) and (max-height:300px) {}

@media (orientation:landscape) and (max-height:650px) {}

@media (orientation:landscape) and (max-height:650px) and (max-660px) {}

@media (orientation:landscape) and (max-height:650px) and (max-540px) {}

@media

(orientation:landscape) and (max-height:650px) and (max-460px),(orientation:landscape) and (max-height:300px),(orientation:portrait) and (max-height:380px) {}

手机端

/* 小于400 */

@media screen and (max-300px) {

html,body {

font-size:0.58rem;

}

}/* 大于960 小于1200 */

@media screen and (min-301px) and (max-350px) {

html,body {

font-size:0.6rem;

}

}/* 大于960 小于1200 */

@media screen and (min-351px) and (max-420px) {

html,body {

font-size:0.7rem;

}

}/* 大于960 小于1200 */

@media screen and (min-421px) and (max-490px) {

html,body {

font-size:0.9rem;

}

}/* 大于960 小于1200 */

@media screen and (min-491px) and (max-620px) {

html,body {

font-size:1rem;

}

}/* 大于960 小于1200 */

@media screen and (min-621px) and (max-720px) {

html,body {

font-size:1.2rem;

}

}/* 大于960 小于1200 */

@media screen and (min-721px) and (max-820px) {

html,body {

font-size:1.4rem;

}

}/* 大于960 小于1200 */

@media screen and (min-821px) and (max-920px) {

html,body {

font-size:1.6rem;

}

}/* 大于960 小于1200 */

@media screen and (min-921px) and (max-1020px) {

html,body {

font-size:1.8rem;

}

}/* 大于960 小于1200 */

@media screen and (min-1021px) and (max-1120px) {

html,body {

font-size:2rem;

}

}/* 大于960 小于1200 */

@media screen and (min-1121px) and (max-1220px) {

html,body {

font-size:2.2rem;

}

}/* 大于960 小于1200 */

@media screen and (min-1221px) and (max-1320px) {

html,body {

font-size:2.4rem;

}

}/* 大于960 小于1200 */

@media screen and (min-1321px) and (max-1420px) {

html,body {

font-size:2.6rem;

}

}/* 大于960 小于1200 */

@media screen and (min-1421px) and (max-1520px) {

html,body {

font-size:2.8rem;

}

}/* 大于960 小于1200 */

@media screen and (min-1521px) and (max-1620px) {

html,body {

font-size:3rem;

}

}