Media Queries能在不同的条件下使用不同的样式,使页面在不同在终端设备下达到不同的渲染效果。前面简单的介绍了Media Queries如何引用到项目中,但Media Queries有其自己的使用规则。
通过不同的媒体类型和条件定义样式表规则。
- 媒体查询让CSS可以更精确作用于不同的媒体类型和同一媒体的不同条件。
- 媒体查询的大部分媒体特性都接受min和max用于表达“大于或等于”和“小与或等于”。如:width会有min-width和max-width
-
媒体查询可以被用在CSS中的@media和@import规则上,也可以被用在HTML和XML中。
1. 最大宽度max-width
“max-width”是媒体特性中最常用的一个特性,其意思是指媒体类型小于或等于指定的宽度时,样式生效。如:
@media screen and (max-width:480px){
.ads {
display:none;
}
}
2.多个媒体特性使用
Media Queries可以使用关键词"and"将多个媒体特性结合在一起。也就是说,一个Media Query中可以包含0到多个表达式,表达式又可以包含0到多个关键字,以及一种媒体类型。
当屏幕在600px~900px之间时,body的背景色渲染为“#f5f5f5”,如下所示。
@media screen and (min-width:600px) and (max-width:900px){
body {background-color:#f5f5f5;}
}
3.设备屏幕的输出宽度Device Width
在智能设备上,例如iPhone、iPad等,还可以根据屏幕设备的尺寸来设置相应的样式(或者调用相应的样式文件)。同样的,对于屏幕设备同样可以使用“min/max”对应参数,如“min-device-width”或者“max-device-width”。
<link rel="stylesheet" media="screen and (max-device-width:480px)" href="iphone.css" />
/*屏幕宽度200px~300px: background-color: red;*/
#div {
width:100px;
height: 200px;
}
@media screen and (min-device-width:200px) and (max-device-width:300px) {
#div {
background-color: red;
}
}
媒体特性 Media Features
该表信息摘自—— 这里
Media Features 媒体特性 | Value 取值 | Accepts min/max 接受min/max | Description 简介 |
---|---|---|---|
width | <length> | yes | 定义输出设备中的页面可见区域宽度 |
height | <length> | yes | 定义输出设备中的页面可见区域高度 |
device-width | <length> | yes | 定义输出设备的屏幕可见宽度 |
device-height | <length> | yes | 定义输出设备的屏幕可见高度 |
orientation | portrait | landscape | no | 定义'height'是否大于或等于'width'。值portrait代表是,landscape代表否 |
aspect-ratio | <ratio> | yes | 定义'width'与'height'的比率 |
device-aspect-ratio | <ratio> | yes | 定义'device-width'与'device-height'的比率。如常见的显示器比率:4/3, 16/9, 16/10 |
color | <integer> | yes | 定义每一组输出设备的彩色原件个数。如果不是彩色设备,则值等于0 |
color-index | <integer> | yes | 定义在输出设备的彩色查询表中的条目数。如果没有使用彩色查询表,则值等于0 |
monochrome | <integer> | yes | 定义在一个单色框架缓冲区中每像素包含的单色原件个数。如果不是单色设备,则值等于0 |
resolution | <resolution> | yes | 定义设备的分辨率。如:96dpi, 300dpi, 118dpcm |
scan | progressive | interlace | no | 定义电视类设备的扫描工序 |
grid | <integer> | no | 用来查询输出设备是否使用栅格或点阵。只有1和0才是有效值,1代表是,0代表否 |