一、響應(yīng)式開發(fā)

①在移動(dòng)互聯(lián)日益成熟的時(shí)候，我們?cè)谧烂鏋g覽器上開發(fā)的網(wǎng)頁已經(jīng)無法滿足移動(dòng)設(shè)備的閱讀。

②通常的做法是針對(duì)移動(dòng)端單獨(dú)做一套特定的版本，但是如果終端越來越多那么你需要開發(fā)的版本就會(huì)越來越多（大屏移動(dòng)設(shè)備普及）

③這時(shí)候就出現(xiàn)了響應(yīng)式開發(fā)，簡而言之，就是一個(gè)網(wǎng)站能夠兼容多個(gè)終端

④現(xiàn)在的移動(dòng)設(shè)備屏幕越來越大，越來越多的設(shè)計(jì)師也采用了這種設(shè)計(jì)，在新建站的一些網(wǎng)站現(xiàn)在普遍采用的響應(yīng)式開發(fā)

二、響應(yīng)式開發(fā)的原理

①CSS3中的Media Query（媒體查詢）：通過查詢screen的寬度來指定某個(gè)寬度區(qū)間的網(wǎng)頁布局。

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

②屏幕區(qū)間設(shè)定：

超小屏幕（移動(dòng)設(shè)備） 768px以下
小屏設(shè)備 768px-992px
中等屏幕 992px-1200px
大屏設(shè)備 1200px以上

③舉例：

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

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

三、開發(fā)方式的對(duì)比

①移動(dòng)web開發(fā)+PC開發(fā)和響應(yīng)式開發(fā)的對(duì)比：

②結(jié)論：移動(dòng)web開發(fā)和響應(yīng)式開發(fā)都是現(xiàn)在主流的開發(fā)模式。使用的都是流式布局，來適配不同設(shè)備由于終端設(shè)備的多樣化，新建站的站點(diǎn)會(huì)優(yōu)先用響應(yīng)式來開發(fā)

總結(jié)

以上是生活随笔為你收集整理的响应式开发及其原理的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。