css3的@media

Posted 2022-09-17 juaoie

都知道bootstrap响应式布局很酷，但是是怎么实现的呢？其官网首页有提到这一切的功劳都是来自于CSS 媒体查询（Media Query）。

使用 @media 查询，你可以针对不同的媒体类型定义不同的样式。
@media 可以针对不同的屏幕尺寸设置不同的样式，特别是如果你需要设置设计响应式的页面，@media 是非常有用的。
当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。

一、media的几种引用方式

1、直接在head中引用

这也是我们很常见的引用方式，只不过很多时候我们都不太懂是什么意思。感觉又好像没有起太大作用的样子，就容易被我们忽视。

<link href="css/style.css" rel="stylesheet" type="text/css" media="screen" />

这里的描述的意思是：只有当当前设备是电脑屏幕，平板电脑，智能手机等才引入这个css样式文件

2、用import引入样式

但是要在style下面才能引入，

<style type="text/css" media="screen"> 或者写成<style type="text/css" media="screen and (max-width: 600px)"> 
    @import url("css/style.css");
</style>

这里描述的意思是：只有当当前设备是电脑屏幕，平板电脑，智能手机并且宽度小于等于600px的时候才引入这个css样式文件

3、直接在代码中写@media

bootstrap用的就是这种方法

@media print and (max-width: 600px) 
    选择器 
      属性：属性值；
    

这里描述的意思是：只有当当前设备是打印机并且宽度小于或等于600px时候才引入这个样式文件

这里可能会疑问为啥max-width：600px 还表示小于600px呢？
因为这里是指要满足媒体类型（media type）和媒体特征（media feature）这两个条件才触发里面的代码，小于600px就是指最大没超过600px；
而满足的这两个条件并且和 and|not|only 这三关键字共同发生作用的过程叫媒体查询（media query）

二、media的语法、媒体类型和媒体特征以及关键的解释

1、media的语法

针对不同的媒体使用css样式，例如只是控制个颜色、宽度等

@media media type and|not|only (media feature) 
    CSS-Code;

针对不同媒体引用不同的css样式文件

<link rel="stylesheet" media="media type and|not|only (media feature)" href="mystylesheet.css">

2、媒体类型

媒体类型就是media tyep，通常的值有:

值	描述
all	用于所有设备
print	用于打印机和打印预览
screen	用于电脑屏幕，平板电脑，智能手机等。
speech	应用于屏幕阅读器等发声设备

3、媒体特征

媒体特征就是media feature，通常的值有:

值	描述
aspect-ratio	定义输出设备中的页面可见区域宽度与高度的比率
color	定义输出设备每一组彩色原件的个数。如果不是彩色设备，则值等于0
color-index	定义在输出设备的彩色查询表中的条目数。如果没有使用彩色查询表，则值等于0
max-color	定义输出设备每一组彩色原件的最大个数。
min-color	定义输出设备每一组彩色原件的最小个数。
max-color-index	定义在输出设备的彩色查询表中的最大条目数。
min-color-index	定义在输出设备的彩色查询表中的最小条目数。
device-aspect-ratio	定义输出设备的屏幕可见宽度与高度的比率。
min-device-aspect-ratio	定义输出设备的屏幕可见宽度与高度的最小比率。
max-device-aspect-ratio	定义输出设备的屏幕可见宽度与高度的最大比率。
device-height	定义输出设备的屏幕可见高度。
device-width	定义输出设备的屏幕可见宽度。
grid	用来查询输出设备是否使用栅格或点阵。
height	定义输出设备中的页面可见区域高度。
max-aspect-ratio	定义输出设备的屏幕可见宽度与高度的最大比率。
max-device-height	定义输出设备的屏幕可见的最大高度。
max-device-width	定义输出设备的屏幕最大可见宽度。
min-device-width	定义输出设备的屏幕最小可见宽度。
min-device-height	定义输出设备的屏幕的最小可见高度。
max-monochrome	定义在一个单色框架缓冲区中每像素包含的最大单色原件个数。
max-resolution	定义设备的最大分辨率。
min-aspect-ratio	定义输出设备中的页面可见区域宽度与高度的最小比率。
max-height	定义输出设备中的页面最大可见区域高度。
max-width	定义输出设备中的页面最大可见区域宽度。
min-height	定义输出设备中的页面最小可见区域高度。
min-width	定义输出设备中的页面最小可见区域宽度。
min-monochrome	定义在一个单色框架缓冲区中每像素包含的最小单色原件个数
min-resolution	定义设备的最小分辨率。
monochrome	定义在一个单色框架缓冲区中每像素包含的单色原件个数。如果不是单色设备，则值等于0
orientation	定义输出设备中的页面可见区域高度是否大于或等于宽度。
resolution	定义设备的分辨率。如：96dpi,300dpi,118dpcm
scan	定义电视类设备的扫描工序。
width	定义输出设备中的页面可见区域宽度。

然后解释一下max-device-width与max-width的区别
max-width指的是浏览器的显示区域宽度；max-width在窗口大小改变或横竖屏转换时会发生变化。
max-device-width指的是设备的实际屏幕宽度，也就是设备分辨率；max-device-width只与设备相关，在窗口大小改变或横竖屏转换时都不会发生变化。

4、解释三个关键字

解释

and关键字相当于&&
not正好是取反
only表示不支持媒体特征(Media feature)但又支持媒体类型(Media Type)的设备

实例

not关键字实例：

 <link rel="stylesheet" media="not print and (max-width: 1200px)" href="print.css" type="text/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" media="(min-width: 701px) and (max-width: 900px)" href="medium.css" type="text/css">

另外还有使用逗号（，）被用来表示并列或者表示或，如下

<link rel="stylesheet" type="text/css" href="style.css" media="screen and (max-width:480px), screen and (min-width:960px)" />