设计网站如何推广,月光博客 网站模板,wordpress吾爱,东莞网站建设企业什么是响应式Web设计#xff1f;怎样进行#xff1f;眼下#xff0c;几乎每个新客户都希望他们的网站可以有专门的移动设备版本。最完美的情况呐#xff0c;就是为iPhone、iPad、黑莓、Kindle…各自打造一款——页面分辨率还必须兼容任何设备。谁知道未来5年内我们还需要为… 什么是响应式Web设计怎样进行眼下几乎每个新客户都希望他们的网站可以有专门的移动设备版本。最完美的情况呐就是为iPhone、iPad、黑莓、Kindle…各自打造一款——页面分辨率还必须兼容任何设备。谁知道未来5年内我们还需要为多少新发明的设备设计开发不同版本的页面这种疯狂什么时候算个头在Web设计和开发领域很快的我们将会无法跟上设备与分辨率革新的步伐。对于多数网站来说为每种新设备及分辨率创建其独立的版本根本就是不切实际的结果就是我们将会赢得使用某些设备的用户群而失去那些使用其他设备的用户。不过或许会有另外一种方式可以帮助我们避免这种情况的发生。响应式Web设计(Responsive Web design)的理念是页面的设计与开发应当根据用户行为以及设备环境(系统平台、屏幕尺寸、屏幕定向等)进行相应的响应和调整。具体的实践方式由多方面组成包括弹性网格和布局、图片、CSS media query的使用等。无论用户正在使用笔记本还是iPad我们的页面都应该能够自动切换分辨率、图片尺寸及相关脚本功能等以适应不同设备换句话说页面应该有能力去自动响应用户的设备环境。这样我们就可以不必为不断到来的新设备做专门的版本设计和开发了。响应式Web设计的概念Ethan Marcotte曾经在A List Apart发表过一篇文章“Responsive Web Design”文中援引了响应式建筑设计的概念最近出现了一门新兴的学科——“响应式建筑(responsive architecture)”——提出物理空间应该可以根据存在于其中的人的情况进行响应。结合嵌入式机器人技术以及可拉伸材料的应用建筑师们正在尝试建造一种可以根据周围人群的情况进行弯曲、伸缩和扩展的墙体结构还可以使用运动传感器配合气候控制系统调整室内的温度及环境光。已经有公司在生产“智能玻璃”当室内人数达到一定的阀值时这种玻璃可以自动变为不透明确保隐私。将这个思路延伸到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其实包括两部分插图作为页面标题的背景图片会保持尺寸但会随着布局调整而被裁切文字部分则是一张单独的图片。?123h1 idlogoa href#img srcsite/logo.png altThe Baker Street Inquirer //a/h1其中h1元素使用插图作为背景文字部分的图片始终保持与背景的对齐。这个实例小小的展示一下响应式Web设计的思路。不过这点小努力还不足以避免整个布局在小尺寸窗口中变的过窄或过短并且logo文字最终会变的小到难以识别背景图片也会被过多的裁切。弹性图片响应式Web设计的思路中一个重要的因素是怎样处理图片方面的问题。有很多同比缩放图片的技术其中有不少是简单易行的。其中由Richard Rutter最先尝试的一种做法比较流行即使用CSS的max-width属性。这个方法在Ethan Marcotte的液态图片一文中也有提到。?1img { 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文件会决定这些请求所需要的是原始图片还是小尺寸的“响应式图片”并进行相应的反馈输出。对于小屏幕的移动设备原始尺寸的大图片永远不会被用到。这项技术支持多数的现代浏览器包括IE8、Safari、Chrome和Opera以及这些浏览器的移动设备版本在FireFox及一些旧浏览器中则会优雅降级我们仍可得到小图片的输出但同时原始大图也会被下载。禁用iPhone中的图片自动缩放在iPhone及iPod Touch中页面会被自动的同比例缩小至最适合屏幕大小的尺寸x轴不会产生滚动条用户可以上下拖拽浏览全部页面或在需要的时候放大页面的局部。这里会产生一个问题即使我们运用响应式Web设计的思想专门为iPhone的小屏输出小图片它同样会随着整个页面一起被同比例缩小如下图左侧所示。我们可以使用苹果专有的一些meta标记来解决类似的问题。在页面的head部分添加以下代码(详情可以参考Think Vitamin的相关文章)?1meta nameviewport contentwidthdevice-width; initial-scale1.0将initial-scale的值设定为“1”即可覆写默认的缩放方式保持原始的尺寸及比例。更多关于viewport meta标记的用法可以参考苹果官方的文档。打造布局结构当页面所需要适应的不同设备的屏幕尺寸差异过大时除了图片方面我们也应该考虑到整个布局结构的响应式调整我们可以使用独立的样式表或者更有效的使用CSS media query。这不会引起多大的麻烦多数样式设定不会被影响和改变只有一些特定的元素会通过浮动、宽度和高度等的设置来改变位置。我们可以使用一个默认主样式表来定义页面的主要结构元素比如#wrapper、#content、#sidebar、#nav等的默认布局方式以及一些全局性的配色和字体方案。我们可以监测页面布局随着不同的浏览环境而产生的变化如果它们变的过窄过短或是过宽过长则通过一个子级样式表来继承主样式表的设定并专门针对某些布局结构进行样式覆写。我们来看下代码示例下面的代码可以放在默认主样式表style.css中?123456789101112131415161718192021222324252627282930313233343536/* 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中专门针对移动设备进行样式覆写?12345678910111213141516171819202122232425#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 QueriesCSS3支持CSS2.1所支持的所有媒体类型例如screen、print、handheld等同时添加了很多涉及媒体类型的功能属性包括max-width(最大宽度)、device-width(设备宽度)、orientation(屏幕定向横屏或竖屏)和color。在CSS3发布之后出现的新玩具如iPad或Android相关设备都可以完美的支持这些属性。所以我们可以通过media query为新设备设置独特的样式而忽略那些不支持CSS3的台式机中的旧浏览器。在Ethan的文章中我们能看到一段media query使用实例?123link relstylesheet typetext/cssmediascreen and (max-device-width: 480px)hrefshetland.css /代码本身可以很好的说明工作机制如果页面通过屏幕呈现(非打印一类)并且屏幕宽度不超过480px则加载shetland.css样式表。要了解更多关于CSS3媒体新属性的信息可以参考“The Orientation Media Query”一文。我们可以创建多个样式表以适应不同设备类型的宽度范围。Ethan的文章中的“Meet the media query”部分有更多的范例及解释。更有效率的做法是将多个media queries整合在一个样式表文件中?123456789101112131415161718/* 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 */}上面的代码来自于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整合在单一样式表中进行编码的句法。如前文所述这样做更加高效减少请求数量。?123456media screen and (min-width: 600px) {.hereIsMyClass {width: 30%;float: right;}}上面代码中定义的类(hereIsMyClass)只有在浏览器或屏幕宽度超过600px时才会有效。?123456media 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用来判断设备本身的屏幕尺寸。?12345media screen and (max-device-width: 480px) {.classForiPhoneDisplay {font-size: 1.2em;}}?123456media 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(竖屏)。?123456media screen and (orientation: landscape) {.iPadLandscape {width: 30%;float: right;}}?12345media screen and (orientation: portrait) {.iPadPortrait {clear: both;}}不幸的是这个属性目前确实只在iPad上有效。对于其他可以转屏的设备譬如iPhone可以使用min-device-width和max-device-width来变通实现详情可以参考“Determine iPhone orientation using CSS”一文。我们还可以将上述属性组合使用来锁定某个屏幕尺寸范围?1234567media screen and (min-width: 800px) and (max-width: 1200px) {.classForaMediumScreen {background: #cc0000;width: 30%;float: right;}}上面的代码可以作用于浏览器窗口或屏幕宽度在800px至1200px之间的所有设备。其实很多设计师和开发者仍会选择使用多个样式表的方式来实现media queries。如果从资源的组织和维护的角度出发其益处确实高于效率的损耗的话那么这样做也完全不坏?123link relstylesheet mediascreen and (max-width: 600px) hrefsmall.css /link relstylesheet mediascreen and (min-width: 600px) hreflarge.css /link relstylesheet mediaprint hrefprint.css /所以呐凡事没有绝对最好根据实际情况决定使用media queries的方式。比如对于iPad我们可以将多个media queries直接写在一个样式表中。因为iPad用户随时有可能切换屏幕定向这种情况下要保证页面在极短的时间内响应屏幕尺寸的调整我们必须选择效率最高的方式。JavaScriptJavaScript也是我们的武器之一特别是当某些旧设备无法完美支持CSS3的media query时它可以作为后备支援。幸运的是已经有专门的JS库来帮助旧浏览器(IE 5Firefox 1Safari 2等)支持CSS3的media queries。使用方法很简单下载css3-mediaqueries.js并在你的页面中调用它。而下面的代码则演示了怎样使用简单的几行jQuery代码来检测浏览器宽度并为不同的情况调用不同的样式表?123456789101112131415script typetext/javascript srchttp://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js/scriptscript typetext/javascript$(document).ready(function(){$(window).bind(resize, resizeWindow);function resizeWindow(e){var newWindowWidth $(window).width();// If width width is below 600px, switch to the mobile stylesheetif(newWindowWidth 600){ $(link[relstylesheet]).attr({href : mobile.css}); } // Else if width is above 600px, switch to the large stylesheet else if(newWindowWidth 600){$(link[relstylesheet]).attr({href : style.css});}}});/script类似这样的解决方案还有很多。所以我们要清楚media queries不是一个绝对唯一的答案它只是一个以纯CSS方式实现响应式Web设计思路的手段。借助JavaScript我们则可以实现更多的变化。这篇“Combining Media Queries and JavaScript”向我们展示了JavaScript配合media queries的更多细节信息。 显示或隐藏内容通过前文的学习我们已经了解到对于响应式Web设计同比例缩减元素尺寸以及调整页面结构布局是两个重要的方式方法。但是对于页面中的文字内容信息来说则不能简单的只从“同比缩小”和“调整布局结构”这两方面去处理。对于手机等移动设备来说在文字内容方面已经有了很多最佳实践方式和指导原则简化的导航、更易聚焦的内容、以信息列表代替传统的多行文案内容等。响应式Web设计的思想一方面要保证页面元素及布局具有足够的弹性来兼容各类设备平台和屏幕尺寸另一方面则是增强可读性和易用性帮助用户在任何设备环境中都能更容易的获取最重要的内容信息。有一条样式代码我们已经使用了多年?1display: none;我们可以在一个针对某类小屏幕设备的样式表中使用它来隐藏掉页面中的某些块级元素也可以使用前文的方法通过JS判断当前硬件屏幕规格在小屏幕设备的情况下直接为需要隐藏的元素添加工具类class。比如对于手机类设备我们可以隐藏掉大块的文字内容区而只显示一个简单的导航结构其中的导航元素可以指向详细内容页面。注意不要使用visibility: hidden的方式因为这只能使元素在视觉上不做呈现display属性则可帮助我们设置整块内容是否需要被输出。对于移动设备来说避免这些不必要的资源浪费还是很重要的。我们来看一个简单的示例图中上半部分是大屏幕设备所显示的完整页面下面的则是该页面在小屏幕设备的呈现方式。页面HTML代码如下?1234567891011121314p classsidebar-nava href#Left Sidebar Content/a | a href#Right Sidebar Content/a/pdiv idcontenth2Main Content/h2/divdiv idsidebar-lefth2A Left Sidebar/h2/divdiv idsidebar-righth2A Right Sidebar/h2/div下面是默认的主样式表其中我们要隐藏掉链接导航部分(sidebar-nav)因为默认样式适用的设备屏幕会足够大足够显示包括两个侧边栏在内的所有内容。?1234567891011121314151617#content{width: 54%;float: left;margin-right: 3%;}#sidebar-left{width: 20%;float: left;margin-right: 3%;}#sidebar-right{width: 20%;float: left;}.sidebar-nav{display: none;}下面是用于小屏幕移动设备的样式表代码。现在我们要隐藏掉两个侧边栏并使sidebar-nav显示出来。借助JavaScript当用户点击sidebar-nav中的链接时对应的侧边栏可以恢复显示。当然触发恢复显示的方式有很多种即可以通过JS改变侧边栏的display属性值也可以为其添加额外的布局样式。?123456789101112#content{width: 100%;}#sidebar-left{display: none;}#sidebar-right{display: none;}.sidebar-nav{display: inline;}现在我们的页面已经可以随着设备和屏幕规格的变更响应式的做到元素的同比缩放、布局结构的改变、内容的优化调整。特别是对于手机设备我们还要在实践过程中注意一些该类设备共有的设计指导原则。比如针对手机设备使用一个特定的样式将页面原有的文字导航元素变为更易操作的图标形式。下面的一些文章资源可作参考阅读Mobile Web Design Trends For 2009 7 Usability Guidelines for Websites on Mobile Devices 触屏与鼠标触屏设备已经成为主流。虽然目前多数触屏设备还是小屏幕类型的产品比如手机但是市场上越来越多的大屏幕设备也开始使用触屏技术且不说iPad一类的平板电脑就连一些笔记本和台式机也加入了这一行列。比如HP Touchsmart tm2t即使用传统的键鼠设备同时也加入了触屏技术。相比于传统的基于鼠标指针的互动触屏技术显然带来了截然不同的交互方式与相应的设计规范两者又有各自所适用的领域。所幸要使我们的设计方案同时满足这两类设备的规范并非一件难事只是有些地方需要注意。比如触屏设备无法反映CSS定义的hover行为及相应的样式因为它没有鼠标指针的概念手指点击就是click行为。所以不要让任何功能依赖于对hover状态的触发。有兴趣的话可以读读这篇“Designing for Touchscreen”这里提到的很多建议即有利于改进针对触屏设备的设计方式同时也不会削弱传统键鼠设备上的用户体验。比如放在页面右侧的导航列表可以对触屏设备的用户更加友好。因为多数人习惯用右手点击操作而左手负责握住设备这样放在右侧的导航列表即方便右手的点击又可以避免被握着设备的左手不小心触碰到。而这一点与键鼠设备用户的习惯完全不矛盾。转载于:https://www.cnblogs.com/LeeWenjie/archive/2012/08/21/2648575.html
