CSS3媒体查询入门，制作自己的响应式导航
现今每天都有更多的手机和平板电脑问市。消费者能够拥有可想象到的各种规格和形状的设备，但是网站开发人员却面临一个挑战：如何使他们的网站在传统浏览器、手机和平板电脑浏览器上有很好的效果，如何在各种大小的屏幕上提供一流的用户体验,答案是：采用响应式设计。响应式设计可以随所显示的屏幕大小而改变。实现响应式设计的主要方法是使用 CSS 媒体查询。--摘自IBMdeveloperworks
相信大家很多人都了解Bootsrap这个响应式框架，简单来说，该框架根据不同的分辨率提供非常友好的浏览体验，里面的核心就是媒体查询@media。
如何使用?
@media (min-width:800px) { ... }
这是一条基本的媒体查询语句，@media可以看成 if
如果@media后面的条件满足，则执行后面的花括号的语句。
简单尝试
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <style> *{ margin: 0; padding: 0; } .header{ background-color: red; width: 100%; height: 40px; } @media ( min-width: 500px) { .header{ background-color: blue; } } </style> <body> <div class="header"></div> </body> </html>
@media ( min-width: 500px) 这里开始判断当前的分辨率，如果最小分辨率为500px（分辨率在500px以上）则
.header 的背景色变为蓝色，相当于重写了background-color属性。
请多尝试其他属性如width，block等等。
制作响应式导航
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>媒体查询</title> <script rel="script" src="jquery.min.js"></script> <script> $(document).ready(function () { $("a").click(function(){ $("li").toggle(); }) }) </script> <style> *{ margin: 0; padding: 0; } #header{ width: 100%; background-color: #4db14d; height: 40px; } ul{ } li{ float: left; list-style: none; width: 80px; display: block; padding-top: 10px; color: #fff; background-color: #4db14d; text-align: center; } a{ padding-top: 10px; padding-bottom: 10px; color: #fff; display: none; width: 100%; text-align: center; } @media ( max-width: 520px ) { li{ width: 100%; border-top: 1px solid #1b961b; padding-bottom: 10px; display: none; } a{ display: block; } } </style> </head> <body> <div id="header"> <a>Fuck</a> <ul> <li>测试1</li> <li>测试2</li> <li>测试3</li> <li>测试4</li> <li>测试5</li> <li>测试6</li> </ul> </div> </body> </html>
在导航中，除了菜单以外肯定还有展开菜单的图标(低分辨率下),所以我们制作的时候可以先写上，并将它隐藏。
我们做的仅是判断分辨率，如果分辨率小余某个值，则隐藏菜单，使用菜单突变将它显示。
注意的是我这里将小分辨率下，菜单的宽度设置到了100%，方便使用体验。可以尝试更好地方法。
然后使用jQuery显示/隐藏菜单or菜单图标
除此之外，还可以有更多的判断，如：分辨率在800-1200之间（min-width:800px）and (max-width:1200px)
@media (min-width:800px) and (max-width:1200px) { ... }
