今天菜鸟在做练习的时候需要用到@media,就上网搜了搜知识点,在这里做个归纳总结。
Media Queries能在不同的条件下使用不同的样式,使用页面达到不同的渲染效果。
语法
使用 @media 查询,可以针对不同的媒体类型定义不同的样式。
可以针对不同的屏幕尺寸设置不同的样式,当重置浏览器大小的过程中,页面也会根据浏览器的宽度和高度重新渲染页面。
@media:<media_query_list>
<media_query_list>:[<media_query>[',' <media_query>]*]?
<media_query>:[only | not]? <media_type> [and <expression>]* | <expression> [and <expression>]*
<expression>:'('<mediea_feature>[:<value>]?')'
浏览器支持
支持 不支持
IE | Firefox | Chrome | Safari | Opera |
---|---|---|---|---|
6.0+ | 2.0+ | 4.0+ | 6.0+ | 15.0+ |
IE | Firefox | Chrome | Safari | Opera | iOS Safari | Android Browser | Android Chrome |
---|---|---|---|---|---|---|---|
6.0-8.0 | 2.0+ | 4.0+ | 3.1+ | 15.0+ | 3.2+ | 2.1+ | 18.0+ |
9.0+ |
媒体类型引用<media_type>
媒体类型通常以下四种方式引用:
- link方法引入,例:(常用)
<link rel="stylesheet" href="../css/example.css" media="screen and(max-width:800px)" />
- xml方法引入,例:
<?xml-stylesheet rel="stylesheet" media="screen and(max-width:800px)" href="css/example.css" ?>
- @import方法引入,在IE6-7中都不被支持,引用分两种形式:
在css文件中通过@import调用别一个css文件,例:@import url("css/reset.css") screen; @import url("css/print.css") print;
<head> <style> @import url("css/style.css") all; </style> </head>
- @media方法引入,分为两种形式:(常用)
在css文件中引入,例:@media screen{ 选择器{ 属性:属性值; } }
在<head></head>中的<style>...</style>中引入,例:<head> <style type="text/css"> @media screen{ 选择器{ 属性:属性值; } } </style> </head>
媒体特性使用方法<mediea_feature>
例如:<link rel="stylesheet" media="screen and (max-width: 600px)" href="small.css" />
@media screen and (max-width: 600px) {
选择器 {
属性:属性值;
}
}
<link rel="stylesheet" media="screen and (min-width:600px) and (max-width:900px)" href="style.css"/>
注:一个Media Query可以包含0到多个表达式,表达式又可以包含0到多个关键字,以及一种Media Type。
<link rel="stylesheet" href="style.css" media="handheld and (max-width:480px), screen and (min-width:960px)" />
- Media query只接受单个的逻辑表达式作为其值,或者没有值;
- css属性用于声明如何表现页页的信息;而Media Query是一个用于判断输出设备是否满足某种条件的表达式;
- Media Query其中的大部分接受min/max前缀,用来表示其逻辑关系,表示应用于大于等于或者小于等于某个值的情况;
- CSS属性要求必须有属性值,Media Query可以没有值,因为其表达式返回的只有真或假两种;
关键字
- not关键字:
not关键字是用来排除某种制定的媒体类型,换句话来说就是用于排除符合表达式的设备。<link rel="stylesheet" media="not print and (max-width: 1200px)" href="print.css" >
- only关键字:
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="android240.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)" />
媒体类型
值 | 描述 |
---|---|
all | 用于所有设备 |
aural | 已废弃。用于语音和声音合成器 |
braille | 已废弃。 应用于盲文触摸式反馈设备 |
embossed | 已废弃。 用于打印的盲人印刷设备 |
handheld | 已废弃。 用于掌上设备或更小的装置,如PDA和小型电话 |
用于打印机和打印预览 | |
projection | 已废弃。 用于投影设备 |
screen | 用于电脑屏幕,平板电脑,智能手机等。 |
speech | 应用于屏幕阅读器等发声设备 |
tty | 已废弃。 用于固定的字符网格,如电报、终端设备和对字符有限制的便携设备 |
tv | 已废弃。 用于电视和网络电视 |
媒体功能
值 | 描述 |
---|---|
aspect-ratio | 定义输出设备中的页面可见区域宽度与高度的比率 |
color | 定义输出设备每一组彩色原件的个数。如果不是彩色设备,则值等于0 |
color-index | 定义在输出设备的彩色查询表中的条目数。如果没有使用彩色查询表,则值等于0 |
device-aspect-ratio | 定义输出设备的屏幕可见宽度与高度的比率。 |
device-height | 定义输出设备的屏幕可见高度。 |
device-width | 定义输出设备的屏幕可见宽度。 |
grid | 用来查询输出设备是否使用栅格或点阵。 |
height | 定义输出设备中的页面可见区域高度。 |
max-aspect-ratio | 定义输出设备的屏幕可见宽度与高度的最大比率。 |
max-color | 定义输出设备每一组彩色原件的最大个数。 |
max-color-index | 定义在输出设备的彩色查询表中的最大条目数。 |
max-device-aspect-ratio | 定义输出设备的屏幕可见宽度与高度的最大比率。 |
max-device-height | 定义输出设备的屏幕可见的最大高度。 |
max-device-width | 定义输出设备的屏幕最大可见宽度。 |
max-height | 定义输出设备中的页面最大可见区域高度。 |
max-monochrome | 定义在一个单色框架缓冲区中每像素包含的最大单色原件个数。 |
max-resolution | 定义设备的最大分辨率。 |
max-width | 定义输出设备中的页面最大可见区域宽度。 |
min-aspect-ratio | 定义输出设备中的页面可见区域宽度与高度的最小比率。 |
min-color | 定义输出设备每一组彩色原件的最小个数。 |
min-color-index | 定义在输出设备的彩色查询表中的最小条目数。 |
min-device-aspect-ratio | 定义输出设备的屏幕可见宽度与高度的最小比率。 |
min-device-width | 定义输出设备的屏幕最小可见宽度。 |
min-device-height | 定义输出设备的屏幕的最小可见高度。 |
min-height | 定义输出设备中的页面最小可见区域高度。 |
min-monochrome | 定义在一个单色框架缓冲区中每像素包含的最小单色原件个数 |
min-resolution | 定义设备的最小分辨率。 |
min-width | 定义输出设备中的页面最小可见区域宽度。 |
monochrome | 定义在一个单色框架缓冲区中每像素包含的单色原件个数。如果不是单色设备,则值等于0 |
orientation | 定义输出设备中的页面可见区域高度是否大于或等于宽度。 |
resolution | 定义设备的分辨率。如:96dpi, 300dpi, 118dpcm |
scan | 定义电视类设备的扫描工序。 |
width | 定义输出设备中的页面可见区域宽度。 |
以上根据如下资料整理,谢谢!