關於css響應式的實現代碼及效果

來源:互聯網
上載者:User
這篇文章分享給大家的內容是關於css響應式的實現代碼及效果,內容很有參考價值,希望可以幫到有需要的小夥伴。

1.CSS 來實現響應式

CSS實現響應式網站的布局要用到的就是CSS中的媒體查詢接下來來簡單介紹一下:

  • @media 類型 and (條件1) and (條件二){css樣式}

  • <link rel="stylesheet" type="text/css" href="css/demo.css" media=“all and (max-width=980px)”/>

我們只需用到width衍生出的max-width這個屬性,定義輸出裝置中的頁面可見地區寬度來控制該改變的樣式即可。
html代碼如下:

<!doctype html><html><head>    <meta charset="utf-8"/>    <title>響應式</title>    <link rel="stylesheet" type="text/css" href="demo01.css" media="screen and (min-width:1024px)"/>    <link rel="stylesheet" type="text/css" href="demo03.css" media="screen and (max-width:1024px) and (min-width:450px)"/>    <link rel="stylesheet" type="text/css" href="demo02.css" media="screen and (max-width:450px)"/></head><body>    <p class="header">        頭部    </p>    <p class="container clearfix">        <p class="left">左部</p>        <p class="center">中部</p>        <p class="right">右部</p>    </p>    <p class="footer">底部</p></body></html>

demo01.css樣式如下:

body{    margin:0;    text-align:center;}.header{    height:100px;    background-color:red;}.container{    height:400px;    background-color:pink;}.clearfix:after{    display:block;    content:"";    visibility:hidden;    height:0;    clear:both;}.footer{    height:100px;    background-color:blue;}.left{    width:20%;    background-color:orange;    float:left;    height:300px;}.center{    width:55%;    background-color:gray;    float:left;    height:300px;    margin:0 2.5%;}.right{    width:20%;    background-color:yellow;    float:left;    height:300px;}

demo02的樣式如下:

body{    margin:0;    text-align:center;}.header{    height:100px;    background-color:red;}.container{    height:400px;    background-color:pink;}.clearfix:after{    display:block;    content:"";    visibility:hidden;    height:0;    clear:both;}.footer{    height:100px;    background-color:blue;}.left{    width:30%;    background-color:orange;    float:left;    height:300px;}.center{    width:70%;    background-color:gray;    float:left;    height:300px;}.right{    width:100%;    background-color:yellow;    height:300px;}

demo03的樣式:

body{    margin:0;    text-align:center;}.header{    height:100px;    background-color:red;}.container{    background-color:pink;}.clearfix:after{    display:block;    content:"";    visibility:hidden;    height:0;    clear:both;}.footer{    height:100px;    background-color:blue;}.left{    width:100%;    background-color:orange;    height:300px;}.center{    width:100%;    background-color:gray;    height:300px;}.right{    width:100%;    background-color:yellow;    height:300px;}

視窗大於1024px時顯示的樣子

當大於640小於980時,右側欄在底部

當小於480時,導覽列摺疊,body三部分豎直排列顯示,若視窗持續縮小,不在發生變化,地區被壓縮

相關文章

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.