响应式设计的点点

   移动web已经是大势所趋，所占份额迅猛增加。如果没有足够时间和精力做一套完全全新的移动端程序，那么，响应式设计也许是个不错的选择。不过，如果有条件并且需要移动端网页，移动端的很多优势还是不可替代的，比如定位功能。

  响应式设计，使得可以使用同一网站在智能手机、电脑及其他设备上完美显示。它可以根据用户的屏幕尺寸，合理的为现在的和将来的设备提供好的浏览体验。

  viewport

  viewport指的是浏览器窗口内的内容区域，即网页实际显示的区域，而屏幕尺寸是指设备的物理显示区域。可以阻止浏览器自动调整页面大小：

  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">

  不过一般不会阻止用户手动缩放页面大小。

  media-query

  media query可以为特定的输出设备定制显示效果。已经得到了很多浏览器的大力支持。在不支持的浏览器IE6-8中，也可使用respond.js这个polyfill.

  一些例子：

 

<link rel="stylesheet" media="screen and (max-600px)" href="small.css" type="text/css" />

<link rel="stylesheet" media="screen and (min-900px)" href="big.css" type="text/css"  />

<link rel="stylesheet" media="screen and (min-600px) and (max-900px)" href="style.css" type="text/css" />

<link rel="stylesheet" media="screen and (max-device- 480px)" href="iphone.css" type="text/css" />

<link rel="stylesheet" media="not print and (max- 1200px)" href="print.css" type="text/css" />

<link rel="stylesheet" type="text/css" href="style.css" media="handheld and (max-480px), screen and (min-960px)" />

   如果想要减少请求，可以使用内联的media query进行层叠：

@media screen and (max-240px){
    body{font-size:medium;}
} 

  在适应不同分辨率的设备时，应该保证内容优先，依照此原则来进行布局。

  流式布局

  使用media query可以针对不同分辨率的设备加载不同的css,但是仍然需要分很多情况，并且，在某些分辨率下表现可能不太理想。流式布局，即用相对单位，百分比进行布局。

  与绝对单位的换算方式，就是目标尺寸/上下文尺寸=百分比尺寸。

  一个简单的例子：

 

div.container { 

margin: 0 auto; 

 100%; 

} 

div.main { 

 62.5%; 

float: left; 

} 

div.aside { 

 31.25%; 

float: right; 

} 

  如果要设置最大宽度和最小宽度，就指定元素的max-width和min-width,IE7+都支持了。

  就是这些了，加油加油加油！

相关链接http://www.w3cplus.com/responsive/responsive-web-design-tips-and-notes.html

有一张图，比较好的说明了响应式设计的技术及应用场景：

图片转载自：图说