响应式布局案例实战

响应式布局案例实战

前几天做了一个响应式布局的案例，这里和大家分享一下，主要是总结一些经验。

1.html代码

    
    

        

                
               
               
       
       

           
           搜索
       
       

           
               
               
               
           
           

               
首页
               
课程
               
公告
               
登录
           
       
   
   
   

       
   
   
   

       

           

               
                   
               
               
HTML5
           
           

               
                   
               
               
CSS3
           
           

               
                   
               
               
LESS
           
           

               
                   
               
               
BootStrap
           
       
       

           

               
                   
               
               
HTML5
           
           

               
                   
               
               
CSS3
           
           

               
                   
               
               
LESS
           
           

               
                   
               
               
BootStrap
           
       
   
   
   

   
​

2.css代码

js代码

 

3.效果图

• 屏幕大于1024px

• 屏幕大于640px,小于1024px logo变了，主体内容变为两列

• 屏幕小于640px logo变了，出现导航按钮，点击出现下拉列表，主体内容变为一列

4.总结

• 那个导航按钮我为图方便，我用的是span，其实可以用字体图标（css精灵图），用的所有插图都是网上随便找的，尺寸不是很合适，特别是banner那张图，已经变形啦，但无伤大雅，主要是拿来练手，大家想好看，可以先在ps上处理下。

• 头部和主体内容都是用浮动做的，其实可以用flex布局，主要是考虑到float的兼容性更好，在加上我们用的是pc优先，本来就是考虑其兼容性比移动优先要好，所以干脆让其好上加好。

• 那个下拉菜单是用定位做的，注意transition属性不能与display一起使用，我们想隐藏某个div，也可以将其高度设为0，相当于display:none;但此时应该会使文本内容溢出，所以还要设置overflow：hidden;想要显示时不能直接height：auto；要写死一个固定高度，这样才能实现一个过渡的动画效果。按钮可以看到是透明的，主要用来一个background:transparent;其实不设置背景的时候默认就是这个。

• 中间用了一点js，主要是控制导航按钮，单击按钮会出现下拉列表。巧妙地在ul后面加上了一个open类，所以我们只要控制有无open类，就可以控制其显示或隐藏，所以绑定按钮。js用的自调用函数，也可以Windows.onload(太老啦)。toggle方法正好满足我们的需求。

• 主体内容我没有用margin来调每列盒子之间的距离，而是用的padding，图片外的盒子设置一个padding，不加边框，不加背景，在设置一个box-sizing:border-box;效果其实和用margin一样，主要是这样避免了最后还要将最后一个margin给去掉。

• 这只是一个很简单的响应式布局的案例，初学者可以拿来练练手，会对响应式布局有更深的理解。