前端響應式佈局

前端響應式佈局

前端網頁佈局分類

♣ 固定寬度佈局：以px爲單位設置固定的寬度；

♣ 流式佈局：以百分比爲單位設置相對佈局；

♣ 響應式佈局：通過檢測設備信息，決定網頁的佈局方式，一般情況下檢測設備的寬度來實現(CSS樣式中通過‘@media’來實現)

♣ 柵格佈局：以百分比爲單位將網頁劃分爲均等長度，排版佈局時以這些均等長度作爲度量單位；

響應式佈局

響應式佈局的優勢

一個網站能夠兼容多種設備終端，根據不同的屏幕終端完美展現網站的內容，用戶體驗得到極大提升。

響應式佈局的劣勢

爲了實現不同的終端屏幕的適配不得不利用媒體查詢可很多冗餘的代碼，增加了網站的體積，在移動設備上可能帶來嚴重的性能問題，不適用交互頻繁的頁面

使用場景

常用於企業的官網、博客、新聞資訊類型網站，這些網站以瀏覽內容爲主，沒有複雜的交互(與用戶操作較少的界面)；

開發原理

♣ 媒體查詢：查詢媒介，根據查詢到當前屏幕的寬度，加載不同的樣式來適應不同的屏幕

♣ 實現方式：通過查詢screen的寬度來指定某個寬度區間的樣式；

分類	尺寸	備註
超小屏幕	(移動設備)	w<768px
小屏設備	768px-992px	768
中等屏幕	992px-1200px	992
寬屏設備	1200px以上	w>=1200

簡單案例：

    <style>
    .container{
        width:1200px;
        margin: 0 auto;
        height:1200px;
        background-color: red;
    }
    /*媒體查詢：注意and後面空格的添加*/
    /*iphone: w < 768px*/
    @media screen and (max-width: 768px){
        .container{
            width:100%;
            background-color: green;
        }
    }
    /*pad: w >= 768  && w< 992*/
    @media screen and (max-width: 992px) and (min-width: 768px) {
        .container{
            width:750px;
            background-color: blue;
        }
    }
    /*中等屏幕   w >= 992  && w<1200*/
    @media screen and (max-width: 1200px) and (min-width: 992px) {
        .container{
            width:970px;
            background-color: pink;
        }
    }
</style>

♣媒體查詢詳見:什麼是HTML5的媒體查詢功能

柵格佈局

淺談聖盃佈局

♣ 概念：就是一種三列布局，兩邊定寬，中間自適應。

♣原理：當子元素處於浮動狀態時，設置負margin，子元素會疊蓋到兄弟元素之上。
利用聖盃佈局可以實現一套簡單的柵格系統。

♣柵格系統：談談柵格佈局

Bootstrap的柵格系統

原理

Bootstrap 提供了一套響應式、移動設備優先的流式柵格系統，隨着屏幕或視口（viewport）尺寸的增加，系統會自動分爲最多12列。柵格系統用於通過一系列的行（row）與列（column）的組合來創建頁面佈局，你的內容就可以放入這些創建好的佈局中

♣ “行（row）”必須包含在 .container （固定寬度）或 .container-fluid （100% 寬度）中，以便爲其賦予合適的排列（aligment）和內補（padding）。

♣ 通過“行（row）”在水平方向創建一組“列（column）”。

♣ 類似 .row 和 .col-xs-4 這種預定義的類，可以用來快速創建柵格佈局。Bootstrap 源碼中定義的 mixin 也可以用來創建語義化的佈局。

♣ 通過爲“列（column）”設置 padding 屬性，從而創建列與列之間的間隔（gutter）。通過爲 .row 元素設置負值 margin 從而抵消掉爲 .container 元素設置的 padding，也就間接爲“行（row）”所包含的“列（column）”抵消掉了padding。

♣ 你的內容應當放置於“列（column）”內，並且，只有“列（column）”可以作爲行（row）”的直接子元素。

♣ 如果一“行（row）”中包含了的“列（column）”大於 12，多餘的“列（column）”所在的元素將被作爲一個整體另起一行排列

♣ 柵格類適用於與屏幕寬度大於或等於分界點大小的設備 ， 並且針對小屏幕設備覆蓋柵格類。 因此，在元素上應用任何 .col-md-* 柵格類適用於與屏幕寬度大於或等於分界點大小的設備 ， 並且針對小屏幕設備覆蓋柵格類。 因此，在元素上應用任何 .col-lg-* 不存在， 也影響大屏幕設備。

♣ 在Bootstrap3中主要把屏幕分成了三種（這裏以行（row）來說明）：
.col-xs-* 超小屏幕，手機 (寬度<768px)
.col-sm-* 小屏幕，平板 (寬度≥768px)
.col-md-* 中等屏幕，桌面顯示器 (寬度≥992px)

柵格系統的意義

簡單來說，柵格系統就是規定了界面中每列所佔據的寬度，bootstrap中的column的寬度被事先規範好了。它可以規範在不同的屏幕尺寸下當前列佔據的寬度和一行放幾列(最多十二列);

<div class="row">
   <div class="col-md-1">.col-md-1</div>
   <div class="col-md-1">.col-md-1</div>
   <div class="col-md-1">.col-md-1</div>
   <div class="col-md-1">.col-md-1</div>
   <div class="col-md-1">.col-md-1</div>
   <div class="col-md-1">.col-md-1</div>
    <div class="col-md-1">.col-md-1</div>
    <div class="col-md-1">.col-md-1</div>
   <div class="col-md-1">.col-md-1</div>
   <div class="col-md-1">.col-md-1</div>
   <div class="col-md-1">.col-md-1</div>
   <div class="col-md-1">.col-md-1</div>
</div>
------------------------------------------------
<div class="row">
   <div class="col-md-8">.col-md-8</div>
   <div class="col-md-4">.col-md-4</div>
</div>
------------------------------------------------
<div class="row">
   <div class="col-md-4">.col-md-4</div>
   <div class="col-md-4">.col-md-4</div>
   <div class="col-md-4">.col-md-4</div>
</div>
------------------------------------------------
<div class="row">
   <div class="col-md-6">.col-md-6</div>
   <div class="col-md-6">.col-md-6</div>
</div>

兼容性

♣柵格系統是向上兼容的：小屏幕的樣式是可以在大屏幕上正常顯示的，但是大屏幕上的樣式無法在小屏幕上正常顯示。

♣行可以再次嵌套在列中。如果不能填滿整列，則默認從左排列，如果超出，則換行展示;

♣ Bootstrap柵格系統詳見：Bootstrap響應式佈局

規範

媒體查詢

♣屏幕尺寸分爲四檔：分別爲w<768px，768

 <style>
    .container{
        width:1200px;
        margin: 0 auto;
        height:1200px;
        background-color: red;
    }
    /*媒體查詢：注意and後面空格的添加*/
    /*中等屏幕   w >= 992  && w<1200*/
    @media screen and (max-width: 1200px) and (min-width: 992px) {
        .container{
            width:970px;
            background-color: pink;
        }
    }
    /*pad: w >= 768  && w< 992*/
    @media screen and (max-width: 992px) and (min-width: 768px) {
        .container{
            width:750px;
            background-color: blue;
        }
    }
    /*iphone: w < 768px*/
    @media screen and (max-width: 768px){
        .container{
            width:100%;
            background-color: green;
        }
    }


</style>

參考文檔

♣Bootstrap官方文檔

♣ 響應式佈局與Bootstrap框架

♣ 談談柵格佈局

Bootstrap 工具(設計)

♣ Bootstrap柵格化佈局系統