|
<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" /> 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使用实例： ?? <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-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)（http:///2010/06/css-for-iphone-4-retina-display/） How To: CSS for the iPad（http:///2010/03/howto-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; ??? } 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./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设计，同比例缩减元素尺寸以及调整页面结构布局，是两个重要的方式方法。但是对于页面中的文字内容信息来说，则不能 |
|
|
