响应式网页设计

在先前的文章中，我讨论了为什么Web准备就绪以进行响应式设计 ，以及网站所有者如何使用用户设备和屏幕空间的上下文来跨各种尺寸的屏幕（包括PC，电话） 为用户提供上下文相关的体验。和控制台。

在本文中，我将介绍一些用于构建响应式站点布局和体验的最常见的实践。 我将介绍新兴的和可用的网站布局技术，这些技术可以根据屏幕空间灵活地调整大小（称为“流体网格”），以确保用户在使用的任何屏幕尺寸上都能获得完整的体验。 此外，我将展示如何呈现富媒体，尤其是图像，以及开发人员如何确保小屏幕设备上的访问者不会为高质量媒体带来额外的带宽成本。

当您使用我描述的某些技术时，可以通过以下几种方法来测试您的网站在不同设备分辨率下的外观：

1. 本杰明·基恩（Benjamin Keen）具有响应性的Web设计书签 ，您可以将其添加到所选浏览器上的收藏夹栏（或书签栏）中。 您可以单击此书签，以不同的分辨率测试网站布局。
2. 如果您使用的是Windows 8，则始终可以通过使用Windows 8捕捉模式在Internet Explorer 10上测试页面布局。 在Windows 8中，您可以在全屏（全屏模式）上使用Internet Explorer 10，也可以通过将浏览器停靠在快照模式下来执行多任务，在此模式下它可以模拟智能手机浏览器的布局特征。 此外，您可以将浏览器停靠在填充模式下，在默认Windows 8屏幕尺寸为1366 x 768 px的情况下，浏览器占据1024 x 768像素（px）。 对于您的网站在iPad屏幕以及传统的4：3屏幕上的外观来说，这是一个很好的代理。
3. 最后，您可能会做很多在图1中看到的操作（图片由Reddit.com提供）。

图1.响应式Web设计的基本测试

媒体查询

传统上，开发人员依靠嗅探浏览器的用户代理字符串来识别用户是从PC还是移动设备访问站点。 通常，这样做之后，他们会将用户重定向到提供几乎相同内容但布局和信息设计不同的不同子站点。 例如，过去，访问MSN.com的用户可以通过重定向到http://m.msn.com来查看传统的PC体验或获得特定于硬件的移动体验。

但是重定向需要两个单独的工程工作。 此外，此方法针对两种屏幕布局 （移动宽度为320像素的移动设备和桌面宽度为1024像素的桌面）进行了优化。 对于从中等大小的设备（例如平板电脑）访问的用户以及屏幕明显更大的用户，它并不能智能地提供出色的体验。

CSS3希望通过引入媒体查询来帮助Web开发人员将内容创建 （其页面标记以及HTML和JavaScript中的功能）与该内容的呈现分开，并完全在CSS中处理不同维度的布局。

媒体查询是开发人员编写CSS3样式表并为所有UI元素声明样式的一种方式，这些条件取决于屏幕大小，媒体类型和屏幕的其他物理方面。 使用媒体查询，可以通过询问浏览器有关因素，例如设备宽度，设备像素密度和设备方向，为同一标记声明不同的样式。

但是即使使用CSS3，也很容易陷入为相同的网页标记构建三种不同的固定宽度布局以针对当今常见的屏幕尺寸（台式机，平板电脑和手机）的陷阱。 但是，这并不是真正的响应式Web设计 ，并且不能为所有设备提供最佳体验。 媒体查询是提供真正响应的Web布局的解决方案的一部分 。 另一个是按比例缩放以填充可用屏幕的内容。 稍后再解决。

“像素”又意味着什么？

该像素已经用于Web设计和布局已有一段时间了，并且传统上是指用户屏幕上能够显示红蓝绿点的单个点。 基于像素的Web设计一直是进行Web布局的实际方法，用于声明Web页面各个元素的尺寸以及版式。 这主要是因为大多数站点在其标题，导航和其他页面UI元素中都使用了图像，并选择了具有固定像素宽度的站点布局，在这些布局中，它们的图像看起来很棒。

但是，最近出现的高像素密度屏幕和视网膜显示器为该术语增加了另一层含义。 在当代Web设计中，像素（即我们刚刚讨论的硬件像素）不再是屏幕可以呈现的单个最小点。

在iPhone4上访问一个网站，其640 x 960 px的硬件屏幕将告诉您的浏览器其320 x 480 px。 这可能是最好的，因为您不希望将640像素宽的文本列插入仅2英寸宽的屏幕。 但是iPhone屏幕和其他高密度设备强调的是我们不再为硬件像素开发。

W3C将参考像素定义为在距读取器一臂之遥的密度为96 ppi的设备上1 px的视角。 除了复杂的定义，所有这些都意味着，当您为现代的高质量屏幕设计时，您的媒体查询将响应参考像素，也称为CSS像素 。 CSS像素的数量通常会少于硬件像素的数量，这是一件好事！ （请注意：硬件像素是大多数设备制造商用来宣传其高质量手机，平板和视网膜显示器的广告，它们会使CSS误入歧途。）

硬件像素与CSS 像素的比率称为设备像素比率 。 较高的设备像素比率仅意味着每个CSS像素都由更多的硬件像素渲染，这使您的文本和布局看起来更清晰。

维基百科按像素密度列出了最近显示的大量列表，其中包括设备像素比率。 如果需要，您始终可以使用CSS3媒体查询来标识设备像素比率，因此：

/*Note that the below property device pixel ratio might need to be vendor-prefixed for some browsers*/
@media screen and (device-pixel-ratio: 1.5)
{
/*adjust your layout for 1.5 hardware pixels to each reference pixel*/
}
@media screen and (device-pixel-ratio: 2)
{
/*adjust your layout, font sizes etc. for 2 hardware pixels to each reference pixel*/
}

还有一些开放源代码库，使开发人员可以使用JavaScript在各种浏览器上计算设备像素比率，例如Tyson Matanich的 GetDevicePixelRatio 。 请注意，此结果仅在JavaScript中可用，但可用于优化图像下载，以使高质量的图像（文件较大）不会下载到非视网膜显示器上。

但是， 不建议您使用设备像素比率来定义页面和内容布局。 尽管参考像素与硬件像素之间的差异可能令人困惑，但很容易理解为什么这对于为用户提供更好的体验至关重要。 iPhone 3GS和iPhone 4的物理屏幕尺寸大致相同，并且具有相同的使用模式，因此，有理由认为文本块的物理尺寸大致相同。

同样，仅因为您的高清电视具有1920 x 1080 p的屏幕，这并不意味着网站应以此原始分辨率呈现内容。 用户坐在离电视几英尺远的地方，并且还使用不精确的输入机制（例如操纵杆）与之交互，因此电视浏览器最好将多个硬件像素打包为一个参考像素。 只要您为桌面浏览器设计的站点布局为960像素宽，无论您的电视是1080p还是720p的旧型号，该站点都将看起来可比并且可以使用。

根据一般经验，这些设备上的文字内容会更好看。 但是，您的图像内容可能看起来像素化和模糊。 因此，从实际的角度来看，当您尝试在高像素密度的屏幕上向用户提供高质量的摄影/图像数据时，设备像素比率最为重要。 此外，您想确保您的用户喜欢的新手机上的品牌徽标看起来清晰。 在本文的后面，我将讨论实现响应图像的技术，并指向一些可以解决此问题的现有JavaScript库。

继续进行操作时，我将使用“ 像素 ”一词来表示参考像素，并根据需要明确调用硬件像素。

响应性地扩展您的网站布局

基于网格的布局是网站设计的关键组成部分。 您访问的大多数站点都可以很容易地显示为页面组件的一系列矩形，例如标题，站点导航，内容，侧边栏，页脚等。

理想情况下，在设计响应站点时，我们希望使网格布局与用户的屏幕尺寸无关 。 这意味着我们希望我们的布局和内容能够缩放到尽可能大的屏幕空间（在合理范围内），而不是提供两个或三个固定宽度的布局。

移动优先设计

正如我在本系列的第一篇文章中指出的那样，全球Web流量的12％以上来自移动设备。 在智能手机普及率较高的国家，这一比例要高得多，随着亚洲，拉丁美洲和非洲的采用率回升，预计在未来几年中这一比例将显着增加。

此外，采用移动优先的方法进行网站设计是信息设计中的一个很好的练习。 基本上，它可以帮助您确定要在网站的移动版本上提供的内容和功能的优先级，然后逐步增强大型设备的网站布局。 这样一来，您可以确保用户在移动设备上获得宝贵的体验，而不仅仅是桌面体验，这是您可以利用的。如果有的话，您还可以利用其他不动产来提供更具视觉吸引力的体验，并导航到其他“第二层”内容。

案例研究：重新设计的Microsoft.com

当您通过手机访问microsoft.com或缩小PC浏览器的宽度（屏幕宽度小于540像素）时，您会看到单个英雄图像是一次触摸友好，视觉丰富的幻灯片放映的一部分，该放映广告一次宣传一种产品。 （请参见图2。 ）顶部的产品在“发现”部分中突出显示。 附加导航位于折叠下方或手风琴式菜单中，默认情况下该菜单处于折叠状态，当用户点击列表图标时会显示该菜单。 同样，默认情况下，搜索框是隐藏的，以节省屏幕空间，用户需要点击搜索图标。 这样，移动版式将顶级产品和链接显示在另一个产品之下，并且仅需要垂直平移。 折叠下方的内容和产品链接从上到下优先。

图2.专为手机设计的Microsoft.com

一旦视口的宽度超过540 px（此时我们可以假定用户不再是在手机上而是在平板电脑或低分辨率PC上查看站点），您会注意到第一个布局更改（ 图3 ） 。 默认情况下，搜索框现在是可见的，而顶级导航以前是隐藏在列表图标下的。 现在，“发现”部分中的产品以一行显示，因为它们适合可用宽度。 最重要的是，请注意，在此过渡中，英雄图像始终占据屏幕的可用宽度。

图3.超过540 px后的Microsoft.com

如图4所示，下一个布局更改发生在640 px或更高的宽度上。 与往常一样，英雄图像会占据所有可用的屏幕宽度。 “工作”部分中的各个项目并排布置。 额外的空间还可以使英雄图像的标题与图像和动作保持一致，非常醒目。

图4. 640像素或更高像素处的布局更改

最后的布局更改发生在900 px或更高的屏幕宽度上（ 图5 ）。 “发现”菜单浮动到左侧以利用可用的水平空间，从而减少了垂直滚动的需要。

图5.屏幕宽度为900 px或更高时的布局

最后，最重要的是，页面布局（尤其是英雄形象）将继续缩放并填充可用的水平空间 （直到1600 px），以最大程度地发挥视觉糖果的效果（ 图6 ）。 实际上，对于200像素到1600像素之间的所有屏幕宽度都是这种情况-英雄图像的侧面绝不会浪费任何空白。 （类似地，“发现”和“工作”部分的相对布局不会改变，但是图像也会成比例地缩放。）

图6.以更高的分辨率最大化影响

响应式布局技术

太好了，那么我们如何实现这种体验？ 通常，网站的自适应布局可归结为两种技术：

• 确定需要更改布局的断点。
• 在断点之间，按比例缩放内容。

让我们独立地研究这些技术。

在断点之间按比例缩放内容

如对microsoft.com的评估所指出的，对于900 px或更高的屏幕宽度，首页上标头，英雄图像，导航区域和内容区域的相对布局不会更改。 这很有价值，因为当用户在1280 x 720的显示器上访问该网站时，他们看不到900像素宽的网站，其中超过25％的屏幕在左右边缘留有空白。

同样，两个用户可能会访问该站点，一个用户使用480 x 320 px分辨率（以CSS像素为单位）的iPhone 4，另一个用户使用640 x 360 px分辨率的Samsung Galaxy S3。 对于宽度小于512像素的任何布局，microsoft.com都会按比例缩小布局，以便对于两个用户，整个移动浏览器都将致力于Web内容而不是空白，无论他们是以纵向还是横向模式查看网站。

有两种方法可以实现这一点，包括CSS3流体网格建议 。 但是，主要浏览器尚不支持此功能。 您可以在Internet Explorer 10（带有供应商前缀）上看到此功能，并且MSDN 在此处和此处都提供了CSS3网格实现的示例。

同时，我们将使用基于百分比的宽度的久经考验的方法来实现流体网格布局。 考虑图7所示的简单示例，该示例具有以下设计要求：

1. 跨屏幕宽度的#header。
2. #mainContent div占屏幕宽度的60％。
3. #sideContent div占屏幕宽度的40％。
4. #mainContent和#sideContent之间的固定间距为20像素。
5. #mainImage img元素占据#mainContent内部的所有可用宽度，但周围不包含固定的10像素装订线。

图7.设置流体网格

该页面的标记如下所示：

<!doctype html>
<html>
<head>
<title>Proportional Grid page</title>
<style>
body {
/* Note the below properties for body are illustrative only.
Not needed for responsiveness */
font-size:40px;
text-align: center;
line-height: 100px;
vertical-align: middle;
}
#header
{
/* Note the below properties for body are illustrative only.
Not needed for responsiveness */
height: 150px;
border: solid 1px blue;
}
#mainContent {
width: 60%;
float: right;
/*This way the mainContent div is always 60% of the width of its
parent container, which in this case is the  tag that defaults to
100% page width anyway */
background: #999999;
}
#imageContainer {
margin:10px;
width: auto;
/*This forces there to always be a fixed margin of 10px around the
image */
}
#mainImage {
width:100%;
/* the image grows proportionally with #mainContent, but still
maintains 10px of gutter */
}
#sideContentWrapper {
width: 40%;
float: left;
}
#sideContent {
margin-right: 20px;
/* sideContent always keeps 20px of right margin, relative to its
parent container, namely #sideContentWrapper. Otherwise it grows
proportionally. */
background: #cccccc;
min-height: 200px;
}
</style>
</head>
<body>
<div id="header">Header</div>
<div id="mainContent">
<div id="imageContainer">
<img id="mainImage" src="microsoft_pc_1.png" />
</div>
Main Content
</div>
<div id="sideContentWrapper">
<div id="sideContent">
Side Content
</div>
</div>
</body>
</html>

维基百科的页面采用了类似的技术。 您会注意到，文章的内容似乎总是适合可用的屏幕宽度。 最有趣的是，侧边栏（左侧导航栏以及带有HTML5标志的右侧列）具有固定的像素宽度，似乎“粘”在屏幕的相应侧面。 带有文本内容的中心区域会根据屏幕尺寸而增大和缩小。 图8和图9显示了示例。 请注意，侧边栏保持固定的宽度，并且中心剩余文本内容的可用宽度按比例缩放。

图8.宽1920像素的显示器上的维基百科

图9.宽800像素的显示器上的Wikipedia

对于左侧具有固定导航菜单的站点，这种效果可以通过以下代码轻松实现：

<!DOCTYPE html>
<html>
<head><title>Fixed-width left navigation</title>
<style type="text/css">
body
{
/* Note the below properties for body are illustrative only.
Not needed for responsiveness */
font-size:40px;
text-align: center;
line-height: 198px;
vertical-align: middle;
}
#mainContent
{
margin-left: 200px;
min-height: 200px;
background: #cccccc;
}
#leftNavigation
{
width: 180px;
margin: 0 5px;
float: left;
border: solid 1px red;
min-height: 198px;
}
</style>
</head>
<body>
<div id="leftNavigation">Navigation</div>
<div id="mainContent">SomeContent</div>
</body>
</html>

根据断点更改页面布局

比例缩放只是解决方案的一部分-因为我们不希望将电话和其他小屏幕设备的所有内容均等地缩放。 在这里，我们可以使用CSS3媒体查询来逐步增强我们的网站体验，并随着屏幕尺寸的增大而添加其他列。 同样，对于较小的屏幕宽度，我们可能会使用媒体查询来隐藏整个低优先级内容块。

MediaQueri.es是浏览站点的绝佳资源，以了解站点在其断点处发生了哪些布局更改。 考虑图10所示的Simon Collision的示例。

图10.不同屏幕尺寸的Simon Collision

我们可以使用CSS3媒体查询获得类似的体验。 让我们研究图11中所示的简单示例，其中有四个div：＃red，＃green，＃yellow和#blue。

图11. CSS媒体查询示例

这是示例代码：

<!doctype html>
<html>
<head>
<title>Break points with media queries</title>
<style type="text/css">
/* default styling info*/
/* four columns of stacked one below the other in a phone layout */
/* remember to plan and style your sites mobile-first */
#mainContent
{
margin: 40px;
}
#red, #yellow, #green, #blue
{
height: 200px;
}
#red
{
background: red;
}
#green
{
background: green;
}
#yellow
{
background: yellow;
}
#blue
{
background: blue;
}
@media screen and (max-width:800px) and (min-width:540px)
{
/* this is the breakpoint where we transition from the first layout, of
four side-by-side columns, to the square layout with 2X2 grid */
#red, #blue, #green, #yellow {
width:50%;
display: inline-block;
}
}
@media screen and (min-width:800px)
{
/*custom styling info for smartphones small screens;
All columns are just displayed one below the other */
#red, #yellow, #green, #blue {
width: 25%;
display: inline-block;
white-space: nowrap;
}
}
</style>
</head>
<body>
<div id="mainContent">
<div id="red"></div><div id="green"></div><div id="yellow"></div><div id="blue"></div>
</div>
</body>
</html>

通常，您不需要从头开始编写此类样式表。 毕竟，什么是Web开发而不利用现有的可用的开放源代码框架呢？ 现有的网格布局框架，例如Gumby框架 （建立在Nathan Smith的经过验证的960gs之上）和Skeleton框架 ，已经提供了开箱即用的支持，可以根据可用屏幕对网格列数进行重新排序宽度。 另一个很好的起点，特别是对于Wikipedia风格的布局，是简单命名的CSS Grid 。 这为用户提供了标准的固定宽度的左侧导航栏，当屏幕分辨率转换为平板电脑和智能手机的分辨率时，该导航栏将消失，从而为您提供单列布局。

更多媒体查询

根据站点设计的需要，在做出CSS决定之前，可能需要有关设备/视口的其他数据。 媒体查询使您也可以在浏览器中轮询其他属性，例如：

• 设备的宽度和高度 。 这是一组有用的属性，不仅可以获取浏览器可用的宽度， 还可以获取设备的整体宽度， 从而可以深入了解设备的外形尺寸。
• 设备的宽度和方向 （纵向与横向）。
• 浏览器宽高比和设备宽高比 。

其他定义在这里 。

之前，我们分解了响应式布局的两个组件，以检查它们是如何实现的。 重要的是要记住，真正的响应式布局是设备不可知的-即未针对特定设备宽度进行优化-因此是两种技术的结合。

图片和照片

图像在Web上用于照片内容和样式（用于背景纹理，自定义边框以及阴影和图标）。 图像使Web变得美丽，我们当然希望我们的站点看起来丰富并吸引所有用户。 但是，围绕图像的最大担忧可以说与用户体验的最重要部分有关， 即性能和页面加载时间。

图像的带宽影响

我们的网站以HTML，CSS和JavaScript等文本形式提供。 通常，这些文件下载所需的时间不会超过50 KB。 图片和其他媒体通常是我们页面中最耗带宽的部分。 新闻站点首页上的所有图像最多可以添加几兆字节的内容，浏览器在渲染页面时必须下载这些内容。 此外，如果所有图像内容都来自单独的文件，则每个单独的图像文件请求都会导致额外的网络开销。 对于在3G网络上访问您的网站的人来说，这不是一个很好的体验，尤其是如果您希望提供精美的8兆像素全景风景背景。 此外，您的用户的320 x 480像素电话不会对这种高质量的图像内容产生影响。 因此，如何确保用户在手机上获得快速响应的体验，然后可以在大型设备上扩展到更丰富的媒体体验？

请考虑以下技术，可以结合使用以下技术，以节省数百（甚至更多）字节的用户图像下载量，并提供更好的性能体验。

可以用CSS替换图像吗？

CSS3可以帮助Web开发人员避免在很多常见情况下完全使用图像。 过去，开发人员使用图像来实现简单的效果，例如带有自定义字体的文本，阴影，圆角，渐变背景等。

大多数现代浏览器（Internet Explorer 10，Google Chrome，Mozilla Firefox和Safari）都支持以下CSS3功能，开发人员可以使用这些功能来减少用户访问网站时所需的图像下载数量。 同样，对于较旧的浏览器，许多这些技术会自然退化（例如，圆角边框只让位于Internet Explorer 8及更早版本上的正方形边框让步），这样，您的网站仍然可以在较旧的浏览器上正常工作并可以使用。

• 使用@ font-face的自定义字体支持。 使用CSS3，您可以将自定义字体上载到您的网站（只要您拥有这样做的许可证），然后在样式表中指向它们即可。 您不需要创建图像来捕获页面标题和标题，也不需要为影响力的标题和标题嵌入自定义字体
• 背景渐变。 转到许多热门网站，您会注意到该网站的背景通常是渐变颜色，这有助于页面显得不太“平坦”。 可以通过CSS3轻松实现， 如此处所示 。
• 圆角。 CSS3允许您为HTML元素的四个角中的每个声明性地指定边框半径 ，而不必依赖于那些令人讨厌的20 x 20 px的圆圈图像来在您的网站设计上创建一个圆形框。
• 2D转换。 CSS3允许您声明2-D转换，例如translate（），rotate（），skew（）等，以更改标记的外观。 IETestDrive 在这里有一个很好的工作示例 。 常见的转换（例如旋转）可能会减少图像下载的数量。
• 框阴影和文本阴影。 现代浏览器支持box-shadow和text-shadow ，它们使站点开发人员可以使内容看起来更立体，并在重要的内容（例如标题文本，图像，浮动菜单等）中突出显示

其中一些属性除了标准实现外，可能还需要特定于浏览器的实现（使用供应商前缀）。 HTML5Please是一种方便的资源，用于标识是否需要为CSS3使用其他供应商前缀。

现在，为了公平起见，使用旧版浏览器访问您的网站的用户将看到功能实用但美学程度较低的网站内容。 但是，这里要权衡一下，以确保通过最先进的移动设备和3G互联网访问您的站点的人数不断增加，从而获得快速，响应Swift的站点体验。

使用JavaScript为正确的上下文下载正确的图像大小

如果您的站点体验固有地依赖于图片，则您需要一种可在各种设备和网络条件范围内扩展的解决方案，以便为用户提供使用他们所使用设备时的引人入胜的体验。 这意味着在高品质的电影院显示器上，您想让观众惊叹于高品质（即大文件大小）的图像。 同时，您不希望在具有计量3G数据连接的4英寸手机屏幕上向用户展示1600 x 1200 px的照片。

当W3C正在研究如何为给定图片声明不同图像源的建议时，一些新兴JavaScript技术可以帮助您立即开始使用。

媒体查询监听器

现代浏览器支持媒体查询监听器。 他们让开发人员使用JavaScript来验证是否满足某些媒体查询条件，并相应地决定下载哪些资源。

例如，假设您的网页上有某人张贴的照片。 作为开发人员，您需要做两件事：

• 确定用于显示高质量（大屏幕体验）或小屏幕体验的阈值（或断点），然后根据该决定，下载高质量的资源集或低带宽的资源集。 在加载时包括以下脚本，以确保您的页面下载适当的资产集并为用户提供正确的体验：

var mediaQueryList = window.matchMedia("(min-width:480px)");
//NOTE: for IE10 you will have to use .msMatchMedia, the vendor-prefixed implementation
//instead
isRegularScreen = mediaQueryList.matches;
//this returns a Boolean which you can use to evaluate whether to use high-quality assets or
//low-bandwidth assets
if (isRegularScreen)
{
//run script to download the high-quality images
}
else
{
//the condition has failed, and user is on smartphone or snap-mode
//run script to download low-bandwidth images
}

• （可选）添加事件侦听器，以监视媒体大小的更改，以便在用户调整其浏览器窗口的大小时，您可以运行不同的脚本集以根据需要获取高质量的资源。 例如，用户可能首先在Windows 8上以320像素宽度的快照模式访问您的站点。 稍后，用户可能会发现您的内容有趣，并以全模式打开浏览器（甚至共享她在HDTV上看到的内容。）此时，您可能希望为媒体提供更好的体验：

mediaQueryList.addListener(mediaSizeChange);
function mediaSizeChange(mediaQueryList)
{
//Executed whenever the media query changes from true to false or vice versa
if(mediaQueryList.matches)
{
//run script to acquire high-quality assets;
}
else{
//in this case the user has gone from a large screen to small screen
//by resizing their browser down
//if the high-quality images are already downloaded
//we could treat this as a no-op and just use the existing high-quality assets
//alternatively, if the smaller image shows a clipped version of the high-quality image
//trigger the download of low-bandwidth images
}
}

定制JS库

当然，也可以使用自定义库来帮助您。 这些库以类似的方式工作，方法是识别用户设备的大小和分辨率，然后通过网络即时交付按比例缩小版本的源映像。 这里有些例子：

• Filament Group重新设计了Boston Globe网站以使其具有响应能力， 此处提供了一项可用的技术，该技术要求您向站点添加一些JavaScript文件并更改站点的.htaccess文件。 然后，为每个<img>标签提供一个常规大小的版本以及一个高分辨率版本，其余部分由它们的插件来处理。

<img src="smallRes.jpg" data-fullsrc="largeRes.jpg">

• AdaptiveImages.com上提供了类似的技术。 此技术的好处在于，它不需要开发人员手动编码其标记以指向低分辨率和高分辨率图像，也不需要开发人员手动上传同一图像的两个不同版本。

泰森·马塔尼奇（Tyson Matanich）已公开提供Polyfill代码库 ，这是microsoft.com在前面详细介绍的自适应重新设计中使用的技术。 泰森还在他的博客文章中阐明了Polyfill库中可用功能的背后原理。 泰森和他的团队为Polyfill代码库所做的一些优化包括以下内容（即使在Internet Explorer 6上也可以在浏览器中使用）：

该博客文章详细介绍了Polyfill API中已向开发人员公开的所有优化。

文本

网站使用文本以两种主要方式将组织和内容传达给用户，即正文和标头文本。 仔细考虑您的网站将如何在不同上下文中扩展这些资源绝对有价值。

如果您的网站上有用户消费的文章，博客文章和大量书面内容，则正文尤其有趣。 您的移动用户希望在其台式机，电视和320像素宽的屏幕上阅读相同的500字文章，并且作为站点开发人员，您希望兼顾可读性和便利性（即不必滚动太多）。 可以放大文章的宽度以匹配屏幕尺寸，但除此之外，您可以提供更大的字体和更佳的行距，从而进一步提高屏幕更大用户的可读性。

当每行包含大约66个字符时，文本块通常是最易读的，因此，如果您的站点确实依赖于长篇文章的可读性，则响应式优化用户的类型可以真正改善他们的整体体验。

以下示例使用CSS3媒体查询max-width逐步增加段落文本的可读性：

/* pack content more tightly on mobile screens to reduce scrolling in really long articles */
p {
font-size:0.6em;
line-height: 1em;
letter-spacing: -0.05em;
}
@media screen and (max-width:800px) and (min-width:400px)
{
/* intermediate text density on tablet devices */
p
{
font-size:0.8em;
line-height: 1.2em;
letter-spacing: 0;
}
}
@media screen and (min-width:800px)
{
/* text can be spaced out a little better on a larger screen */
p
{
font:1em 'Verdana', 'Arial', sans-serif;
line-height: 1.5em;
letter-spacing:0.05em;
}
}

AListApart.com与响应缩放类型的文章的一个很好的例子在这里 。

此外，您的网站可能使用标题来拆分内容，从而使正在您的网站页面中浏览的用户更容易快速识别信息和功能的结构。 网站通常使用影响较大的标题，并增加边距和填充。

HTML的标头（特别是<h1>，<h2>和类似的标记）通常会自动设置样式，不仅使用大字体大小属性，而且还会设置宽敞的页边距和内边距以确保它们脱颖而出并中断内容流。

使用类似的技术，您可以考虑缩小用于标题的文本大小，边距，填充和其他间距属性，具体取决于可用设备的不动产。 您也可以使用可用的开源解决方案（例如FitText ）来实现此目的。

优化表单字段

如果您的网站要求用户填写表单，则可能需要确保可以最大程度地减少触摸用户的交互。 如果您有很多文本输入，则这尤其重要。

HTML5扩展了<input>标记的type属性，以使开发人员可以向文本框添加语义。 例如，如果用户正在填写联系表，则可以将输入的电话号码标记为<input type =“ tel” />，将电子邮件地址字段标记为<input type =“ email” /> 。

现代浏览器（尤其是触摸设备上的浏览器）将解析此属性，并相应地优化触摸屏键盘的布局。 例如，当用户点击电话号码字段时，浏览器的触摸键盘将突出显示小键盘，而当用户点击电子邮件地址字段时，触摸键盘将显示@键以及.com键尽量减少打字。 这是一个很小的调整，可以真正改善您通过触摸屏手机和平板电脑访问的用户在网站上填写表格的整体体验。

结语

在本文中，我介绍了用于处理响应式设计的最常见方案的策略，例如处理网格布局，带宽敏感的图像缩放以及文本和表单字段的优化。 值得注意的是，Web开发社区仍在评估技术，以解决响应式设计领域中新出现的挑战。 例如，W3CHTML工作组正在评估竞争性提案（即srcset属性提案和图片元素提案 ），以处理图像选择和下载以用于高质量显示器（例如，显示相同参考的视网膜显示器笔记本电脑）像素尺寸作为其前身，但使用更高的硬件像素数）。

尽管如此，此处描述的技术仍应可在所有现代浏览器上使用，并允许您确保访问您网站的用户都拥有出色的体验，无论他们来自哪种设备。 如今，消费者对于智能手机，平板电脑，个人电脑和游戏机有多种购买选择，并且硬件格局也在不断变化和发展。 您希望确保自己的网站已准备好在2013年及以后处理来自热门新设备的流量。

---

本文是Internet Explorer团队HTML5技术系列的一部分。 Try-out the concepts in this article with 3 months of free BrowserStack cross-browser testing @ http://modern.IE .

Originally published at: http://msdn.microsoft.com/en-us/magazine/dn217862.aspx . Re-published with permission.

翻译自: https://www.sitepoint.com/common-techniques-in-responsive-web-design/

响应式网页设计