京东首页的响应式布局的实现原理

随着科技日新月异的发展，屏幕分辨率越来越高，4k屏的普及，1366屏已经很少见了，而1024屏更是几乎无人在使用了。现如今响应式的处理已经越来越少了，这对开发者来说是个好消息。但在一些大型网站还是做了响应式的处理，我们以京东首页为例，来看看是如何实现的吧：
效果图：
浏览器宽度较大时的效果：

浏览器宽度较大时的效果图.png

浏览器宽度较小时的效果：

浏览器宽度较小时的效果图.png

对比发现仅仅是整体宽度及中间的div的宽度改变，而其它没有改变。整体改变的宽度恰好等于中间div改变的宽度。
代码：
浏览器宽度较大时——jdbig.css

            *{
                margin: 0;
                padding: 0;
            }
            body{
                background: ghostwhite;
            }
            .user{
                width: 100%;
                height: 30px;
                background: #F1F1F1;
            }
            .user #user{
                width: 1210px;
                height: 30px;
                background: #A3A3A3;
                margin: 0 auto;
            }
            .top{
                width: 100%;
                height: 80px;
                background: #F04848;
            }
            .top img{
                display: block;
                margin: 0 auto;
            }
            .search{
                width: 100%;
                height: 150px;
                background: #FFFFFF;
            }
            #center{
                width: 100%;
                height: 454px;
                background: #F04848;
            }
            #center #flash{
                margin: 0 auto;
                width: 1210px;
                height: 454px;
                margin-bottom: 500px;
                position: relative;
            }
            #center #flash #left{
                float: left;
                width: 235px;
                height: 454px;
                background: white;
            }
            #center #flash #gg{
                width: 740px;
                height: 454px;
                float: left;
                background: #05FFE9;
            }
            #center #flash #right{
                float: right;
                width: 235px;
                height: 454px;
                background: white;
            }

浏览器宽度较小时——jdsmall.css

            *{
                margin: 0;
                padding: 0;
            }
            body{
                background: ghostwhite;
            }
            .user{
                width: 100%;
                height: 30px;
                background: #F1F1F1;
            }
            .user #user{
                width: 1010px;
                height: 30px;
                background: #A3A3A3;
                margin: 0 auto;
            }
            .top{
                width: 100%;
                height: 80px;
                background: #F04848;
            }
            .top img{
                display: block;
                margin: 0 auto;
            }
            .search{
                width: 100%;
                height: 150px;
                background: #FFFFFF;
            }
            #center{
                width: 100%;
                height: 454px;
                background: #F04848;
            }
            #center #flash{
                margin: 0 auto;
                width: 1010px;
                height: 454px;
                margin-bottom: 500px;
                position: relative;
            }
            #center #flash #left{
                float: left;
                width: 235px;
                height: 454px;
                background: white;
            }
            #center #flash #gg{
                width: 540px;
                height: 454px;
                float: left;
                background: #05FFE9;
            }
            #center #flash #right{
                float: right;
                width: 235px;
                height: 454px;
                background: white;
            }

页面布局：

            

    
        
        
        
        
    
    
        

            

            
        
        

            ![](../img/top.jpg)
        
        

        

        

            

            

            

        
        
    

如有问题欢迎交流。

如转载请注明出处，谢谢！