css教程：彻底弄明白css3的media queries

《css教程：彻底弄明白css3的media queries》由会员上传分享，免费在线阅读，更多相关内容在行业资料-天天文库。

1、CSS教程：彻底弄明白CSS3的MediaQueries-移动时代，是任何Web设计与开发者都不能忽视的一个时代，总有一天，你设计的东西将被显示在两种屏幕上，桌面大屏幕和移动小屏幕，如何让同一个网站同时适应完全不同的两种尺寸的屏幕，这是一个很久以来都没有完美解决方案的问题，直到有了CSS3。CSS3的MediaQueries在CSS2时代，如果你曾经为你的网站设计过打印版CSS，就会明白CSS3MediaQueries的作用，不过，CSS3的MediaQueries比CSS2的MediaType更实用，事实上，CSS2的MediaType并不曾

2、被多少设备所支持过。CSS3的MediaQueries可以帮你获取以下数据：·浏览器窗口的宽和高·设备的宽和高·设备的手持方向，横向还是竖向·分辨率如果用户有一个支持MediaQueries的设备，我们就可以为该设备编写专门的CSS，让网站适应这个设备的小屏幕，英国的Web技术大会dConstruct便基于该技术推出他们的2010年大会网站，手机也可以轻松访问，以下是该网站的桌面版和手机版截图：这个网站在不同尺寸的设备上按不同的布局显示，并且，手机版在iPhone，OperaMini，Android等设备上有完全一致的表现。使用MediaQue

3、ries为手机创建单独的CSS我们举一个简单的两栏式结构的例子。为了让这个布局更好地在手机上显示，我们为手机版设计一个一栏式布局，且缩小header部分的图片大小。使用MediaQueries最直接的方法是，在你的CSS代码中，加一段独立代码分支，如下：@mediaonlyscreenand(max-device-width:480px){}codehostedbysnipt.net@mediaonlyscreenand(max-device-width:480px){}codehostedbysnipt.net @mediaonlyscree

4、nand(max-device-width:480px){} 接着，在这个分支中，为小屏幕编写独立的CSS定义，这些定义可以覆盖桌面版CSS中的相应定义（只要将这段分支代码放在后面），以下针对小屏幕的CSS将布局变成一栏式，且使用了小尺寸的Header图片：@mediaonlyscreenand(max-device-width:480px){div#wrapper{width:400px;}div#header{background-image:url(media-queries-phone.jpg);height:93px;position

5、:relative;}div#headerh1{font-size:140%;}#content{float:none;width:100%;}#navigation{float:none;width:auto;}}codehostedbysnipt.net@mediaonlyscreenand(max-device-width:480px){div#wrapper{width:400px;}div#header{background-image:url(media-queries-phone.jpg);height:93px;position

6、:relative;}div#headerh1{font-size:140%;}#content{float:none;width:100%;}#navigation{float:none;width:auto;}}codehostedbysnipt.net @mediaonlyscreenand(max-device-width:480px){div#wrapper{width:400px;}div#header{background-image:url(media-queries-phone.jpg);height:93px;positio

7、n:relative;}div#headerh1{font-size:140%;}#content{float:none;width:100%;}#navigation{float:none;width:auto;}} 最终，我们在小屏幕设备上得到了如下显示效果：使用MediaQueries链接单独的CSS文件对于小型的改动，直接在CSS代码中插入移动设备代码分支是很方便的，但对于大型站点，可以使用MediaQueries链接独立的式样表文件，以便在独立的式样表文件中完全自由地为小设备编写CSS代码，方法如下：

8、eet"type="text/css"media="onlyscreenand(max-device-width:480px)"href="small