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)
{
/*你的样式写在这里*/
}
 
posted @ 2015-09-28 08:34  Coca-code  阅读(192)  评论(0编辑  收藏  举报