前端響應式你瞭解多少？

前端網紅集結號，傳遞一線全棧技術，帶你穿越前端時空。

公眾號「前端時空」最近推出每日一題活動，

回覆「0」進入交流群，

回覆「1」看每日一題，

回覆「2」看答案解析

一兩年以前，我發現，很多人都被響應式搞得很迷茫。現在，我依舊發現還有很多人不知道響應式到底是什麼。所以，我感到很奇怪。到底是哪裡有問題，讓這麼多前端的小夥伴對於這個響應式很捉急？我想，平時總是會百度「響應式」這個關鍵詞吧，數以萬計的教程，難道就沒有一個能讓自己頓悟的？我不信。為了天下沒有難學的編程，我打算繼續為這萬分之一添磚加瓦。

什麼是響應式？

很多人對響應式很迷茫，最大原因是不知道什麼是響應式。我打算來詳細講解「什麼是響應式」。

任何行業都喜歡創造術語，響應式就是前端中的一個。所謂的術語，必然和專業、高深、枯燥掛鉤。你想百般親近它，但是它只能催你入睡。

響應式：響應不同屏幕設備合適地展現網頁效果的方式或者手段。

何謂響應？我喊你，你回應我，這就是響應。你響應了我喊你這件事。我打你，你反過來打我。這不對，雖然這沒有違揹物理規律，但是這不夠尊老愛幼。

什麼是響應式？不同的屏幕，它不能一成不變地顯示一樣的內容，根據不同媒介的屏幕大小顯示合適的內容。請記住合適這個詞。要理解一個術語，咬文嚼字是有必要的。

我們來看一下，這個不同屏幕的含義。我遇到過不止一個同學，絞盡腦汁地在思考，如果用戶縮放百分比，鼠標拖動屏幕調整大小，我該怎麼響應？

你的響應式是要適應天地萬物麼？那種非人類的用戶，拿著瀏覽器，網頁百分比調個不停，網頁大小鼠標拖了個不亦樂乎？現實中沒有這樣的用戶。

一個響應式板磚的響應式歷程

我們先來畫一塊板磚。

一直以來，我都堅信我們的中國漢字，博大精深，源遠流長，但自從遇見了百度翻譯，我沒想到，原來我們的漢語拼音更加博大精深！

<code> /* 板磚div */

/<code>

<code> /* 重置一下 */
* {
    padding: 0;
    border: 0;
    margin: 0;
    outline: 0;
    box-sizing: border-box;
}
 /* 板磚 */
.MLGB {
    width: 800px;
    height: 500px;
    background-color: antiquewhite;
}
/<code>

為了讓大家更清楚地看到全貌，我們將瀏覽器整體調整一下。那麼，這麼一調整呢，問題就來了。大家發現沒有，底部居然出現了可惡的橫向滾動條！什麼鬼？！這一點都不響應式！

<code> /* 重置一下 */
* {
    padding: 0;
    border: 0;
    margin: 0;
    outline: 0;
    box-sizing: border-box;
} 

 /* 板磚 */
.MLGB {
    width: 100%;
    height: 500px;
    background-color: antiquewhite;
}
/<code>

解決它，把寬度變成百分比，就，設置成100%好了。完美，一個響應式的板磚，應天時地利，涅槃重生！那麼，同學們，響應式是不是很簡單？我們甚至有N種方法，讓這個板磚響應式。

<code> /* 重置一下 */
* { 

    padding: 0;
    border: 0;
    margin: 0;
    outline: 0;
    box-sizing: border-box;
}
 /* 板磚 */
.MLGB {
    width: 1rem;
    height: 500px;
    background-color: antiquewhite;
}
/<code>

<code>document.documentElement.style.fontSize = window.innerWidth + "px";
/<code>

直接使用 1 rem。這個 1 rem 等於多寬呢？就是我們的 100% 寬度，也就是等於，html標籤裡 font-size 設置的字體大小的值。所以，1 rem 等於 html 根元素的 font-size 的數值大小。不信的話，我們可以設置寬度為 0.5 rem。

<code>/* 板磚 */
.MLGB {
    width: 0.5rem;
    height: 500px;
    background-color: antiquewhite;
}
/<code>

<code> /* 板磚 */
.MLGB {
    /* 寬度不見啦！*/
    height: 500px;
    background-color: antiquewhite;
}
/<code>

<code>document.getElementsByClassName("MLGB")[0].style.width = window.innerWidth + "px";
/<code> 

所以大家看到沒有，我們直接用萬能的 js，直接給板磚設置等於窗口內容的寬度，不就行了？所以，大家還記得前面的那個詞語，手段嗎？

情況當然沒這麼簡單

真正的歷練，才剛剛開始。

假設我們接到這樣一個，開發天貓雙十一主戰場頁面...的異想天開的任務。

<code>

    
    

        歡迎大家來到，雙十一天貓主會場！
    

    
    

        
        
        
        
        
        
        
        
        
        
    


/<code>

<code>/* 搬磚 */
.MLGB {
    height: 500px;
    background-color: antiquewhite;
}
.header {
    height: 50px;
    line-height: 50px;
    font-size: 18px;
    color: #fff;
    text-align: center;
    background-color: #f97c7c; 

}
.nav {
    height: 100px;
}
.box {
    display: block;
    width: 10%;
    float: left;
    height: 100px;
    line-height: 100px;
    text-align: center;
    text-decoration: none;
    font-size: 18px;
    border: 1px solid #ddd;
}
/<code>

我們刷刷刷，幾個分會場入口就佈局完了。然後，我們一邊欣賞這個10分鐘之內創造的藝術品，一邊品嚐著我們前面的青椒炒肉不放辣椒的時候。測試跑了過來...

雞哥，雞哥，出問題了！嗯！你眼露殺氣，在測試和他的手機之間，以每秒300赫茲的頻率，來回掃描。不，這不可能，我是一個合格的高級前端工程師，你這是什麼手機？哼，我拿自己的瞧瞧。於是，10秒鐘後... 小李啊，你回去吧，這個BUG，我來解決。

<code> /* 搬磚 */
.MLGB {
    height: 500px;
    background-color: antiquewhite;
}
.header {
    height: 50px; 

    line-height: 50px;
    font-size: 18px;
    color: #fff;
    text-align: center;
    background-color: #f97c7c;
}
.nav {
    height: 100px;
}
.box {
    display: block;
    width: 100%;
    max-width:187px;
    float: left;
    height: 100px;
    line-height: 100px;
    text-align: center;
    text-decoration: none;
    font-size: 18px;
    border: 1px solid #ddd;
}
/<code>

你陷入了沉思，我經過幾個小時的深思熟慮，將CSS改成如上。你發現，入口雖然排版變好看了，但是，入口元素高度卻超出板磚盒子範圍了，而且，nav的高度也是固定的。

<code> /* 搬磚 */
.MLGB {
    /* height: 500px; */
    background-color: antiquewhite;
}
.header {
    height: 50px;
    line-height: 50px;
    font-size: 18px;
    color: #fff;
    text-align: center;
    background-color: #f97c7c;
}
.nav {
    /* height: 100px; */
}
.nav::after{
    content:"";
    display: block;
    height: 0;
    clear: both;
    overflow: hidden;
}
.box {
    display: block;
    width: 100%;
    max-width: 187px;
    float: left;
    height: 100px;
    line-height: 100px;
    text-align: center;
    text-decoration: none;
    font-size: 18px;
    border: 1px solid #ddd;
}
/<code>

沒錯，她的是iphone5，而你的是iphone6。你很快發現了，那個box的寬度不能寫死。你想起了昨天仔細研究過的《高級前端必會的flex佈局》。

<code> /* 重置一下 */
* {
    padding: 0;
    border: 0;
    margin: 0;
    outline: 0;
    box-sizing: border-box;
}
 /* 搬磚 */
.MLGB { 

    /* height: 500px; */
    background-color: antiquewhite;
}
.header {
    height: 50px;
    line-height: 50px;
    font-size: 18px;
    color: #fff;
    text-align: center;
    background-color: #f97c7c;
}
.nav {
    /* height: 100px; */
    display: flex;
    flex-wrap: wrap;
}
.nav::after {
    content: "";
    display: block;
    height: 0;
    clear: both;
    overflow: hidden;
}
.box {
    display: flex;
    justify-content: center;
    flex: 1 1 auto;
    min-width: 160px;
    height: 100px;
    line-height: 100px;
    text-decoration: none;
    font-size: 18px;
    border: 1px solid #ddd;
}
/<code>

你的 iPhone6

她的 iPhone 5 的樣式和你的 iPhone 6 沒有太大差異，她的 iPhone 5都正常了。

同時，更復雜的需求又來了

領導說，要做一個，用戶購物車，收藏，設置，查看過的商品側邊欄，類似QQ那樣。PC端默認顯示，手機端默認隱藏，而且在頭部區域，顯示一個能夠點擊彈出側邊欄的按鈕。

<code> /* 重置一下 */
* {
    padding: 0;
    border: 0;
    margin: 0;
    outline: 0;
    box-sizing: border-box;
}
 /* 搬磚 */
.MLGB {
    /* height: 500px; */
    background-color: antiquewhite;
}
.header {
    height: 50px;
    line-height: 50px;
    font-size: 18px;
    color: #fff;
    text-align: center;
    background-color: #f97c7c;
}
.nav {
    /* height: 100px; */
    display: flex;
    flex-wrap: wrap;
}
.nav::after {
    content: "";
    display: block;
    height: 0;
    clear: both;
    overflow: hidden;
}
.box {
    display: flex;
    justify-content: center;
    flex: 1 1 auto;
    min-width: 160px;
    height: 100px;
    line-height: 100px;
    text-decoration: none;
    font-size: 18px;
    border: 1px solid #ddd;
}
/<code>

<code>

     

    

        歡迎大家來到，雙十一天貓主會場！
    

    
    

        
        

            
購物車

            
我的收藏

            
瀏覽記錄

            
已經購買

            
設置

            
退出

        

        
        

            
            
            
            
            
            
             

            
            
            
        

    


/<code>

很快，PC端的效果就實現了。難道就沒有更簡單的方法？

媒體查詢（@media），這個專為響應式而生的超級英雄，終於要從塵封的歷史遺蹟中走出來。

<code>/* 重置一下 */
* {
    padding: 0;
    border: 0;
    margin: 0;
    outline: 0;
    box-sizing: border-box;
}
 /* 搬磚 */
.MLGB {
    /* height: 500px; */
    background-color: antiquewhite;
}
.header {
    display: flex;
    align-items: center;
    height: 50px;
    font-size: 18px;
    padding: 0 10px;
    color: #fff;
    text-align: center;
    background-color: #f97c7c;
}
.main {
    display: flex;
}
/* 切換菜單的按鈕 */
.toggle-menu {
    height: 30px;
    line-height: 30px;
    text-align: center;
    width: 30px;
    font-size: 14px;
    background-color: #607d8b;
    margin-right: 10px;
}
/* 菜單 */
.menu {
    flex: 0 0 140px;
    background-color: #5ed5e4;
} 

.menu .li {
    height: 30px;
    line-height: 30px;
    padding: 0 10px;
    border-bottom: 1px solid #91dfe8;
}
.nav {
    /* height: 100px; */
    display: flex;
    flex-wrap: wrap;
    flex: 1 1 100%;
}
.nav::after {
    content: "";
    display: block;
    height: 0;
    clear: both;
    overflow: hidden;
}
.box {
    display: flex;
    justify-content: center;
    flex: 1 1 auto;
    min-width: 160px;
    height: 100px;
    line-height: 100px;
    text-decoration: none;
    font-size: 18px;
    border: 1px solid #ddd;
}
/<code>

<code>

    
    

        
菜

        
歡迎大家來到，雙十一天貓主會場！

    

     

    

        
        

            
購物車

            
我的收藏

            
瀏覽記錄

            
已經購買

            
設置

            
退出

        

        
        

            
            
            
            
            
            
            
            
            
            
        

    


/<code>

首先呢，你沒有管其他亂起八遭的東西，先簡單粗暴地讓這個菜單顯示出來。因為，作為一個擁有高級思維的高級前端，你知道，想那麼多是沒用的。接下來你要幹嘛呢？你要把這個菜單，隱藏起來，因為目前是PC端。

<code>@media screen and (min-width: 500px) {
    .header .toggle-menu {
        display: none;
    }
}
/<code>

十分完美，@media 果然厲害。下一步需要幹什麼？移動端按鈕顯示，菜單隱藏。

<code> /* PC端要做的 */
@media screen and (min-width: 500px) {
    .header .toggle-menu {
        display: none;
    }
}
/* 移動端要做的 */
@media screen and (max-width: 500px) {
    .header .toggle-menu {
        display: block;
    }
    .menu {
        display: none;
    }
}
/<code>

看起來十分完美，零 JavaScript。下來要幹嘛呢？給按鈕綁定點擊事件，點擊切換菜單的 display 值就行了。

記住那個妙言：響應不同屏幕設備合適地展現網頁效果的方式或者手段。響應式是一種解決不同屏幕正確且合適地顯示網頁內容的思想和方法，它並不等於框架，更不等於 Bootstrap。

語雀：https://www.yuque.com/fest/articles/csi0kq

網站：https://www.fest.plus/detailed-responsive-design.html

閱讀更多 前端時空 的文章

關鍵字: 500px 瀏覽器 響應