媒体查询

body,

h1,

p,

ul{

margin: 0;

padding: 0;

}

li{

list-style: none;

}

img{

vertical-align: top;

}

@media (device-height:568px) and (-webkit-min-device-pixel-ratio:2){/* 兼容iphone5 */}

@media only screen and (max-device-width :480px){ }

@media only screen and (min-device-width :481px){ }

/*6*/

@media (min-device-width : 375px) and (max-device-width : 667px) and (-webkit-min-device-pixel-ratio : 2){ }

/*6+*/

@media (min-device-width : 414px) and (max-device-width : 736px) and (-webkit-min-device-pixel-ratio : 3){ }

/*魅族*/

@media only screen and (min-device-width :1080px) and (-webkit-min-device-pixel-ratio : 2.5){ }

/*mate7*/

@media only screen and (min-device-width :1080px) and (-webkit-min-device-pixel-ratio : 3){ }

/*4 4s*/

@media only screen and (device-height :480px) and (-webkit-device-pixel-ratio:2){ }

@media screen and (min-width: 320px) and (max-width: 480px) {  }

/* 平板之类的宽度 1024 以下设备 */

@media only screen and (min-width: 321px) and (max-width: 1024px) {

body {

background: blue;

}

}

/* PC客户端或大屏幕设备: 1028px 至更大 */

@media only screen and (min-width: 1029px) {

body {

background: green;

}

}

/* 竖屏 */

@media screen and (orientation:portrait) and (max-width: 720px) {对应样式}

/* 横屏 */

@media screen and (orientation:landscape){对应样式}