谈谈CSS的@media

来源：互联网发布：网络有什么赚钱项目编辑：程序博客网时间：2024/05/22 14:18

今天菜鸟在做练习的时候需要用到@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>]?')'

<media_type>：

指定设备类型。媒体类型包括：参阅媒体类型。(CSS2)

<expression>：

指定媒体查询使用的媒体特性。这类似于CSS属性，如：max-width:960px。(CSS3)

浏览器支持

支持不支持

<media_type>IEFirefoxChromeSafariOpera6.0+2.0+4.0+6.0+15.0+

<mediea_feature>IEFirefoxChromeSafariOperaiOS SafariAndroid BrowserAndroid Chrome6.0-8.02.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></head>中的<style>...</style>中引入，例：
```
<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关键字：
```
<link rel="stylesheet" media="not print and (max-width: 1200px)" href="print.css" >
```
not关键字是用来排除某种制定的媒体类型，换句话来说就是用于排除符合表达式的设备。
only关键字：
```
<link rel="stylesheet" media="only screen and (max-device-width:240px)" href="android240.css" type="text/css" />
```
only用来定某种特定的媒体类型，可以用来排除不支持媒体查询的浏览器。其实only很多时候是用来对那些不支持Media Query但却支持Media Type的设备隐藏样式表的。其主要有：支持媒体特性（Media Queries）的设备，正常调用样式，此时就当only不存在；对于不支持媒体特性(Media Queries)但又支持媒体类型(Media Type)的设备，这样就会不读了样式，因为其先读only而不是screen；另外不支持Media Qqueries的浏览器，不论是否支持only，样式都不会被采用。

说明

在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和小型电话print用于打印机和打印预览projection已废弃。用于投影设备screen用于电脑屏幕，平板电脑，智能手机等。speech应用于屏幕阅读器等发声设备tty已废弃。用于固定的字符网格，如电报、终端设备和对字符有限制的便携设备tv已废弃。用于电视和网络电视

媒体功能

值描述aspect-ratio定义输出设备中的页面可见区域宽度与高度的比率color定义输出设备每一组彩色原件的个数。如果不是彩色设备，则值等于0color-index定义在输出设备的彩色查询表中的条目数。如果没有使用彩色查询表，则值等于0device-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定义在一个单色框架缓冲区中每像素包含的单色原件个数。如果不是单色设备，则值等于0orientation定义输出设备中的页面可见区域高度是否大于或等于宽度。resolution定义设备的分辨率。如：96dpi, 300dpi, 118dpcmscan定义电视类设备的扫描工序。width定义输出设备中的页面可见区域宽度。

以上根据如下资料整理，谢谢！

http://www.w3cplus.com/content/css3-media-queries

http://css.doyoe.com/

http://www.runoob.com/cssref/css3-pr-mediaquery.html

0 0