您的位置:首页 > 产品设计 > UI/UE

响应式布局:CSS3媒体查询Media Queries

2016-11-24 21:21 441 查看
利用我们的CSS3实现响应式布局

仅仅有弹性盒还不够

CSS3还扩展了media属性,增加了一个模块功能

Media Queries媒体查询功能

媒体查询引入

随着移动端的快速普及

越来越多的用户使用智能机、平板电脑等浏览页面

所有考虑到用户的需求

我们要保证用户在各种设备上浏览页面都有不错的体验

这样我们就需要媒体查询

它允许我们为不同的设备或者不同条件的设备设置不同的样式

不过如果移动端有很重要的需求

还是应该针对移动端开发专门的页面比较好

下面我们来看看引入媒体查询的方式

媒体查询选择性加载文件

首先我们先来看看link方法

这是CSS2中的做法

使用link标签和media属性引入不同样式表(如果满足条件)

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


这里引入两个概念

一个是媒体类型(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 {
......
}
}


其他媒体查询引入

媒体查询有很多很多,我们不需要了解那么多

常用的只有上面两种

@import也可以使用媒体查询

@import url(demo.css) screen;


媒体查询使用

如果我们想指定多个媒体特性

就直接使用and关键字

媒体特性部分的指定需要使用括号

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


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

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

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


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

媒体查询可以指定否定条件

需要我们在媒体声明的最前面使用关键字not

注意,它不能再单个条件前单独声明,not会否定整个媒体声明

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


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

除了not关键字,还有一个only

它用来向早期的浏览器隐藏媒体查询

类似于not,必须声明在媒体声明语句的最前面

比如这段声明

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


早期的浏览器,只能把它理解成
media="screen"


由于它不理解媒体特性,所以它会对所有屏幕设备应用样式规则

但是使用了only关键字

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


早期浏览器会把它理解为
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的值

==主页传送门==
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息