CSS响应式布局实例

标签：

<style type="text/css">
        body{
            margin:0 auto;
            min-width:1366px;
        }
        a{
            text-decoration:none;
            color:black;
        }
        a:hover{
            color:orange;
        }
        a:visited{
            color:black;
        }
        #main{
             background-image:url(img/bg.jpg);
             background-position:contain;
             background-size:100%100%;
             height:826px;
        }

        @media (device-height:568px) and (-webkit-min-device-pixel-ratio:2){/* 兼容iphone5 */
            #main{
                 background-image:url(img/bg1.jpg);
                 height:1080px;
            }
            #iptDown{
                position:relative;
                left:180px;
                top:950px;
                width:50%;
            }
        }
@media only screen and (max-device-width :480px){
    #main{
             background-image:url(img/bg1.jpg);
             height:1880px;
        }
        #iptDown{
                position:relative;
                left:180px;
                top:950px;
                width:50%;
            }
    }

/*6*/
@media (min-device-width : 375px) and (max-device-width : 667px) and (-webkit-min-device-pixel-ratio : 2){
    #main{
            background-image:url(img/bg1.jpg);
             height:1880px;
        }
        #iptDown{
                position:relative;
                left:180px;
                top:950px;
                width:50%;
            }
    }

/*6+*/
@media (min-device-width : 414px) and (max-device-width : 736px) and (-webkit-min-device-pixel-ratio : 3){
    #main{
             background-image:url(img/bg1.jpg);
             height:1880px;
        }
        #iptDown{
                position:relative;
                left:180px;
                top:950px;
                width:50%;
            }
    }

/*魅族*/
@media only screen and (min-device-width :1080px) and (-webkit-min-device-pixel-ratio : 2.5){
    #main{
             background-image:url(img/bg1.jpg);
             height:1880px;
        }
        #iptDown{
                position:relative;
                left:180px;
                top:950px;
                width:50%;
            }
    }

/*mate7*/
@media only screen and (min-device-width :1080px) and (-webkit-min-device-pixel-ratio : 3){
    #main{
             background-image:url(img/bg1.jpg);
             height:1880px;
        }
        #iptDown{
                position:relative;
                left:180px;
                top:950px;
                width:50%;
            }
    }

/*4 4s*/
@media only screen and (device-height :480px) and (-webkit-device-pixel-ratio:2){
    #main{
             background-image:url(img/bg1.jpg);
             height:1880px;
        }
        #iptDown{
                position:relative;
                left:180px;
                top:950px;
                width:50%;
            }
    }
        #topnav{
            float:right;
            margin-right:146px;
            margin-top:10px;
        }
        li{
            display:inline;
            border-right:1px solid #736e6e;
            margin-left:8px;
            font-size:22px;
        }
    </style>

联系我:renhanlinbsl@163.com

2016-7-25

14:05

CSS响应式布局实例

标签：

原文地址：http://www.cnblogs.com/ives/p/5703274.html