响应式设计——媒体查询
一、响应式设计
响应式设计的概念是页面的设计应根据用户的行为(如调整浏览器窗口大小)和设备环境(如屏幕大小、屏幕定向)进行相应的调整。它可以由多方面组成,包括弹性网格和布局、弹性图片、媒体查询等。
二、媒体查询
2.1媒体查询的概念
在css2中允许使用media来对特定的媒体应用特定的样式,例如针对屏幕或者打印机。可以通过<link>标签的media属性为样式表指定特定的媒体。
<link rel="stylesheet" type="text/css" href="screen-style.css" media="screen" />
但是这种方式只能针对媒体的类型,不能根据媒体的各种功能特性来设定相应的样式,而css3中的媒体查询则可以。
媒体查询由媒体类型和一个或多个检测媒体特性的条件表达式组成。媒体查询中可用于检测的媒体特性有 width和height 等。使用媒体查询,可以在不改变 页面页面内容的情况下,为特定的一些输出设备定制显示效果。
2.2媒体查询的语言
1.在css样式表中使用@media
@media screen and (max-width:800px){
body{
background-color:red;
}
}
①其中screen是媒体类型的一种(屏幕),其他的媒体类型如下
媒体类型 |
媒体类型说明 |
all |
所有媒体 |
aural |
听觉媒体 |
braille |
点字触觉媒体 |
handled |
便携媒体,如手机、平板电脑 |
|
打印预览图等 |
projection |
投影设备 |
screen |
显示器、笔记本、移动端等设备 |
tty |
如打字机或终端等设备 |
tv |
电视机等设备类型 |
embossed |
盲文打印机 |
②其中and是关键字,用于连接多个并列条件,其他关键字还有not和only。not是指排除某种设备,除了指定的这种设备之外,其他的都可以。如:
@media not screen{
body{
color:red;
}
}
是指不是显示屏之外的应用此样式。
only是对于不支持Media Queries但是能够正确读取Media Type的设备隐藏样式表。Media Queries是css3对Media Type的一个扩展,所以不支持Media Queries的浏览器,应该仍然要识别Media Type。比如:
@media only screen and (max-width:990px){
body{
color:red;
}
}
对于支持Media Queries的设备,能够正确应用样式,就像only不存在一样;对于不支持Media Queries但是能够正确读取Media Type的设备,由于先读取到only而不是screen,所以会忽略这个样式;不支持media Queries的IE无论是否有only,都忽略样式。下面是Media Queries的支持情况:
IE6 | 不支持 |
IE7 | 不支持 |
IE8 | 不支持 |
IE9+ | 支持 |
chrome5 | 支持 |
Opera10 | 支持 |
Firefox3.6 | 支持 |
Safari4 | 支持 |
逗号(,)用来表示并列,即或者。比如:
@media handheld and (max-width:20em),screen and (max-width:30em){
body{
color:red;
}
}
这个表示在宽度小于20em的手持设备,或者宽度小于30em的屏幕中应用此样式。
③其中对于(max-width:800px)就是媒体特性,被置放在一对圆括号里面。媒体特性只接受单个的逻辑表达式作为其值,或者没有值。其中大部分接受max/min的作为前缀。下表是一些媒体特性:
媒体特性 | 取值 | 含义 |
支持 max/min |
width | length | 视口宽度 | 支持 |
height | length | 视口高度 | 支持 |
device-width | length | 设备屏幕的宽度 | 支持 |
device-height | length | 设备屏幕的高度 | 支持 |
orientation |
portrait| landscape |
检查设备处于横向还是纵向 | 不支持 |
aspect-ratio | ratio(16/9) | 基于视口宽度和高度的宽高比 | 支持 |
device-aspect-ratio | ratio(16/9) | 基于设备宽度和高度的宽高比 | 支持 |
color | integer | 每种颜色的位数 | 支持 |
color-index | integer | 设备的颜色索引表中的颜色数 | 支持 |
monochrome | integer | 检查单色帧缓冲区中每像素所使用的位数 | 支持 |
resolution | resolution(300pdi/118dpcm) | 用来检测屏幕或打印机的分辨率 | 支持 |
scan |
progressive/ interlace |
电视机的扫描方式 | 不支持 |
grid | interger | 用来检测输出设备是网格设备还是位图设备 | 不支持 |
2.通过<link>标签的media属性为样式表指定特定的媒体查询
<link rel="stylesheet" media="screen and (orientation:portrait)" href="screen.css" />
2.3媒体查询的兼容
IE8及其以下的浏览器不支持css3 Media Queries,而目前实现media queries兼容的库比较成熟的有respond.js 和 css3-mediaqueries-js,它们各有优缺点,respond.js压缩后只有1K,只实现了Media Queries中最常用的min-width/max-width的兼容;css3-mediaqueries-js基本实现了所有css3规范中的media query特性的兼容,所以导致压缩有16k。
<!--[if lt IE 9]>
<script type="text/javascript" src="respond.js"></script>
<![endif]-->
或者
<!--[if lt IE 9]>
<script type="text/javascript" src="css3-mediaqueries-js.js"></script>
<![endif]-->
2.4媒体查询的小案例
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>CSS3 Media Queries</title>
<style type="text/css">
.box{
width:800px;
height:50px;
line-height: 50px;
margin:40px auto;
border:1px solid #000;
}
@media only screen and (max-width:1300px){
#boxred{
background:red;
}
#boxblue,#boxgreen{
background:none;
}
}
@media only screen and (max-width:1100px){
#boxblue{
background:blue;
}
#boxred,#boxgreen{
background:none;
}
}
@media only screen and (max-width:900px){
#boxgreen{
background:green;
}
#boxred,#boxblue{
background:none;
}
}
</style>
</head>
<body>
<div id="boxred" class="box">当浏览器窗口宽度小于1300px时,这儿变成红色</div>
<div id="boxblue" class="box">当浏览器窗口宽度小于1100px时,这儿变成蓝色</div>
<div id="boxgreen" class="box">当浏览器窗口宽度小于900px时,这儿变成绿色</div>
</body>
</html>
参考文章:http://www.swordair.com/blog/2010/08/431/