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

随着科技日新月异的发展,屏幕分辨率越来越高,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;
            }

页面布局:

            <!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <link rel="stylesheet" type="text/css" href="css/jdbig.css" media="screen and (min-width:1210px)" />
        <link rel="stylesheet" type="text/css" href="css/jdsmall.css" media="screen and (max-width:1210px)" />
    </head>
    <body>
        <div class = "user">
            <div id="user">
            </div>
        </div>
        <div class = "top">
            ![](../img/top.jpg)
        </div>
        <div class="search"></div>
        <div id="center">
        <div id="flash">
            <div id="left"></div>
            <div id="gg"></div>
            <div id="right"></div>
        </div>
        </div>
    </body>
</html>

如有问题欢迎交流。

如转载请注明出处,谢谢!

推荐阅读更多精彩内容