CSS媒体查询判断

<link rel="stylesheet" media="screen and (min-width:900px)" href="big.css" type="text/css" />

当屏幕大于或等于900px时，将采用big.css样式来渲染Web页面。

 

<link rel="stylesheet" media="screen and (min-width:600px) and (max-width:900px)" href="style.css" type="text/css" />

当屏幕在600px-900px之间时采用style.css样式来渲染web页面。 

 

<link rel="stylesheet" media="screen and (max-device-width: 480px)" href="iphone.css" type="text/css" />

iphone.css样式适用于最大设备宽度为480px，比如说iPhone上的显示，这里的max-device-width所指的是设备的实际分辨率，也就是指可视面积分辨率

 

<link rel="stylesheet" media="not print and (max-width: 1200px)" href="print.css" type="text/css" />

not关键字是用来排除某种制定的媒体类型，换句话来说就是用于排除符合表达式的设备。 

 

<link rel="stylesheet" media="(min-width: 701px) and (max-width: 900px)" href="medium.css" type="text/css" />

最小宽度710px，最大宽度900px之间的引用medium.css

 

兼容iphone4/4s @media (device-height:480px) and (-webkit-min-device-pixel-ratio:2){

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

} 兼容iphone6，iphone7，iphone8s @media (device-height:667px) and (-webkit-min-device-pixel-ratio:2){

}

兼容iphone6 Plus,iphone7 Plus,iphone8 Plus @media (device-height:736px) and (-webkit-min-device-pixel-ratio:2){

} 兼容iphoneX @media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3){

}

 

多个网址康戳C康戳V

 

转载于:https://www.cnblogs.com/yyy251/p/9375809.html