买辣椒也用券

  博客园  :: 首页  :: 新随笔  :: 联系 :: 订阅 订阅  :: 管理
  29 Posts :: 1 Stories :: 17 Comments :: 0 Trackbacks

都知道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)" />
posted on 2019-09-01 12:02 买辣椒也用券 阅读(...) 评论(...) 编辑 收藏