web响应式网页设计与应用分析

本篇内容介绍了“web响应式网页设计与应用分析”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！

10年积累的成都网站设计、成都网站建设、外贸网站建设经验，可以快速应对客户对网站的新想法和需求。提供各种问题对应的解决方案。让选择我们的客户得到更好、更有力的网络服务。我虽然不认识你，你也不认识我。但先做网站后付款的网站建设流程，更有索县免费网站建设让你可以放心的选择与我们合作。

响应式Web设计(Responsive Web design)，理念是设计和开发应根据屏幕的大小、平台的用户的行为和环境基础上自动调整；他应该有一个灵活的网格和布局，图像和CSS能够智能的组合使用。比如说用户从电脑切换到ipad，网站能够自动切换以适应分辨率，图像大小和脚本。换句话说，网站应该具备根据用户的使用环境来自动调整，这可以减少不必要的重复设计。

响应式Web设计的概念

Ethan Marcotte曾经在A List Apart发表过一篇文章“Responsive Web Design”，文中援引了响应式建筑设计的概念：

所谓响应式建筑设计就是设计师尝试建造一种使用一些传感器检测周围环境，比如说温度、湿度、光线等等自动进行调整的房子。现在我们把这个思路延伸到WEB设计领域。我们可以想，为啥我们要为每个用户群各自打造一套设计方案呢？我们太笨了，有没有更智能的做法？和响应式建筑设计一样，web设计也应该做到智能调整。

显然web设计不能使用传感器，这就要更多的抽象思维。好在现在一些概念已经得到实践了，比如液态布局、 帮助页面重新格式化的media queries和脚本等。但是响应式Web设计不仅仅是关于屏幕分辨率自适应以及自动缩放的图片等等，它更像是一种对于设计的全新思维模式。

调整分辨率

不同的设备都有各自的屏幕分辨率、清晰度以及屏幕定向方式，不断被研发的各种新设备也将出现新的屏幕尺寸规格。有些设备基于横屏 (portrait)，有些是竖屏(landscape)，甚至还有正方形；对于日益流行的iPhone、iPad及其他一些智能手机、平板电脑，用户还可以通过转动设备来任意切换屏幕的定向方式。怎样才能做到让一种设计方案满足所有情况？

要想做到同时兼容横、竖屏(用户还有可能在页面加载的过程中切换方向)，我们就必须考虑N种屏幕尺寸规格。我们可以将这些规格划分为几个大类，然后为每一类做一种方案，确保该方案至少在本组中尽量具有弹性。但即使这样，结果也将是非常不爽的，谁知道某类设备在5年之后的占有率是多少？而且很多用户甚至不去将浏览器的窗口最大化；天哪，哥受不了了……

Morten Hjerde和他的哥们对2005至2008年市场中的400余种移动设备进行了统计(查看报告)，下图为大致统计结果：

在08年之后，更多更有代表性的新设备问世并普及了。显然，我们不可以沿着“多方案”的思路继续走下去；那么我们应该怎样做呢？

部分解决方案：一切弹性化

几年前，弹性布局(flexible layout)几乎是一种奢侈品，所谓弹性，也只是体现在竖排布局以及字号等方面；图片尺寸无法变化，这就导致图片破坏了页面结构，而且即使是有弹性的元素，在很多情况下他会乱弹，仍然是一塌糊涂。所以，所谓的弹性布局其实并非那样弹性，它有时甚至不能适应台式机与笔记本的屏幕分辨率差异，更不用说手机等移动设备了。

现在，我们可以通过响应式的设计和开发思路让页面更加”弹性”了。图片的尺寸可以自动调整，页面布局再不会被破坏。虽然永远没有最完美的方案，但它给了我们更多选择。无论用户切换设备的屏幕定向方式，还是从台式机屏幕转到iPad上浏览，页面都会真正的富有弹性。

在前文提到的Ethan Marcotte的文章中，他通过一个实例展示了响应式Web设计在页面弹性方面的特性：

该实例的实现方式完美的结合了液态网格和液态图片技术，并且聪明的在正确的地方使用了正确的HTML标记。”液态网格”是一种很常见的实现方式；对于“液态图片”技术，下面的文章做了不错的介绍：

Hiding and Revealing Portions of Images

Creating Sliding Composite Images

Foreground Images That Scale With the Layout

说到创建液态页面，最好看看Zoe Mickley Gillenwater的那本《Flexible Web Design: Creating Liquid and Elastic Layouts with CSS》 “怎样创建弹性图片”。另外，Zoe的这篇”Essential Resources for Creating Liquid and Elastic Layouts.“提供了不少关于创建弹性网格和布局的教程、资源、创意指导和实现方式。

从技术角度讲，虽然听上去这些都很简单，但它着实相当复杂。举个例子，仔细观察Ethan Marcotte提供的实例中的logo图片：

如果我们将浏览器窗口不断调小，会发现logo图片的文字部分始终会保持同比缩小，保证其完整可读，而不会和周围的插图一样被两边裁掉。所以整个logo其实包括两部分：插图作为页面标题的背景图片，会保持尺寸，但会随着布局调整而被裁切；文字部分则是一张单独的图片。

其中，

元素使用插图作为背景，文字部分的图片始终保持与背景的对齐。

这个实例小小的展示一下响应式Web设计的思路。不过这点小努力还不足以避免整个布局在小尺寸窗口中变的过窄或过短，并且logo文字最终会变的小到难以识别，背景图片也会被过多的裁切。

弹性图片

响应式Web设计的思路中，一个重要的因素是怎样处理图片方面的问题。有很多同比缩放图片的技术，其中有不少是简单易行的。其中，由Richard Rutter最先尝试的一种做法比较流行，即使用CSS的max-width属性。这个方法在Ethan Marcotte的液态图片一文中也有提到。

img { max-width: 100%; }

只要没有其他涉及到图片宽度的样式代码覆盖掉这一行规则，页面上所有的图片就会以其原始宽度进行加载，除非其他设备可视部分的宽度小于图片的原始宽度。上面的代码确保图片最大的宽度不会超过浏览器窗口或是其容器可视部分的宽度，所以当窗口或容器的可视部分开始变窄时，图片的最大宽度值也会相应的减小，图片本身永远不会容器边缘隐藏和覆盖。实际上，就像Jason Grigsby在他的CSS Media Query for Mobile is Fool’s Gold一文中提到的，”液态图片背后的思路，就是无论何时，都确保在其原始宽度范围内，以最大的宽度同比完整的显示图片。我们不必在样式表中为图片设置宽度和高度，只需要让样式表在窗口尺寸发生变化时辅助浏览器对图片进行缩放。” 一种简而美的方法。

图片本身的分辨率及加载时间是另外一个需要考虑的问题。虽然通过上面的方法，可以很轻松的缩放图片，确保在移动设备的窗口中可以被完整浏览，但如果原始图片本身过大，便会显著降低图片文件的下载速度，对存储空间也会造成没有必要的消耗。

响应式图片

由Filament Group提出的”响应式图片”技术思想，有助于解决上面提到的问题：不仅要同比的缩放图片，还要在小设备上降低图片自身的分辨率。可以看下demo页面先。

这个技术的实现需要使用几个相关文件，我们可以在Github上获取。包括一个JavaScript文件(rwd-images.js)，一个.htaccess文件，以及一些范例资源文件。具体使用方法可以参考Responsive Images的说明文档。 大致的原理是，rwd-images.js会检测当前设备的屏幕分辨率，如果是大屏幕设备，则向页面head部分中添加BASE标记，并将后续的图片、脚本和样式表加载请求定向到一个虚拟路径”/rwd-router”。当这些请求到达服务器端，.htacces文件会决定这些请求所需要的是原始图片还是小尺寸的”响应式图片”，并进行相应的反馈输出。对于小屏幕的移动设备，原始尺寸的大图片永远不会被用到。

Date-fullsrc是html5中的一个定义文件的属性，宽度超过480px的屏幕，就会加载较大分辨率的图片（largeRes.jpg），小屏幕分辨率的就会加载较小的图片（smallRes.jpg）。

JS文件中插入一个基本元素，允许页面将图像重新定向，当页面加载时只是加载适合屏幕分辨率的图片，而其他图像不会被下载。尤其是带有大量图片的网站，这种技术可以节省很大的带宽和加载时间。

这项技术支持多数的现代浏览器，包括IE8+、Safari、Chrome和Opera，以及这些浏览器的移动设备版本；在FireFox及一些旧浏览器中，则会优雅降级：我们仍可得到小图片的输出，但同时，原始大图也会被下载。

禁用iPhone中的图片自动缩放

在iPhone及iPod Touch中，页面会被自动的同比例缩小至最适合屏幕大小的尺寸，x轴不会产生滚动条，用户可以上下拖拽浏览全部页面，或在需要的时候放大页面的局部。这里会产生一个问题，即使我们运用响应式Web设计的思想，专门为iPhone的小屏输出小图片，它同样会随着整个页面一起被同比例缩小，如下图左侧所示。

我们可以使用苹果专有的一些meta标记来解决类似的问题。在页面的部分添加以下代码(详情可以参考Think Vitamin的相关文章)：

将initial-scale的值设定为”1″，即可覆写默认的缩放方式，保持原始的尺寸及比例。更多关于viewport meta标记的用法，可以参考苹果官方的文档。

打造布局结构

当页面所需要适应的不同设备的屏幕尺寸差异过大时，除了图片方面，我们也应该考虑到整个布局结构的智能化调整；我们可以使用独立的样式表，或者更有效的，使用CSS media query。这不会引起多大的麻烦，多数样式设定不会被影响和改变，只有一些特定的元素会通过浮动、宽度和高度等的设置来改变位置。

我们可以使用一个默认主样式表来定义页面的主要结构元素，比如#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;  }

大致的视觉效果如下图所示：

Media Queries

CSS3支持CSS2.1所支持的所有媒体类型，例如screen、print、handheld等，同时添加了很多涉及媒体类型的功能属性，包括 max-width(最大宽度)、device-width(设备宽度)、orientation(屏幕定向，横屏或竖屏)和color。在CSS3发布 之后出现的新玩具，如iPad或Android相关设备，都可以完美的支持这些属性。所以我们可以通过media query为新设备设置独特的样式，而忽略那些不支持CSS3的台式机中的旧浏览器。

在Ethan的文章中，我们能看到一段media query使用实例：

代码本身可以很好的说明工作机制：如果页面通过屏幕呈现(非打印一类)，并且屏幕宽度不超过480px，则加载shetland.css样式表。要了解更多关于CSS3媒体新属性的信息，可以参考”The Orientation Media Query“一文。

我们可以创建多个样式表，以适应不同设备类型的宽度范围。Ethan的文章中的”Meet the media query”部分有更多的范例及解释。更有效率的做法是，将多个media queries整合在一个样式表文件中：

/* Smartphones (portrait and landscape) ----------- */ @media only screen and (min-device-width : 320px)  and (max-device-width : 480px) {  /* Styles */ }  /* Smartphones (landscape) ----------- */ @media only screen and (min-width : 321px) {  /* Styles */ }  /* Smartphones (portrait) ----------- */ @media only screen and (max-width : 320px) {  /* Styles */ }

上面的代码来自于Andy Clark创建的可以兼容各种主流设备的免费模板。这样整合多个media queries于一个样式表文件的方式，与通过media queries调用不同样式表的方式之间的区别与联系，可以参考”Hardboiled CSS3 Media Queries“一文。

CSS3 Media Queries

上面演示的一些代码范例是CSS2.1与CSS3通吃的。现在让我们来看看怎样使用CSS3专有的media queries功能来创建响应式Web设计。其中某些方法在当前就有切实的使用价值，不久的将来则一定会全部派上用场。

min-width和max-width这两个属性很靠谱。通过min-width的设置，我们可以在浏览器窗口或设备屏幕宽度高于这个值的情况下，为页面指定一个特定的样式表；max-width则反之。

下面的几个示例中，我们使用的是将多个media queries整合在单一样式表中进行编码的句法。如前文所述，这样做更加高效，减少请求数量。

@media screen and (min-width: 600px) {       .hereIsMyClass {            width: 30%;            float: right;       }  }

上面代码中定义的类(hereIsMyClass)只有在浏览器或屏幕宽度超过600px时才会有效。

@media screen and (max-width: 600px) {       .aClassforSmallScreens {            clear: both;            font-size: 1.3em;       }  }

而这段代码的作用则相反：aClassforSmallScreens类只有在浏览器或屏幕宽度小于600px时才会有效。

可以看出min-width和max-width可以同时判断设备屏幕尺寸与浏览器实际宽度。有些时候，我们希望通过media queries作用于某种特定的设备，而忽略其上运行的浏览器是否由于没有最大化而在尺寸上与设备屏幕尺寸产生不一致的情况。这时，我们需要使用min-device-width与max-device-width，用来判断设备本身的屏幕尺寸。

@media screen and (max-device-width: 480px) {       .classForiPhoneDisplay {            font-size: 1.2em;       }  }  @media screen and (min-device-width: 768px) {       .minimumiPadWidth {            clear: both;            margin-bottom: 2px solid #ccc;       }  }

还有一些其他方法，可以帮我们有效的使用media queries锁定某些指定的设备。可以参考下面两篇出自Thomas Maier的文章：

CSS for iPhone 4 (Retina display)

How To: CSS for the iPad

对于iPad来说，orientation属性尤其有用。它的值可以是landscape(横屏)或portrait(竖屏)。

@media screen and (orientation: landscape) {       .iPadLandscape {            width: 30%;            float: right;       }  }  @media screen and (orientation: portrait) {       .iPadPortrait {            clear: both;       }  }

不幸的是，这个属性目前确实只在iPad上有效。对于其他可以转屏的设备，譬如iPhone，可以使用min-device-width和max-device-width来变通实现；详情可以参考”Determine iPhone orientation using CSS“一文。

我们还可以将上述属性组合使用，来锁定某个屏幕尺寸范围：

@media screen and (min-width: 800px) and (max-width: 1200px) {       .classForaMediumScreen {            background: #cc0000;            width: 30%;            float: right;       }  }

上面的代码可以作用于浏览器窗口或屏幕宽度在800px至1200px之间的所有设备。

其实，很多设计师和开发者仍会选择使用多个样式表的方式来实现media queries。如果从资源的组织和维护的角度出发，其益处确实高于效率的损耗的话，那么这样做也完全不坏：

所以呐，凡事没有绝对，最好根据实际情况决定使用media queries的方式。比如，对于iPad，我们可以将多个media queries直接写在一个样式表中。因为iPad用户随时有可能切换屏幕定向，这种情况下，要保证页面在极短的时间内响应屏幕尺寸的调整，我们必须选择 效率最高的方式。

JavaScript

JavaScript也是我们的武器之一，特别是当某些旧设备无法完美支持CSS3的media query时，它可以作为后备支援。幸运的是，已经有专门的JS库来帮助旧浏览器(IE 5+，Firefox 1+，Safari 2等)支持CSS3的media queries。使用方法很简单，下载css3-mediaqueries.js并在你的页面中调用它。

而下面的代码则演示了怎样使用简单的几行jQuery代码来检测浏览器宽度，并为不同的情况调用不同的样式表：

        $(document).ready(function(){          $(window).bind("resize", resizeWindow);          function resizeWindow(e){              var newWindowWidth = $(window).width();              // If width width is below 600px, switch to the mobile stylesheet              if(newWindowWidth < 600){                $("link[rel=stylesheet]").attr({href : "mobile.css"});              }           // Else if width is above 600px, switch to the large stylesheet             else if(newWindowWidth > 600){                  $("link[rel=stylesheet]").attr({href : "style.css"});              }          }      });  

类似这样的解决方案还有很多。所以我们要清楚，media queries不是一个绝对唯一的答案，它只是一个以纯CSS方式实现响应式Web设计思路的手段。借助JavaScript，我们则可以实现更多的变化。这篇”Combining Media Queries and JavaScript“向我们展示了JavaScript配合media queries的更多细节信息。

显示或隐藏内容

通过前文的学习，我们已经了解到，对于响应式Web设计，同比例缩减元素尺寸以及调整页面结构布局，是两个重要的方式方法。但是对于页面中的文字内 容信息来说，则不能简单的只从”同比缩小”和”调整布局结构”这两方面去处理。对于手机等移动设备来说，在文字内容方面，已经有了很多最佳实践方式和指导 原则：简化的导航、更易聚焦的内容、以信息列表代替传统的多行文案内容等。

响应式Web设计的思想，一方面要保证页面元素及布局具有足够的弹性，来兼容各类设备平台和屏幕尺寸；另一方面，则是增强可读性和易用性，帮助用户在任何设备环境中都能更容易的获取最重要的内容信息。

有一条样式代码，我们已经使用了多年：

display: none;

我们可以在一个针对某类小屏幕设备的样式表中使用它来隐藏掉页面中的某些块级元素，也可以使用前文的方法，通过JS判断当前硬件屏幕规格，在小屏幕设备的情况下直接为需要隐藏的元素添加工具类class。比如，对于手机类设备，我们可以隐藏掉大块的文字内容区，而只显示一个简单的导航结构，其中的导 航元素可以指向详细内容页面。

注意，不要使用visibility: hidden的方式，因为这只能使元素在视觉上不做呈现；display属性则可帮助我们设置整块内容是否需要被输出。对于移动设备来说，避免这些不必要的资源浪费还是很重要的。我们来看一个简单的示例：

图中上半部分是大屏幕设备所显示的完整页面，下面的则是该页面在小屏幕设备的呈现方式。页面HTML代码如下：

Left Sidebar Content | Right Sidebar Content
      
Main Content