html5+css3+jquery完成响应式布局

　　响应式布局，流体布局，自适应布局，静态布局等等，这是移动设备的飞速发展，前端人员不得不跟上潮流的一个方向。实际上各种设备尺寸，分辨率大都不同，真的适应各种设备依旧是不现实的，首先是浏览器差异化，让我们去hack，现在是终端问题，让我展现出不同的设备不同的样式，折腾来折腾去，终于我们走进了热火朝天的响应式布局，自适应只能算是响应式布局的一个子集吧，对于流体个栅格后面会再次提到，有兴趣可以关注。

　　首先讲讲实现原理吧，css3的媒体查询功能的确帮了我们很大一个忙，@media query，它的出现也带出了响应式布局的一连串东西，经典的是来自国外伟人的布局这里就不多阐述，我待会儿会提出一个实际的例子，本人测试过有效。@media query它可以检查我们的设备的分辨率，但是我们往往是设置一个区间，这样一个区间一个区间的去布局代码，让我们在手机端打开是一个效果，pc端一个效果，平板一种样式。

　　注意一点，手机网站不等于在手机端打开网页，这是两个不同的概念。手机网站我一直是使用jquery mobile 实现的前端设计，话不多说看代码：

　　html：

1. <div class="navBox">
   
2.     <div class="nav">
   
3.         <ul>
   
4.         <li class="current"><a href="#" target="_blank">首页<small>home</small></a></li>
   
5.         <li><a href="#" target="_blank">电影<small>movie</small></a></li>
   
6.         <li><a href="#" target="_blank">电视剧<small>tv play</small></a></li>
   
7.         <li><a href="#" target="_blank">动漫<small>comic</small></a></li>
   
8.         <li><a href="#" target="_blank">综艺<small>variety</small></a></li>
   
9.         <li><a href="#" target="_blank">纪录片<small>documentary</small></a></li>
   
10.         <li><a href="#" target="_blank">公开课<small>public resourse</small></a></li>
    
11.         </ul>
    
12.         <!--match IE9,IE10 or not ie-->
    
13.         <!--[if (get IE 8) | ! (IE)]><!-->
    
14.         <h1 class="title"><a href="#">腾讯视频</a><span class="btn"><img src="image/btn.png" width="34" height="34" alt=""/></span></h1>
    
15.         <!--<![endif]-->
    
16.     </div>

复制代码

　　这里识别了一次ie,但是我并没有设置其IE6-8的样式，就测试玩玩。

　　css：

1. @charset "utf-8";
   
2. /* CSS Document */
   
3. *{
   
4.     padding:0px;
   
5.     margin:0px;
   
6.     border:0px;
   
7. }
   
8. .navBox {
   
9.     width:100%;
   
10.     height:40px;
    
11.     background:#333;
    
12. }
    
13. .nav{
    
14.     margin:0 auto;
    
15.     border:0px solid #ccc;
    
16. }
    
17. .nav ul {
    
18.     list-style:none;
    
19.     width:auto;
    
20. }
    
21. .nav ul li {
    
22.     height:40px;
    
23.     text-align:center;
    
24. }
    
25. .nav ul li a {
    
26.     display:block;
    
27.     font-size:16px;
    
28.     text-decoration:none;
    
29.     line-height:39px;
    
30.     color:rgba(103,204,247,1.00);
    
31. }
    
32. @media screen and (min-width: 1000px) {
    
33. .nav{
    
34.     width:1000px;
    
35.     height:40px;
    
36. }
    
37. .nav ul li {
    
38.     float:left;
    
39.     width:auto;
    
40.     min-width:120px;
    
41.     margin-left:10px;   
    
42. }
    
43. .nav ul li.current {
    
44.     background:#f60;
    
45. }
    
46. .nav ul li:hover a {
    
47.     background-color:#f60;
    
48. }
    
49. .nav ul li.current:hover a {
    
50.     color:#fff;
    
51. }
    
52. .nav .title {
    
53.     display:none;
    
54. }   
    
55. }
    
56. @media screen and (min-width: 640px) and (max-width: 1000px) {
    
57. .nav {
    
58.     width:auto;
    
59.     height:40px;
    
60. }
    
61. .nav ul li {
    
62.     float:left;
    
63.     width:14%;
    
64.     min-width:80px;
    
65.     font-size:12px;
    
66.     line-height:20px;
    
67. }
    
68. .nav ul li.current {
    
69.     background-color:#f60;
    
70. }
    
71. .nav ul li:hover a {
    
72.     background-color:#f60;
    
73. }
    
74. .nav ul li.current:hover a {
    
75.     color:#fff;
    
76. }
    
77. small {
    
78.     display:none;
    
79. }
    
80. .nav .title {
    
81.     display:none;
    
82. }   
    
83. }
    
84. @media screen and (max-width: 640px) {
    
85.     .navBox {
    
86.         height:auto;
    
87.         background:#444;
    
88.     }
    
89.     .nav {
    
90.         width:auto;
    
91.         height:auto;
    
92.     }
    
93.     .nav ul {
    
94.         position:relative;
    
95.         display:none;
    
96.     }
    
97.     .nav ul li {
    
98.         width:100%;
    
99.         min-width:100px;
    
100.         background:#333;
     
101.     }
     
102.     .nav ul li a:active,
     
103.     .nav ul li a:hover {
     
104.         background-color:#f60;
     
105.         transition:all ease-in 0.3s;
     
106.     }
     
107.     .nav ul li.current{
     
108.         background-color:#f60;
     
109.     }
     
110.     .nav .title {
     
111.         position:relative;
     
112.         width:100%;
     
113.         height:40px;
     
114.         border-top:1px solid #444;
     
115.         background:#333;
     
116.         text-align:center;
     
117.         letter-spacing:1px;
     
118.         font-size:24px;
     
119.         line-height:40px;
     
120.     }
     
121.     .nav .title a {
     
122.         color:#f60;
     
123.         text-decoration:none;
     
124.     }
     
125.     .nav .title .btn {
     
126.         position:absolute;
     
127.         right:10px;
     
128.         top:0px;
     
129.         width:34px;
     
130.         cursor:pointer;
     
131.     }
     
132.     }

复制代码

　　我把屏幕区间设置成三个不同的区间，@media screen and (min-width: 1000px){//放置像素1000+屏幕的css样式渲染网页，这里是做的导航菜单}

　　@media screen and (min-width: 640px) and (max-width: 1000px){//这里放置屏幕像素640到1000的css样式}

　　@media screen and (max-width: 400px) {//这里放置小于等于640像素的样式}

　　三个区间可以按照你的兴趣或者要求设置成不同的样式，不过大体样式建议相同，不然用户一打开了发现傻缺了，咋个不是这个网站了哇，于是果断关闭那就尴尬了。

　　jquery代码：

1. <script type="text/JavaScript">
   
2. $(document).ready(function (){
   
3.     $(".btn").on("click",function(){
   
4.         $(".nav").find("ul").slideToggle(400);
   
5.         });   
   
6. })
   
7. </script>

复制代码

　　脚本代码很简单了，我就简单不去分辨他在那个区间了，因为他只有在屏幕像素小于640像素的时候才会出现并且被看到，其他的情况我都将其display隐藏了，完成这一步就可以看到我点击旁边的缩放标签弹出UL标签，下滑上拉的效果，总体来说还是非常简单的，下面附上三张对应不同尺寸的效果图。

　　像素位于1000+的时候：

　　像素位于640到1000时：

　　像素小于640时：

　　点击下拉收起：

　　就完成了这次的导航响应式布局操作，后面还会分享更多内容，在这里我个人觉得dwcc2015+版本的软件对于前端来说有一定的好处，就是可以调整屏幕像素进行布局，当然了其中的bootstrap组件也可以完成相应的内容啦，而且还有精致的魔板提供给你，当然了纯属个人爱好，有兴趣的朋友可以下载去玩玩。

　　后面我还会分享更多，包括html5的canvas动画，和transform的关键帧动画，以实际例子来分享吧，也是自己在用的比如什么点水动画，地图效果。

总觉得哪里有点问题啊

还是挺有借鉴意义的