響應式開發及其原理

一、響應式開發

①在移動互聯日益成熟的時候，我們在桌面瀏覽器上開發的網頁已經無法滿足移動設備的閱讀。

②通常的做法是針對移動端單獨做一套特定的版本，但是如果終端越來越多那么你需要開發的版本就會越來越多（大屏移動設備普及）

③這時候就出現了響應式開發，簡而言之，就是一個網站能夠兼容多個終端

④現在的移動設備屏幕越來越大，越來越多的設計師也采用了這種設計，在新建站的一些網站現在普遍采用的響應式開發

二、響應式開發的原理

①CSS3中的Media Query（媒體查詢）：通過查詢screen的寬度來指定某個寬度區間的網頁布局。

@media screen and (max-width:??px) and(nin-width:??px){屬性樣式}

②屏幕區間設定：

• 超小屏幕（移動設備） 768px以下
• 小屏設備 768px-992px
• 中等屏幕 992px-1200px
• 大屏設備 1200px以上

③舉例：

<div class="container"></div>

        *{
            margin: 0;
            padding: 0;
        }
        .container{
            width: 1000px;
            margin: 0 auto;
            height: 200px;
            background: #ccc;
        }
        /* 超小屏設備(768px以下):    當前容器的寬度100%, 背景是藍色 */
        @media screen and (max-width:768px){
            .container{
                width: 100%;
                background: blue;
            }
        }
        /* 小屏設備  (768px-992px): 當前容器的寬度750px,背景是綠色 */
        @media screen and (max-width:992px) and (min-width:768px){
            .container{
                width: 750px;
                background: green;
            }
        }
        /* 超小屏設備(992px-1200px):當前容器的寬度970px, 背景是紅色 */
        @media screen and (max-width:1200px) and (min-width:992px){
            .container{
                width: 970px;
                background: red;
            }
        }
        /*  超小屏設備(1200px以上):  當前容器的寬度1170px, 背景是黃色 */
        @media screen and (min-width:1200px){
            .container{
                width: 1170px;
                background: yellow;
            }
        }

三、開發方式的對比

①移動web開發+PC開發和響應式開發的對比：

②結論：移動web開發和響應式開發都是現在主流的開發模式。使用的都是流式布局，來適配不同設備由於終端設備的多樣化，新建站的站點會優先用響應式來開發