相信大家很多人都了解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) { ... }