Media Queries这功能是非常强大的,他可以让你定制不同的分辨率和设备,并在不改变内容的情况下,让你制作的web页面在不同的分辨率和设备下都能显示正常,并且不会因此而丢失样式。

/* 判断ipad */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px){
/* style */
}
/* ipad横屏 */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape){
/* style */
}
/* ipad竖屏 */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait){
/* style */
}
/* 判断iphone5 *//* 横屏竖屏判断方法与ipad一样 */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 568px){
/* style */
}
/* 判断iphone4-iphone4s *//* 横屏竖屏判断方法与ipad一样 */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px){
/* style */
}
/* iphone5分辨率 */
screen Width = 320px (css像素)
screen Height = 568px (css像素)
screen Width = 640px (实际像素)
screen Height = 1136px (实际像素)
Device-pixel-ratio:2
/* iphone4-iphone4s分辨率 */
screen Width = 320px (css像素)
screen Height = 480px (css像素)
screen Width = 640px (实际像素)
screen Height = 960px (实际像素)
Device-pixel-ratio:2

一、最大宽度Max Width   

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

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

开始写作或按/来选择区块

二、多个Media Queries使用 

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

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

三、设备屏幕的输出宽度Device Width 

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

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

四、not关键字 

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

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

五、only关键字

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

六、其他

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

表示:在Media Query中如果没有明确指定Media Type,那么其默认为all

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

表示:另外还有使用逗号(,)被用来表示并列或者表示或,style.css样式被用在宽度小于或等于480px的手持设备上,或者被用于屏幕宽度大于或等于960px的设备上。 

发表评论

共有 0 条评论