201509280825_《css3——media query整理2》

@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
/* 你的样式写在这里 */
}

2、Smartphones (横板)

@media only screen and (min-width : 321px) {
/* 你的样式写在这里 */
}

3、Smartphones (竖板)

@media only screen and (max-width : 320px) {
/* 你的样式写在这里 */
}

4、iPad(竖板和横板)

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
/* 你的样式写在这里 */
}

5、iPad横板

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px)	and (orientation : landscape) {
/* 你的样式写在这里 */
}

6、iPad的竖板

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
/* 你的样式写在这里 */
}

7、Desktops and laptops

@media only screen and (min-width : 1224px) {
/* 你的样式写在这里 */
}

8、Large screens

@media only screen and (min-width : 1824px) {
/* 你的样式写在这里 */
}

9、iPone4

@media only screen and (-webkit-min-device-pixel-ratio : 1.5),only screen and (min-device-pixel-ratio : 1.5) {
/* 你的样式写在这里 */
}

10、iPhone4竖板

@media only screen and (-webkit-min-device-pixel-ratio : 1.5) and (orientation:portrait),	only screen and (min-device-pixel-ratio : 1.5)  and (orientation:portrait){
/*你的样式写在这里*/
}

11、iPhone4横板

@media only screen and (-webkit-min-device-pixel-ratio : 1.5) and (orientation:landscape),only screen and (min-device-pixel-ratio : 1.5)  and (orientation:landscape){
/*你的样式写在这里*/
}

12、iPad 3 Media Query

@media only screen and (min-device-width: 1536px) and (max-device-width: 2048px) and (-webkit-min-device-pixel-ratio: 2)
{

/*你的样式写在这里*/
}