在先前的文章中，我讨论了为什么Web准备就绪以进行响应式设计 ，以及网站所有者如何使用用户设备和屏幕空间的上下文来为各种尺寸的屏幕（包括PC，电话）的用户提供上下文相关的体验。和控制台。
在本文中，我将介绍一些用于构建响应式站点布局和体验的最常见的实践。 我将介绍新兴的和可用的网站布局技术，这些技术可以根据屏幕空间灵活地调整大小（称为“流体网格”），以确保用户在使用的任何屏幕尺寸上都能获得完整的体验。 此外，我将展示如何呈现富媒体（尤其是图像），以及开发人员如何确保小屏幕设备上的访问者不会为高质量媒体带来额外的带宽成本。
当您使用我描述的某些技术时，可以通过以下几种方法来测试您的网站在不同设备分辨率下的外观：
- 本杰明·基恩（Benjamin Keen）具有响应式Web设计书签 ，您可以将其添加到所选浏览器的“收藏夹”栏（或“书签”栏）中。 您可以单击此书签，以不同的分辨率测试网站布局。
- 如果您使用的是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屏幕上的外观来说，这是一个很好的代理。
- 最后，您可能会做很多在图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所示的简单示例，该示例具有以下设计要求：
- 跨屏幕宽度的#header。
- #mainContent div占屏幕宽度的60％。
- #sideContent div占屏幕宽度的40％。
- #mainContent和#sideContent之间的固定间距为20像素。
- #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互联网访问您的站点的人数不断增加，从而获得快速，响应迅速的站点体验。
使用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上也可以在浏览器中使用）：
- 允许开发人员指定在DOM准备就绪之前应该加载哪些图像（页面内容必须具有图像）。
- 允许开发人员指定仅在页面其余部分就绪后才加载哪些图像（例如，幻灯片中的图像仅在10秒后切换）。
- 允许开发人员确定在调整浏览器大小时是否应下载并交换新图像。
该博客文章详细介绍了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开发社区仍在评估技术，以解决响应式设计领域中新出现的挑战。 例如，W3C的HTML工作组正在评估竞争性提案（即srcset属性提案和图片元素提案 ），以处理图像选择和下载以用于高质量显示器（例如，显示相同参考的视网膜显示器笔记本电脑）像素尺寸作为其前身，但使用更高的硬件像素数）。
尽管如此，此处描述的技术仍应可在所有现代浏览器上使用，并允许您确保访问您网站的用户都拥有出色的体验，无论他们来自哪种设备。 如今，消费者对于智能手机，平板电脑，PC和控制台有多种购买选择，并且硬件格局在不断变化和发展。 您想确保自己的网站已准备好在2013年及以后处理来自热门新设备的流量。
本文是Internet Explorer团队的HTML5技术系列的一部分。 通过3个月的免费BrowserStack跨浏览器测试@ http://modern.IE来尝试本文中的概念。
最初发布于： http : //msdn.microsoft.com/en-us/magazine/dn217862.aspx 。 经许可重新发布。
From: https://www.sitepoint.com/common-techniques-in-responsive-web-design/
765
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
