使用 @media 查询,你可以针对不同的媒体类型定义不同的样式。
@media 可以针对不同的屏幕尺寸设置不同的样式,特别是如果你需要设置设计响应式的页面,@media 是非常有用的。
当你重置浏览器大小的过程中,页面也会根据浏览器的宽度和高度重新渲染页面。
一、页面中引入媒体类型方法也有多种
1、link方法引入
<link rel="stylesheet" media="screen and (max-width: 600px)" href="sytle1.css" />
在屏幕最大是600px的时候加载”sytle1.css”
2、@import 方式引用,这种方式的引用,要在style中,写法如下:
<style type="text/css" media="screen">
@import url("css/style.css");
</style>
或者:
<style type="text/css" media="screen and (max-width: 600px)">
@import url("css/style.css");
</style>
3、第三种方法,也是我很喜欢用的,也就是下面的这种方法:
@media screen and (max-width: 600px) {
选择器 {
属性:属性值;
}
}
二、Media Queries的具体使用方式
1、最大宽度Max Width
面表示的是:当屏幕小于或等于600px时,将采用style2.css样式来渲染Web页面。
<link rel="stylesheet" media="screen and (max-width:600px)" href="style2.css" type="text/css" />
2、最小宽度Min Width
下面的样式会在可视区域的宽度大于 900px 的时候被应用。
@media screen and (min-width: 900px) {
.class {
background: #666;
}
}
3、多个Media Queries使用
你还可以使用过个匹配条件,下面的样式会在可视区域的宽度在 600px 和 900px 之间的时候被应用。
@media screen and (min-width: 600px) and (max-width: 900px) {
.class {
background: #333;
}
}
4、设备屏幕的输出宽度Device Width
下面的样式会在 max-device-width 是 480px 的设备上触发。(提示:max-device-width 是设备的实际分辨率,而 max-width 指的是可视区域分辨率。)
@media screen and (max-device-width: 480px) {
.class {
background: #000;
}
}
5、iPad
在大数情况下,移动设备iPad上的Safari和在iPhone上的是相同的,只是他们不同之处是iPad声明了不同的方向,比如说下面的例子,在纵向(portrait)时采用portrait.css来渲染页面;在横向(landscape)时采用landscape.css来渲染页面。
<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css" type="text/css" />
<link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css" type="text/css" />
6、关键字(not、only)
not关键字是用来排除某种制定的媒体类型,换句话来说就是用于排除符合表达式的设备。如下:
<link rel="stylesheet" media="not print and (max-width: 1200px)" href="print.css" type="text/css" />
only用来定某种特定的媒体类型,可以用来排除不支持媒体查询的浏览器。
其实only很多时候是用来对那些不支持Media Query但却支持Media Type的设备隐藏样式表的。
其主要有:支持媒体特性(Media Queries)的设备,正常调用样式,此时就当only不存在;对于不支持媒体特性(Media Queries)但又支持媒体类型(Media Type)的设备,这样就会不读了样式,因为其先读only而不是screen;另外不支持Media Qqueries的浏览器,不论是否支持only,样式都不会被采用。如下:
<link rel="stylesheet" media="only screen and (max-device-width:240px)" href="a.css" type="text/css" />
7、其他
在Media Query中如果没有明确指定Media Type,那么其默认为all,如:
<link rel="stylesheet" media="(min-width: 701px) and (max-width: 900px)" href="medium.css" type="text/css" />
另外还有使用逗号(,)被用来表示并列或者表示或,如下:
<link rel="stylesheet" media="(min-width: 701px) and (max-width: 900px)" href="medium.css" type="text/css" />
(完)
( 0 )个小伙伴在吐槽