2014-9-17 响应式设计

[hjzheng]

响应式设计(responsive web design)

什么是响应式设计?

随着用户浏览网页的设备越来越复杂(手机,平板,电脑), 之前只针对大尺寸屏幕的web设计,已经不太适合了,我们的设计需在不同设备上,做出不同响应，保证用户良好的体验，这就是响应式设计。

响应式设计的真实例子

http://colly.com http://foodsense.is http://www.sony.com/ https://ace.ng.bluemix.net/ http://www.ccdi.gov.cn/ https://github.com/

你可以通过改变浏览器窗口的大小或chrome dev tools的模拟器，去模拟不同设备尺寸，体验什么是响应式设计。

viewport

可视窗口, 是在meta元素中定义的，其主要作用是设置Web页面适应移动设备的屏幕大小。 移动设备通常会提供viewport默认设置, 为没有针对移动设备的网站显示看起来不错，但是响应式设计需要重新定义viewport.

<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0" /> 

width指定虚拟窗口的屏幕宽度大小。
height指定虚拟窗口的屏幕高度大小。
initial-scale指定初始缩放比例。
maximum-scale指定允许用户缩放的最大比例。
minimum-scale指定允许用户缩放的最小比例。
user-scalable指定是否允许手动缩放。

像素密度(resolution)

屏幕像素密度,在一个物理尺寸上所能显示的像素数量,一般使用dpi(dots per inch)来表示,每英寸像素数。 iphone3G 162dpi 320px * 480px iphone4 326dpi 640px * 960px CSS pixel是一个相对值, 例如 如果10X10 pixel div 在iphone3G显示为10X10 pixel，那么在iphone4上显示为20X20 pixel, 因为为了保持一致，高密度屏对CSS pixel进行了放大, 苹果设备默认放大倍数(device pixel ratio)为2。

https://github.com/h5bp/mobile-boilerplate/wiki/Mobile-Matrices http://www.zhangxinxu.com/wordpress/2012/08/window-devicepixelratio/

媒体查询(Media Queries)

媒体查询的添加方法:

  <link rel="stylesheet" media="(max-width:480px)" href="mobile.css"> 

 @media (max-width:480px) {
 ... ... 
 }

媒体类型(Media Type)

类型	说明
all	所有类型设备
tv	电视设备
print	打印设备
screen	电脑手机平板等彩色屏幕
projection	投影设备

https://developer.mozilla.org/en-US/docs/Web/CSS/@media

媒体特性(Media Feature)

media_feature: width | min-width | max-width 
  | height | min-height | max-height
  | device-width | min-device-width | max-device-width
  | device-height | min-device-height | max-device-height
  | aspect-ratio | min-aspect-ratio | max-aspect-ratio
  | device-aspect-ratio | min-device-aspect-ratio | max-device-aspect-ratio
  | color | min-color | max-color
  | color-index | min-color-index | max-color-index
  | monochrome | min-monochrome | max-monochrome 
  | resolution | min-resolution | max-resolution
  | scan | grid
  | orientation

http://www.w3.org/TR/css3-mediaqueries/#media1

操作符(and, or, not)

用于连接媒体特性和媒体特性表达式

/* and */
@media screen and (min-width: 480px) and (max-width: 767px) {
  body{
    background: #ce33eb;
  }
}

/* , 相当于or */
@media screen and ( orientation: landscape ), screen and ( min-width: 700px ) {
  body{
    background: #c0392b;
  }
}

/* 否定后面所有的条件 */
@media not screen and ( max-width:959px ){
  body{
    background: #ccc;
  }
}

响应式布局

@media ( min-width: 1200px ){
  .container{
    width: 1170px;
  }
  #mainbody{
    width: 770px;
    margin-right: 30px;
  }
  #sidebar{
    width: 370px;
  }
}

@media ( max-width: 959px){
  .container{
    width: 100%;
  }
  #mainbody{
    width: 67%;
  }
  #sidebar{
    width: 30%;
    float: right;
  }
}

@media ( max-width: 767px ){
  #mainbody, #sidebar{
    float: none;
    width: 100%;
  }
}

响应式导航菜单

响应式图片设计

响应式框架

bootstrap (http://www.bootcss.com/) foundation (http://foundation.zurb.com/)

响应式设计资源

http://mediaqueri.es http://responsive.cn

了解更多:

http://book.51cto.com/art/201204/328360.htm http://www.ruanyifeng.com/blog/2012/05/responsive_web_design.html http://www.yiiyaa.net/?p=1451

[hjzheng]

响应式设计PPT: https://github.com/hjzheng/CUF_PPTs

[hjzheng]

媒体特性(Media Feature)

媒体类型(Media Type)

[jikeytang]

good.cool.