何为响应式网站？
现在很多人开发网站，首先说道的就是，要做响应式网站，那么什么响应式设计呢，吾趣设计现在就来告诉你
响应式设计是由著名网页设计师Ethan Marcotte在2010年5月提出的设计概念，随后席卷前端和设计领域，成为了如今网页设计的大趋势。正如同Ethan所说：“响应式网站设计提供了一种全新的选择，这种基于栅格布局和CSS3的流动性网页设计，可以让网页随着屏幕变化而响应。这是一种更为统一，更加全面的设计技巧，一种打破网页固有型态和限制的灵活设计方法。”
这种兼顾多屏幕多场景的灵活设计，这就是响应式设计令人着迷的所在。这一点和编程开发领域所追求的“一次编写，到处运行”有着异曲同工之妙。所以它在短短几年内迅速火起来，然后成为大趋势，可以说是意料之中，水到渠成。
1、响应式网页设计：它是什么以及如何使用
在本文中，您将了解如何根据屏幕尺寸、平台和方向来响应用户的行为和环境。
如今，几乎每个新客户都希望自己的网站有一个移动版本。毕竟，这实际上是必不可少的：一种设计适用于安卓手机，另一种适用于 iPhone、iPad、上网本和 Kindle，而且所有屏幕分辨率都必须兼容。未来五年，我们可能还需要为更多的发明进行设计。疯狂何时休？当然不会。
在网页设计和开发领域，我们很快就会跟不上层出不穷的新分辨率和新设备的步伐。对于许多网站来说，为每种分辨率和新设备创建一个网站版本是不可能的，至少是不切实际的。我们是否应该为了从另一种设备上获得访客而承受从一种设备上失去访客的后果？还是有其他选择？
响应式网页设计是指设计和开发应根据屏幕尺寸、平台和方向来响应用户的行为和环境。
这种做法包括灵活的网格和布局、图像以及对 CSS 媒体查询的智能使用。当用户从笔记本电脑切换到 iPad 时，网站应自动切换以适应分辨率、图像大小和脚本能力。用户可能还必须考虑设备上的设置；例如，如果用户在 iPad 上安装了 iOS VPN，网站就不应阻止用户访问页面。换句话说，网站应具备自动响应用户偏好的技术。这样，就不必为市场上的每一种新的小工具进行不同的设计和开发阶段。
但是，响应式网页设计不仅仅是可调整屏幕分辨率和自动调整图像大小，而是一种全新的设计思维方式。让我们来谈谈所有这些功能，以及正在酝酿中的其他想法。
调整屏幕分辨率
随着设备的增多，屏幕分辨率、定义和方向也各不相同。每天都有新的屏幕尺寸的设备被开发出来，每种设备都可以处理不同的尺寸、功能甚至颜色。有些是横向，有些是纵向，还有一些甚至是完全正方形。正如我们从 iPhone、iPad 和先进智能手机的日益普及中了解到的那样，许多新设备都能根据用户的喜好从纵向切换到横向。如何针对这些情况进行设计呢？
除了为横向和纵向进行设计（并使这些方向可能在页面加载时瞬间切换）外，我们还必须考虑数百种不同的屏幕尺寸。是的，我们可以将它们分为几大类，针对每一类进行设计，并使每种设计都具有必要的灵活性。但这可能会让人难以承受，谁知道五年后的使用数据会是怎样呢？此外，许多用户并不会最大化他们的浏览器，这本身就为屏幕尺寸的多样性留下了太多的空间。以下是一些最常见的设备：
此后，又有更多的设备问世。显然，我们无法继续为每一种设备定制解决方案。那么，我们该如何应对这种情况呢？
部分解决方案： 灵活的一切
几年前，当灵活布局对网站来说几乎是一种 "奢侈 "时，设计中唯一灵活的东西就是布局列（结构元素）和文本。图片很容易破坏布局，即使是灵活的结构元素，只要用力过猛，也会破坏布局的形式。灵活的设计其实并不灵活；它们可以有几百像素的变化，但往往无法从大电脑屏幕调整到上网本。
现在，我们可以让事情变得更加灵活。图片可以自动调整，而且我们有了变通方法，布局永远不会被破坏（尽管在这个过程中它们可能会被挤压得难以辨认）。虽然这并不是一个彻底的解决方案，但它为我们提供了更多的选择。它非常适合从纵向瞬间切换到横向的设备，或者当用户从电脑大屏幕切换到 iPad 时。
虽然从技术角度看，这一切都很容易实现，但并不是把这些功能插上就完事了。举个例子，看看这个设计中的徽标：
徽标示例中的图片被一分为二：背景图片被裁剪并保持其大小，另一张图片则按比例调整。
如果调整得太小，图像的质量就会很低，但重要的是要让网站名称清晰可见，不能将其裁剪掉。因此，图片被分为两幅：一幅（插图）作为背景，进行裁剪并保持其大小，另一幅（名称）按比例调整大小。
<h1 id="logo"><a href="#"><img src="site/logo.png" alt="The Baker Street Inquirer" /></a></h1>
上图中，h1 元素将插图作为背景，图片根据容器的背景（标题）对齐。
这只是让响应式网页设计真正有效的思维方式的一个例子。不过，即使有了这样的巧妙修正，布局也可能变得太窄或太短，看起来不合适。在上面的徽标示例中（虽然它也能使用），最理想的情况是不裁剪一半的插图，或者不让徽标太小以至于无法辨认和 "漂浮 "起来。
灵活的图像
响应式网页设计需要解决的一个主要问题是如何处理图片。按比例调整图片大小的技术有很多，而且很多都很容易实现。最流行的方法是使用 CSS 的最大宽度来轻松解决，这在 Ethan Marcotte 关于流动图像的文章中提到过，但最早是由 Richard Rutter 尝试的。
img { max-width: 100%; }只要没有其他基于宽度的图像样式覆盖此规则，每张图像都将以原始尺寸加载，除非查看区域变得比图像的原始宽度更窄。图片的最大宽度设置为屏幕或浏览器宽度的 100%，因此当 100%变窄时，图片也会变窄。从本质上讲，正如 Jason Grigsby 所说："流体图像背后的理念是，以最大尺寸提供图像。你不在代码中声明高度和宽度，而是让浏览器根据需要调整图片大小，同时使用 CSS 来引导图片的相对大小"。这是一种简单实用的调整图片大小的好方法。
需要注意的是，IE 不支持 max-width，但在 IE 专用样式表中使用 width: 100% 可以很好地解决这个问题。还有一个问题是，在 Windows 中的某些旧版浏览器中，如果图片调整得过小，渲染效果就会不那么清晰。不过，Ethan Marcotte 的文章中提供了一个 JavaScript 来解决这个问题。
虽然上述方法可以快速解决这个问题，也是响应式图片的良好开端，但图片的分辨率和下载时间应该是首要考虑因素。虽然为移动设备调整图片大小非常简单，但如果原始图片大小是为大型设备设计的，就会大大降低下载速度并占用不必要的空间。
停止调整 iPhone 模拟器图像大小 #
iPhone 和 iPod Touch 的一个好处是，网页设计会自动调整大小以适应小屏幕。除非另有说明，否则全尺寸的设计会按比例缩小，以适应狭小的浏览器，无需滚动或移动版本。这样，用户就可以根据需要轻松地放大或缩小。
不过，这个模拟器也带来了一个问题。当响应式网页设计兴起时，许多人注意到，即使图片是专为小屏幕设计的（或适合小屏幕），它们仍然会随着页面的比例变化而变化。这反过来又缩小了文字和其他元素的比例。
自定义布局结构 #
对于极端的尺寸变化，我们可能希望通过单独的样式表或更有效的 CSS 媒体查询来完全改变布局。这并不麻烦；大部分样式可以保持不变，而特定样式表可以继承这些样式，并通过浮动、宽度、高度等方式移动元素。
例如，我们可以使用一个主样式表（也是默认样式表）来定义所有主要结构元素，如 #wrapper、#content、#sidebar、#nav 以及颜色、背景和排版。还可以定义默认的灵活宽度和浮动。
如果样式表导致布局过窄、过短、过宽或过高，我们就可以检测到并切换到新的样式表。新的子样式表将采用默认样式表的所有内容，然后重新定义布局结构。
下面是 *style.css*（默认）的内容：
/* Default styles that will carry to the child style sheet */html,body{
background...
font...
color...}h1,h2,h3{}p, blockquote, pre, code, ol, ul{}/* Structural elements */#wrapper{
width: 80%;
margin: 0 auto;
background: #fff;
padding: 20px;}#content{
width: 54%;
float: left;
margin-right: 3%;}#sidebar-left{
width: 20%;
float: left;
margin-right: 3%;}#sidebar-right{
width: 20%;
float: left;}下面是 *mobile.css*（子版）的内容：
#wrapper{
width: 90%;}#content{
width: 100%;}#sidebar-left{
width: 100%;
clear: both;
/* Additional styling for our new layout */
border-top: 1px solid #ccc;
margin-top: 20px;}#sidebar-right{
width: 100%;
clear: both;
/* Additional styling for our new layout */
border-top: 1px solid #ccc;
margin-top: 20px;}
CSS3 支持与 CSS 2.1 相同的所有媒体类型，如屏幕、打印和手持设备，但增加了数十种新的媒体特性，包括最大宽度、设备宽度、方向和颜色。CSS3 发布后的新设备（如 iPad 和 Android 设备）肯定会支持媒体特性。因此，针对这些设备调用使用 CSS3 功能的媒体查询就可以正常工作，而如果使用不支持 CSS3 的旧电脑浏览器访问，则会被忽略。
CSS3 的新功能还包括方向（纵向与横向）、设备宽度、最小设备宽度等。有关根据这些媒体查询功能设置和限制宽度的更多信息，请参阅 "方向媒体查询"。
我们可以创建多个样式表，以及根据宽度范围定义的基本布局更改，甚至可以针对横向和纵向进行更改。请务必查看 Ethan Marcotte 文章中题为 "认识媒体查询 "的部分，以了解更多示例和更全面的解释。
多个媒体查询也可以直接放入一个样式表中，这是使用时最有效的选择：
* Smartphones (portrait and landscape) ----------- */@media only screenand (min-device-width : 320px)and (max-device-width : 480px) {/* Styles */}/* Smartphones (landscape) ----------- */@media only screenand (min-width : 321px) {/* Styles */}/* Smartphones (portrait) ----------- */@media only screenand (max-width : 320px) {/* Styles */}以上是 CSS 2.1 和 CSS3 中媒体查询如何发挥作用的几个示例。现在，我们来看看如何使用 CSS3 媒体查询创建响应式网页设计。其中许多用法都与当今的应用相关，而且在不久的将来也肯定会得到广泛应用。
min-width和max-width属性的作用与它们所建议的完全相同。min-width 属性设置了某组样式（或单独的样式表）适用的最小浏览器或屏幕宽度。如果任何内容低于该限制，样式表链接或样式将被忽略。最大宽度属性的作用正好相反。任何超过指定的最大浏览器或屏幕宽度的内容都将不适用于相应的媒体查询。
我们确实正在进入一个网页设计和开发的新时代。现在有太多的选择，将来也会有太多的选择，我们不可能继续为每一种屏幕尺寸、设备和技术进步调整和创建定制解决方案。我们应该在今天开启一个新时代：现在就创建为未来做好准备的网站。了解如何使设计响应用户需求并不需要太多的学习，而且比起学习如何为每一种可用的设备进行正确的设计和编码，这无疑可以减轻很多压力，提高工作效率。
响应式网页设计和上面讨论的技术并不是应对瞬息万变的移动世界的最终答案。响应式网页设计只是一个概念，如果实施得当，可以改善用户体验，但不能完全解决每个用户、设备和平台的问题。随着未来几年技术的不断发展，我们需要不断使用新的设备、分辨率和技术来持续改善用户体验。
除了让我们免于挫折，响应式网页设计对用户来说也是最好的。每一个定制解决方案都能带来更好的用户体验。有了响应式网页设计，我们就可以在更多的设备上为更多的用户定制解决方案。一个网站既可以为使用旧笔记本电脑或设备的用户量身定制，也可以为使用时下最流行小工具的绝大多数用户量身定制，同样也可以为现在和未来拥有最先进小工具的少数用户量身定制。响应式网页设计为每个人创造了绝佳的定制体验。作为网页设计师，我们每天都在为每个项目努力，不是吗？
