谈谈CSS的@media

最新推荐文章于 2023-05-01 13:53:42 发布

AmandaTung

最新推荐文章于 2023-05-01 13:53:42 发布

阅读量800

点赞数

分类专栏： css 文章标签： css media

本文链接：https://blog.csdn.net/AmandaTung/article/details/49863211

版权

css 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

今天菜鸟在做练习的时候需要用到@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>
IE	Firefox	Chrome	Safari	Opera
6.0+	2.0+	4.0+	6.0+	15.0+

<mediea_feature>
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+	2.0+	4.0+	3.1+	15.0+	3.2+	2.1+	18.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	定义输出设备每一组彩色原件的个数。如果不是彩色设备，则值等于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	定义输出设备中的页面可见区域宽度。