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