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

1、Smartphones (竖板和横板)

@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)
{

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