首頁  >  文章  >  web前端  >  關於css響應式的實現程式碼及效果

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

不言
不言原創
2018-07-24 10:51:231749瀏覽

這篇文章分享給大家的內容是關於css響應式的實現程式碼及效果,內容很有參考價值,希望可以幫到有需要的小夥伴。

1.CSS 來實作響應式

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

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

  • #

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

nbsp;html>


    <meta>
    <title>响应式</title>

    <link>
    <link>
    <link>


    <p>
        头部
    </p>
    <p>
        </p><p>左部</p>
        <p>中部</p>
        <p>右部</p>
    
    <p>底部</p>

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;
}

效果圖:

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

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

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

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

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

############當小於480時,導覽列折疊,body三部分豎直排列顯示,若視窗持續縮小,不在發生變化,區域被壓縮############相關推薦:########## CSS實作響應式佈局的方法############css實作響應下拉式選單的程式碼######

以上是關於css響應式的實現程式碼及效果的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn