响应式设计

响应式设计：样式设计适应各种不同分辨率尺寸

学习1.  CSS3 Media Queries

         2.样式覆盖

考"The Orientation Media Query"一文。 

 我们可以创建多个样式表，以适应不同设备类型的宽度范围。

Ethan的文章中的"Meet the media query"部分有更多的范例及解释。更有效率的做法是，

将多个media queries整合在一个样式表文件中：  50 /* Smartphones (portrait and landscape) 

----------- 

*/  51 @media only screen   52 and (min-device-width : 320px)  53 and (max-device-width : 480px) {  54 /* Styles */  55 }   56 /* Smartphones (landscape) ----------- */  57 @media only screen   58 and (min-width : 321px) {  59 /* Styles */  60 }   61 /* Smartphones (portrait) ----------- */  62 @media only screen   63 and (max-width : 320px) {  64 /* Styles */  65 } 

 <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" />  

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的更多细节信息。  显示或隐藏内容  通过前文的学习，我们已经了解到，对于响应式Web设计，同比例缩减元素尺寸以及调整页面结构布局，是两个重要的方式方法。但是对于页面中的文字内容信息来说，则不能