HTML和CSS高级指南之四——响应式设计(转)
?
Food Sense是个很漂亮的网站，他响应所有不同的设备尺寸。不管设备尺寸大小如何，食物感官网站都可以轻松适应，给用户一个很自然的用户体验。（如上图所示）
?
响应式、自适应、移动的区别
?
响应式中的一些术语可能并不是新的，而其他术语又跟自适应或是移动有点像。那么你也许会困惑，他们之间的区别到底是什么?
?
响应式和自适应的关系很密切，经常二者是互通的。响应式通常意味着对待任何变化，反应更积极更快。而自适应往往是应对一个新需求或是情况的被动反 应，例如变化。响应式设计应对不同因素的变化，都会很流畅自如，例如设备宽度。而自适应设计会基于一定的因素搭建。将二者结合是一种理想化，提供一个完美 功能模式的网站，这个术语不会产生很大的歧义。
?
另一方面，移动设备，通常意味着需要为移动用户，专门搭建一个移动网站。然而这样做可能有些作用，却不是很好的主意。移动网站要求必须非常轻巧，然而他又很依赖一个新的代码库和浏览器的嗅探。所有的这些都是摆在开发者和用户面前的一个障碍。
?
目前在响应式设计中最流行的技术，就是对于不同浏览器和设备的动态布局设计，他会根据不同的浏览器和设备尺寸的变化，动态改变网页的布局和内容。这个解决方案充分发挥了响应式，自适应和移动设备的三方优势。
?
扩展阅读?
响应式设计主要有三部分组成：流式布局，媒体查询和灵活的媒体类型。第一部分，流式布局，就是用灵活的网格搭建一个网站布局，它可以动态的调整以适应于任何宽度。网格布局使用相对长度单位，通常是百分比或是em。这些相对长度多用于网格，诸如宽度，间距或是留白等属性。
?
相对视窗长度
?
Css3中引入一些新的相对长度，他们是针对浏览器或是设备视窗尺寸的，这些新单位包括vw，wh，vmin和vmax。目前支持他们的设备或是浏览器并不多，但是支持他们的数量在不断增长。他们在搭建响应式网站发挥很大的作用。
?
vw:视窗宽度;vh:视窗高度;vmin:视窗最小尺寸;vmax:视窗最大尺寸;相对视窗长度扩展阅读：流式布局不推荐使用固定单位，如px或是英寸。因为屏幕的宽高会随着设备的不同而改变。网站布局需要适应这种变化，而固定单位有太多的限制。幸运的是，Ethan指出用一个简单的公式，就可以在流式布局中使用相对值。
?
公式是用目标元素的宽度除以他父元素的宽度，结果就是目标元素的相对宽度：
?使用网格公式我们可以把固定长度换算成相对单位长度。这个例子中我们将使用百分比，他跟em有相同的效果。注意，不管容器变的多宽，section和aside之间的间距和宽度都会按照比例变化。
?采用流式布局概念和公式，把他们运用到网格的所有部分，就可以创建一个完全动态的网站了，它可以适应各种尺寸的设备。为了更好的控制流式布局，你也 可以使用最小宽度（min-width），最大宽度（max-width），最小高度（min-height）和最大高度（max-height），把他 们应用到容器元素(container)上。
?
仅仅有流式布局是不够的。有时浏览器的显示窗口宽度可能很小，以至于按照缩放比例得到的布局，创建出来的列太小不能有效的显示内容。具体说，就是当布局太小或是太大，内容可能难以辨认，布局也可能遭到破坏。在这种情况下，媒体查询就用来辅助建立一个更好的用户体验。
?
灵活网格扩展阅读CREATE A FLEXIBLE LAYOUTFLEXIBLE WEB DESIGNWriting a Flexible Grid Script for PhotoshopDon’t Overthink It GridsBlankwork:Simple, Flexible and Semantic5gridResponsive设计的十个基本技巧Mobile Responsive Design: The Flexible GridFlexibility: A Foundation for Responsive DesignGoing From Adaptive To Fully ResponsiveResponsive Web DesignGridpak: The Responsive Grid GeneratorFive steps to gettin’ flexy in responsive web design30+ CSS Grid System8个实用的响应式设计框架
?
媒体查询?
媒体查询是对媒体类型的一个扩展，因为经常发现目标设备自带样式，他为特定的浏览器和设备提供特殊的样式。能够为目标设备提供有针对性的样式，在响应式设计中发挥作用。
?
初始化媒体查询
?
有好几种方式使用媒体查询，在现有样式表中使用@media规则，或是在一个新样式表里使用@import规则，或是用link标签给html文档引用一个单独的样式表。通常推荐在现有样式表中使用@media规则，以避免多次发送http请求：
?
?
?上图是没有媒体查询的section和aside会变的很小。而太小可能不能装下真正的内容。??
?
?上图运用媒体查询去掉section和aside的宽度和浮动，使他们能够全屏显示，容许他们的内容占据所有空间。
?
断点识别
?
你的直觉可能告诉你在写媒体查询时，要根据常见的视窗尺寸设置断点，用以判断不同的分辨率，例如320px,480px,768px, 1024px, 1224px等等。但这是个坏主意。
?
在搭建响应式网站时，应该可以适应各种不同视窗尺寸，而不需要考虑设备的分辨率。设置断点只是在网站布局被破坏，看起来很怪或是内容无法显示的时候才需要设置。
?
此外，每时每刻都会有新设备和新分辨率在发布。而试图跟上这些变化可能是个无止境的过程。
?扩展阅读?
CSS3 Media QueriesCSS3 Media Queries模板Responsive设计和CSS3 Media Queries的结合CSS3 Media Queries在iPhone4和iPad上的运用iPads和iPones的Media QueriesCSS3 Media Queries案例——HicksdesignCSS3 Media Queries案例——A List ApartCSS3 Media Queries案例——Tee GalleryW3CPLUS上Media Queries教程集合media query ie8- 兼容实现总结CSS Media Queries & Using Available SpaceIntroduction to media queries – Part 1: What are media queries?http://www.adobe.com/devnet/dreamweaver/articles/introducing-media-queries-pt2.htmlMedia Queries (Windows)CSS Media QueriesMedia Queries Tutorial – Convert Burnstudio into a Responsive WebsiteBreaking Down Media Queries for Responsive Web DesignMedia Query splittingTechniques For Gracefully Degrading Media Queries
?
移动第一?
使用媒体查询中的一个先进技术，就是移动优先。移动优先方法是指，先在小视窗加载网站默认样式，然后再添加用媒体查询设置的视窗样式。
?
移动优先背后的操作理念就是，一个移动设备的用户，通常使用小视窗的设备，不应该加载pc机上面的所有样式，之后又加载为移动设备写的样式。如此一来浪费了带宽，而带宽对于任何搜索漂亮网站的用户来说，都是很宝贵的。
?
移动优先方法也提出为移动用户设置一定的限制。在不久的将来，大多数的网络消费将在移动设备上进行。所以理应为他们设计相应的移动体验。
?
移动优先的媒体查询可能如下：
?
?尽管这个demo里面有媒体查询，但是许多移动设备仍然不知道网站的初始宽度或是规模，所以也就无法解析媒体查询。
?
视窗宽高
?
使用视窗meta标签，那么视窗的宽高需要分别定义。每个值可以是正值或是关键字。高度属性用device-height表示，相应的宽度属性用device-width表示。这些关键字继承设备默认的宽高。
?
一个看上去很棒的网站的最好的处理方式，建议你使用设备高度和设备宽度作为设备默认值。
?
?让设备知道网站的预定宽度，在这种情况的设备宽度，容许应用媒体查询对网站的尺寸，做出适当调整。
?
视窗比例
?
如何控制一个网站在手机设备上的显示比例，可以通过minimum-scale, maximum-scale, initial-scale,和 user-scalable 四个属性来控制。
?
一个网站的初始比例应该设置为1，这样定义的比例是在设备高度和视窗高度之间，而竖屏时候，初始比例就是视窗尺寸。同样横屏的初始比例应该是在设备宽度和视窗宽度之间。视窗比例应该始终是0到10之间的正数。
?
?如果使用一个大于1的整数比例，使得缩放出的网站比默认比例还大，一般来讲，这个值就应该设置为1。
?
最大最小范围值是确定视窗可以缩放到多大或是多小。最小范围值是指一个小于等于初始比例的值，同理，最大范围值是指一个大于等于初始比例的值。但这两个值都应该是在0到10 之间。
?
一般来讲，这些值不必设置为相同的初始值。这将禁用缩放，所以完全可以用用户比例代替。设置用户比例不会禁用缩放，相反会自动开启缩放功能。
?
关闭一个网站的缩放功能是一个坏主意。他不利于残疾人按照他们的意愿浏览一个网站。
?
视窗分辨率
?
让浏览器决定如何缩放，一个基于任何视窗比例的网站，往往是奏效的。当需要更多的控制时，特别是在解决一个设备的分辨率，目标分辨率就派上用场了。 这个目标分辨率接受如下值，他们是device-dpi, high-dpi, medium-dpi, low-dpi,或是一个实际的 DPI大小。
?
目标分辨率（target-densitydpi）值很少使用，但是在需要控制像素尤其有用。
?
组合视窗值
?
视窗meta标签接受单独值也接受多个值，容许一次设置多个视窗属性。设置多个值要求他们之间用逗号分割。一个推荐的视窗值设置描述如下，同时使用设备宽度和初始比例属性。
?
?设备宽度和初始比例为1的组合视窗属性，就是提供一个初始尺寸和普遍的缩放比例要求。
?
Css视窗规则
?
因为视窗meta标签需要设置一个网站样式如何渲染，感觉头太重，所以推荐把他从html的meta标签中，移动到使用css样式中定义。这样有助于样式与内容分离，可以提供更多的定义。
?
目前一些浏览器已经实现了@viewport规则，可是并没有得到广泛的支持。前面推荐的视窗meta标签，在css中也许像下面@viewport这样定义
流式嵌入媒体
?
不幸的是最大宽度属性，并不是在所有的媒体上都运行良好，尤其是对于iframe和嵌入媒体。当涉及到第三方的网站，例如YouTube，那些使用iframe来嵌入媒体的，都会因为不起作用而失望。幸好，有个解决办法。
?
为了让嵌入媒体充分响应，嵌入元素需要在父元素中绝对定位。父元素需要宽度100%，这样缩放才能基于视窗宽度。父元素还需要一个为0的高度，是为了在ie下面触发haslayout。
?
在父元素底部设置留白，这个值也是依赖于视频的宽高比。他容许父元素的高度跟宽度使用相同的比例。还记得前面提到的响应式设计公式吗？如果一个视频 的宽高比是16比9，9除以16等于56.25%，所以底部需要一个56.25%的留白。底部留白而不是头部留白，这是专门用于处理ie5.5的bug， 还有父元素是绝对定位的情况。
?
?扩展阅读?
Rundown of Handling Flexible MediaResponsive Images: How they Almost Worked and What We NeedFLUID IMAGESHow To Create Flexible Images And Media In CSS LayoutsHow to style flexible images for RWDFlexible, dynamically resizing images with CSSCSS: Elastic Videos
