css3 响应式布局 Media Query

1.什么是响应式布局?

  响应式布局是Ethan Marcotte在2010年5月份提出的一个概念,简单说就是一个网站能够兼容多个终端。


2.响应式布局的优缺点?

  优点:面对不同分辨率设备灵活性强,快捷解决多设备显示适应问题

  缺点:工作量大;会出现隐藏多个无用元素加载时间延长;一定程度上改变了网站原有的布局结构


在页面的<head>标签中加入这句:

<meta name="viewport" content="width=device-width; initial-scale=1.0">

meta viewport这个属性是在移动设备上设置原始大小显示和是否缩放的声明。

参数设置:

width(viewport的宽度)

height(viewport的高度)

initial-scale(初始的缩放比例)

maximum-scale(允许用户缩放的最大比例)

minmum-scale(允许用户缩放的最小比例)

user-scalable(用户是否可以手动缩放)


3.用法

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

  可用设备名参数:

类型  解释
 screen 彩色电脑屏幕 
 all 所有设备 
 braille 盲文 
 embossed 盲文打印 
 handheld 手持设备 
 print 文档打印或打印预览模式 
 projection 项目演示,比如幻灯片
 speech 演讲 
 tty 固定字母间距的网格的媒体,如电传打字机 
 tv 电视 

  逻辑关键字:

关键字 说明
only 限定某种设备类型
and 逻辑与,连接设备名和选择条件
not 排除某种设备
, 设备列表

  可用设备名参数:

媒体特性 可用媒体类型 接受min/max 简介
width <length> 屏幕/触摸设备 yes 定义输出设备中的页面可见区域宽度(单位一般是px)
height <length> 屏幕/触摸设备 yes 定义输出设备中的页面可见区域高度(单位一般是px)
device-width <length> 屏幕/触摸设备 yes 定义输出设备的屏幕可见宽度(单位一般是px)
device-height <length> 屏幕/触摸设备 yes 定义输出设备的屏幕可见高度(单位一般是px)
orientation portrait|landscape 位图介质类型 no 定义'height'是否大于或等于'width'。值就为portrait,即横向。否则为landscape,为竖屏
 aspect-ratio <ratio>  位图介质类型  yes  定义浏览器的长宽比 
 device-aspect-ratio <ratio>  位图介质类型  yes  定义设备屏幕长宽比,如常见的显示器比率:4/3,16/9,16/10 
 color <integer>  视觉媒体  yes  定义每一组输出设备的彩色元件个数。如果不是彩色设备,则值等于0 
 color-index <integer>  视觉媒体  yes  定义在输出设备的彩色查询表中的条目数,如果没有使用彩色查询表,则值等于0
 monochrome <integer>  视觉媒体  yes  定义在一个单色框架缓冲区中每像素包含的单色元件个数,如果不是单色设备,则值等于0 
 resolution <resolution>  位图介质类型  yes  定义设备的分辨率。如:96dpi,300dpi,118dpcm
 scan  progressive|interlace 电视类  no  定义电视类设备的扫描工序,progressive逐行扫描,interlace隔行扫描
 grid <integer>  栅格设备  no

Determines whether the output device is a grid device or a bitmap device. If the device is grid-based (such as a TTY terminal or a phone display with only one font), the value is 1. Otherwise it is zero.

用来查询输出设备是栅格设备还是位图设备, 如果是栅格设备为1,否则值为0。


测试工具:

  一个在线工具-Responsivator,可以模拟iphone、ipad和少量android设备。


实现举例:

  /*浏览器的可视区域小于980px*/

  @media screen and (max-width: 980px) {

  #wrap {width: 90%; margin: 0 auto;}

  #content {width: 60%; padding: 5%;}

  #sidebar {width: 30%;}

  #footer {padding: 8% 5%; margin-botton: 10px;}

  }

  /*浏览器的可视区域小于650px*/

  @media screen and (max-width:650px) {......}


格式化一些css属性的初始值:

/*禁止iphone中safari的字号自动调整*/

html {

-webkit-text-size-adjust: none;

}

/*设置html5元素为块*/

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {

diplay: block;

}

/*设置图片视频等自适应调整*/

img {

max-width: 100%;

height: auto;

width: auto\9; /*ie8*/

}

.video embed, .video object, .video iframe {

width: 100%;

height: auto;

}


对于ie浏览器不支持media query的情况,我们可以使用Media Query JavaScript来解决,只需要在页面头部引用css3-mediaqueries.js即可。

例如:

<!-- [if lt IE 9] >

<script src="http://css-mediaqueries-js.googlecode.com/svn/trunk/css-mediaqueries.js"></script><!-- (或放在自己的服务器里) -->

<! [endif] -->

上一篇:IT兄弟连 HTML5教程 响应式布局实例


下一篇:HBase架构深度解析