BeFor Web
为网而生 - 关注移动互联网及AR/VR产品的用户体验设计

什么是响应式Web设计?怎样进行?: Page 3 of 4

什么是响应式Web设计?怎样进行?

打造布局结构

当页面所需要适应的不同设备的屏幕尺寸差异过大时,除了图片方面,我们也应该考虑到整个布局结构的响应式调整;我们可以使用独立的样式表,或者更有效的,使用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;
}

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

responsive-web-design-moving-structure

Media Queries

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

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

<link rel="stylesheet" type="text/css"
	media="screen and (max-device-width: 480px)"
	href="shetland.css" />

代码本身可以很好的说明工作机制:如果页面通过屏幕呈现(非打印一类),并且屏幕宽度不超过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-widthmax-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-widthmax-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的文章:

对于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。如果从资源的组织和维护的角度出发,其益处确实高于效率的损耗的话,那么这样做也完全不坏:

<link rel="stylesheet" media="screen and (max-width: 600px)" href="small.css" />
<link rel="stylesheet" media="screen and (min-width: 600px)" href="large.css" />
<link rel="stylesheet" media="print" href="print.css" />

所以呐,凡事没有绝对,最好根据实际情况决定使用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代码来检测浏览器宽度,并为不同的情况调用不同的样式表:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>

<script type="text/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 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"});
			}
		}
	});
</script>

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

译文代表原作者观点。欢迎发表评论,或到译者微博进一步交流探讨。

本站原创编译文章。如需转载,请注明:本文来自Be For Web
译者信息: C7210 - 交互设计师、UX热爱者、译者、猫奴、音乐玩家,现就职于大众点评网用户体验设计部(DPUX)
评论 (47)
关于这篇译文在语法方面的建议。“安静的窝在家里做做博客、学做些新东西”与“响应式的做到元素的同比缩放、布局结构的改变、内容的优化调整”中,“安静的”和“响应式的”都应该是副词,译文翻译为形容词,这好比英文中,adj.与adv.混用了。个人愚见,谢谢。
在其他网站看到你的文章,发现其中portrait和landscape与你原文翻译的相反,portrait很明显是竖屏,landscape明显是横屏,为什么会这样,转载的文章会对原文进行了修改,这对原创是一种影响。
博主感觉web后台应该学习什么呢?预测一下主流后台是PHP还是Node.js??
博主,做web响应式设计的时候作为设计师应该注意哪些,目前查到的多是和前端相关的。。求指教
今天遇到这个问题了 一下 就搜到这篇了 博主 我要怎么感谢你:P
有用就好:)
感谢分享
谢谢支持
文章不错,楼主搞得很细,让我知道响应式一些知识主干
有用就好:)
写的很好。图文并茂。容易理解。
写的内容相当不错 很受用。。。。
有用就好,多交流:)
博主很强大~~学习了。
过奖,多交流的:)
最近正在做html5的手机端页面,这篇文章很有用啊
有用就好=)
难得好文章,感谢翻译,分享~
谢谢支持
响应式设计确实很好,但是如果兼容各种平台工作量相当之大,而且庞大的CSS代码也是累赘,而且还没得测试!如何保证做出来的页面能够完美的兼容?
hi,我个人觉得所谓响应式设计,本身就是一种折中性质的方案,要考虑和权衡的方面很多;所以通过这样的方式寻求完美恐怕也不是很合乎实际,特别是您提到的这种很现实的问题。不能算是很到位的回答,抱歉=P
其实我也不是否定这种响应式设计的方案。这种方案做出来的效果确实非常OK,只不过结合实际应用的话确实有一定的考虑。但是如果某些网站只兼容比如说主流的平台 桌面 iphone ipa Android 如果是这样的话,比起针对每个平台都去做一个独立的版面样式的话 。那果断的这种响应式设计有它的优势。比如说QQ的产品 3G.qq.com 针对N个平台做了N个板式。这种纯属是被这N个平台强奸了自己的劳动力,你说的也对 “本身就是一种折中性质的方案,要考虑和权衡的方面很多” 毕竟现在没有很完美的的方案来解决,只能在实际应用中自己去权衡。但是有一点是可以肯定的这种响应式设计的肯定在以后会是主流,只不过是时间的问题。个人拙见~还望博主指点。
hi,我理解当中,响应式主要解决的是同一套内容及结构在不同“尺寸”显示设备当中的表现,而不是平台;当然也许您一直用平台这个词其实就是在指设备的显示规格方面的区别。在我看来这种方式只是一种锦上添花的方式而已,它并不等同于Web App这样的概念。比如我自己的这个博客,我知道它在Pad及iPhone当中完全可以通过响应式的方法来改善呈现方式,但是我不是很在意,因为网站本身没达到这种需求程度,而有这类需求的网站产品,可以花些时间针对几种典型的尺寸规格来定义输出样式;也许他需要面对N多平台,但真正需要特别定义的只有3到5种典型尺寸规格。
嗯,其实我说的平台的意思就是指不同设备。可能我没表达清楚我的意思。确实该怎么用,该不该用,需不需要用,等等这些问题都是结合自己本身的需求。作为一个前端,当然我是比较迎合这种响应式设计,我觉得很新颖,很创新。你说的对,它并不等同于Web App这样的概念。只不过是在不同设备中表现的一种设计方法。哈哈。半夜没睡着,爬文呢。BZ的内容都写的不错。以后常来...
重读此文,受益匪浅。
很受益的东西,有空经常过来!
欢迎常来=)
写的很好,受益匪浅。值得收藏的一篇文章。
谢谢支持=) 还望多交流指正的
感谢翻译~~太棒了!!
谢谢 =)
我们正想解决这个问题呢,受益匪浅!
嘿嘿有用就好的
翻译给力!赞!看原文通常都很没耐心看完,看您的译文觉得事半功倍好多!谢谢!
=) 谢谢支持
很受用,如果自己读E文版的肯定很晦涩,翻译的很棒。
谢谢支持,多多交流;翻译方面自己也是玩票,还麻烦多指正的
太棒了,以后天天来学习
欢迎常来,多交流=)
大哥,你的个人站点好多呀。永远支持
被发现了...多谢...你的应酷很赞啊
谢谢分享!
谢谢支持,欢迎常来=)
写得很详细,学了不少。谢谢分享
有用就好,谢谢支持=)
谢谢你的分享,这篇文章确实帮助到了我,谢谢。
谢谢,欢迎常来玩=)
发表评论