响应式布局之CSS3媒体查询Media Queries 的详细介绍

黄舟

Lepaskan： 2017-05-21 15:42:20

asal

2373 orang telah melayarinya

利用我们的CSS3实现响应式布局

仅仅有弹性盒还不够
CSS3还扩展了media属性，增加了一个模块功能
Media Queries媒体查询功能

媒体查询引入

随着移动端的快速普及
越来越多的用户使用智能机、平板电脑等浏览页面
所有考虑到用户的需求
我们要保证用户在各种设备上浏览页面都有不错的体验
这样我们就需要媒体查询
它允许我们为不同的设备或者不同条件的设备设置不同的样式
不过如果移动端有很重要的需求
还是应该针对移动端开发专门的页面比较好
下面我们来看看引入媒体查询的方式

媒体查询选择性加载文件

首先我们先来看看link方法
这是CSS2中的做法
使用link标签和media属性引入不同样式表（如果满足条件）

<link rel="stylesheet" media="screen and (max-width: 600px)" href="demo.css" />

Salin selepas log masuk

这里引入两个概念
一个是媒体类型（Media Type），这里的screen
一个是媒体特性（Media Query），这里的max-width: 600px

Media Query是CSS3 对Media Type的增强版
其实可以将Media Query看成Media Type(判断条件)+CSS(符合条件的样式规则)

这段代码翻译过来就是
如果媒体介质是屏幕类型并且视窗宽度≤600px，则引入demo.css样式文件

媒体查询选择性添加样式

我们在CSS3中的做法是在CSS文件中使用@media规则添加不同样式
相比link，它能够减少页面请求，效果更佳

@media screen and (max-width: 600px) {    .demo1 {        ......
    }
    .demo2 {
        ......
    }
}

Salin selepas log masuk

其他媒体查询引入

媒体查询有很多很多，我们不需要了解那么多
常用的只有上面两种
@import也可以使用媒体查询

@import url(demo.css) screen;

Salin selepas log masuk

媒体查询使用

如果我们想指定多个媒体特性
就直接使用and关键字
媒体特性部分的指定需要使用括号

media="screen and (min-width: 601px) and (max-width: 800px)"

Salin selepas log masuk

样式应用在601px~800px之间的屏幕

媒体查询没有or指定备用媒体功能，但是我们可以使用逗号分隔列表

media="screen and (min-width: 601px), print and (min-width: 6in)"

Salin selepas log masuk

样式应用在601px+的屏幕或使用至少6英寸宽的纸张的打印设备

媒体查询可以指定否定条件
需要我们在媒体声明的最前面使用关键字not
注意，它不能再单个条件前单独声明，not会否定整个媒体声明

media="not screen and (min-width: 600px) and (max-width: 800px)"

Salin selepas log masuk

样式应用在不是600px~800px之间的屏幕

除了not关键字，还有一个only
它用来向早期的浏览器隐藏媒体查询
类似于not，必须声明在媒体声明语句的最前面
比如这段声明

media="screen and (min-width: 601px) and (max-width: 800px)"

Salin selepas log masuk

早期的浏览器，只能把它理解成media="screen"
由于它不理解媒体特性，所以它会对所有屏幕设备应用样式规则
但是使用了only关键字

media="only screen and (min-width: 601px) and (max-width: 800px)"

Salin selepas log masuk

早期浏览器会把它理解为media="only"
但是不存在only媒体类型，所以它不会应用任何样式
实现了向早期的浏览器隐藏媒体查询的功能

媒体类型与媒体特性

媒体类型

媒体类型的关键字虽然很多，但是大多都被废弃了（谁用啊）
常用的也就是all、screen，再就是print

媒体类型	描述
all	所有媒体设备
screen	彩色屏幕：电脑、平板、智能机..
print	打印机、打印预览
speech	发生设备：屏幕阅读器..
aural	（已废弃）语音和音频合成器
braille	（已废弃）用盲人用点字法触觉回馈设备
embossed	（已废弃）分页的盲人用点字法打印机
handheld	（已废弃）便携设备：小型电话..
projection	（已废弃）投影设备：幻灯片..
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	输出设备中的页面可见区域宽度

这里注意区分device-width/height与width/height
device-width/height 是设备的宽度（而不是浏览器的宽度）
width/height是我们浏览器视窗的尺寸
使用documentElement.clientWidth/clientHeight即viewport的值

Atas ialah kandungan terperinci 响应式布局之CSS3媒体查询Media Queries 的详细介绍. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!