Demo —— 響應式佈局

時間 2019-11-17

標籤 demo 響應佈局简体版

原文原文鏈接

響應式佈局實例演示

What is 響應式佈局？

       響應式佈局是Ethan Marcotte在2010年5月份提出的一個概念，簡而言之，就是一個網站可以兼容多個終端——而不是爲每一個終端作一個特定的版本。這個概念是爲解決移動互聯網瀏覽而誕生的。
       響應式佈局能夠爲不一樣終端的用戶提供更加溫馨的界面和更好的用戶體驗，並且隨着目前大屏幕移動設備的普及，用「大勢所趨」來形容也不爲過。
       優勢：面對不一樣分辨率設備靈活性強，可以快捷解決多設備顯示適應問題。
       缺點：兼容各類設備工做量大，效率低下；代碼累贅，會出現隱藏無用的元素，加載時間加長；其實這是一種折中性質的設計解決方案，多方面因素影響而達不到最佳效果；必定程度上改變了網站原有的佈局結構，會出現用戶混淆的狀況。

實現響應式佈局的幾種方式：媒體查詢、JS、流體佈局、彈性佈局...css

使用媒體查詢的三種方式html

一、直接在CSS中使用佈局

@media 類型（常選all/screen） and（條件1） and（條件2）{

       CSS選擇器{

                 CSS屬性：屬性值；
           }    
    }

二、使用link連接CSS，media屬性能夠設置媒體查詢方式（經常使用）
eg. <link rel="stylesheet" type="text/css" href="css/02-響應式佈局.css" media="all and (max-width:800px)"/>

三、使用Import導入，直接在url( )後面空格，間接媒體查詢方式
eg. @import url("css/XXX.css") all and (max-width:800px); 條件符合後在連接CSS文件網站

響應式佈局典型 Demo —— HTML部分url

      首先，新建一個HTML 文件，命名Demo.html. 接着，新建一個CSS文件，文件名與HTML文件相同，Demo.css
在HTML文件，head標籤中引入viewport視口功能，以下：

接着，將HTML文件與CSS文件關聯：<link rel="stylesheet" type="text/css" href="css/Demo.css"/>scala

在HTML文件，body標籤中寫入結構語句：設計

<body>        
    <header id="header">
        <ul>
            <li>header1</li>
            <li>header2</li>
            <li>header3</li>
            <li>header4</li>
            <li>header5</li>
            </ul>
        <div>
            icon    
        </div>
    </header>
        
    <section id="main">
        <div class="left">
            left
        </div>
        <div class="center">
            center
        </div>
        <div class="right">
            right
        </div>
    </section>
        
    <footer id="foot">
        footer
    </footer>
            
</body>


響應式佈局典型 Demo —— CSS部分

首先，在PC端我想實現以下效果，顯示header1-5導航欄，隱藏右上角小div：code

在CSS文件中，我先寫入PC端的CSS樣式，在PC端的基礎上進行pad、手機端的更改，代碼以下：htm

*{           /*    使用通用選擇器進行總體共有樣式設置 */          
    margin: 0px;                         
    padding: 0px;
    font-size: 48px;
    text-align: center;
    box-sizing: border-box;
}
#header,
#main,        /*給頭部/主體/底部同時設置寬/高/背景色, 水平垂直居中 */  
#foot{
    height: 100px; 
    width: 1200px;
    background-color: pink;
    line-height: 100px;
    margin: 0 auto;
    min-width: 300px;
}
#header ul{
    width: 80%;           
}
#header ul li{
    float: left;
    width: 20%;
    list-style: none;
    font-size: 20px;
}
#header div{  
  /* li 所有浮動,父盒子ul塌陷,至關於不存在了，div才能浮動到ul右側*/
    display: none;              
    width: 50px;
    height: 50px;
    background-color: yellow;
    float: right;
    line-height: 50px;
    font-size: 20px;
    margin-top: 25px;
    margin-right: 25px;
}
#main{
    height: 520px;      /* 給主體設置高度/文字垂直居中/上下邊框*/
    line-height: 520px;
    border-bottom: 10px solid white;
    border-top: 10px solid white;
    
}
/* 將主體分紅三部分,左:中:右=1:2:1 分別設置不一樣背景色 浮動*/
#main .left{       
    width: 25%;
    height: 500px;
    background-color: greenyellow;
    float: left;
}
#main .center{
    width: 50%;
    height: 500px;
    background-color: orange;
    border-right: 10px solid white;
    border-left: 10px solid white;
    float: left;
}
#main .right{
    width: 25%;
    height: 500px;
    background-color: paleturquoise;
    float: left;
}

接下來，進行響應式的設置，我直接在CSS中引入媒體查詢。

而後是Pad端（假設屏幕最大寬度900px），主體右端隱藏，相似於新浪微博的顯示方式，有興趣的能夠看看，效果圖以下：

CSS樣式以下：

@media  screen and (max-width: 1200px) {     /* PC端頭部/主體/底部寬度100%顯示*/
    #header,
    #main,
    #foot{
        width: 100%;
    }
}
 /*pad端主體只顯示左:中近似=1:2,center左邊有border部分，右border隱藏*/
@media  screen and (max-width:900px ) {    
    #main .right{
        display: none;
    }
    #main .left{
        width: 35%;
    }
    #main .center{
        width: 65%;
        border-right: hidden;
    }
}

最後是手機端(假設最大寬度550px)，我想實現的效果是header1-5導航欄隱藏，右側小div顯示，主體部分的左中右改成上中下顯示，顯示效果以下：

手機端CSS樣式代碼以下：

  /*手機端總體高度增大,主體左中右浮動取消, 寬度都爲100%*/
@media  screen and (max-width: 550px) {  
    #main{
        height: 920px;
    }
    
    #main .left{
        float: none;
        width: 100%;
        height: 250px;
        line-height: 250px;
    }
  /* center左右border改成上下border,爲了避免擠壓內容（IE盒子）,主體總寬度加20px*/
    #main .center{   
        float: none;
        width: 100%;
        height: 400px;
        line-height: 400px;
        border-left: hidden;
        border-bottom: 10px solid white;
         border-top: 10px solid white;
    }
    #main .right{          /*主體右端從新顯示*/
        display: block;
        float: none;
        width: 100%;
        height: 250px;
        line-height: 250px;
    }        
}

    #header ul{       /*頭部導航欄ul隱藏,右上角小div由隱藏改成顯示  */
        display: none; 
    }
    #header div{
        display: block;
        
    }