為什麼你必須開始練習移動優先開發
已發表: 2015-01-12如果您嘗試過編寫響應式網站的代碼，就會遇到這個問題：您更改了一個微小的、簡單的 CSS 屬性，它會改變不同屏幕尺寸的佈局。
這迫使您檢查並再次檢查最新的保證金值是否沒有破壞平板電腦或手機的網站。 當然，您可以通過針對不同屏幕尺寸的特定覆蓋輕鬆解決此問題。 但是在項目過程中，CSS 文件中充滿了異常問題。 然後有異常的異常，後面再有異常的異常的異常。
它很快變得複雜，你最終會與自己的代碼作鬥爭，花費大量的項目時間，並慢慢失去理智。
但不要害怕！ 移動優先開發可以讓您免於頭痛、異常的異常和緩慢的頁面加載。
桌面優先開發會發生什麼
最初為響應式網站的桌面版本進行開發與 CSS 文檔的自然流程背道而馳。 CSS 文件從上到下線性讀取，因此每個 CSS 屬性都會被文檔下方應用的任何新樣式覆蓋。
通過為大屏幕開發，然後在 CSS 文檔的下方添加移動樣式，會出現兩個問題：
- 如果沒有為移動站點明確覆蓋新樣式，則對桌面樣式（文檔中的較高位置）所做的任何更改都將更改移動站點的顯示方式。 創建多餘的無意義的 CSS 行會消耗大量的項目時間，並且違背了 DRY 代碼的原則。
- 移動設備通過呈現所有桌面樣式開始加載頁面。 一旦龐大的桌面版本完成渲染，就會應用移動樣式。 這會加載額外的資源，這意味著移動設備需要更長的時間才能提供完全加載的頁面。
這就是移動優先開發的用武之地。 這種方法鼓勵正確的 CSS 順序（從上到下移動到桌面），確保設備僅在需要時應用它需要的信息。
讓我們來看看這些問題的一些解決方案。
移動設備渲染的樣子
圖片很容易成為網站大小的最大貢獻者，如果設備未連接到 wifi，則需要永遠下載。 從移動樣式中刪除多餘的圖像是提高網站速度的最佳方法。
首先遷移到移動設備意味著僅向移動設備提供一些小圖像。 在下面的示例中，我創建了使用桌面優先和移動優先方法實現的相同 CSS 文檔。
如果您使用的是桌面優先方法，則移動設備將按以下順序呈現：
- 閱讀第一種風格。
- 下載大（即將被替換）圖像。
- 渲染元素。
- 閱讀移動風格。
- 下載小圖像（替換大圖像）。
- 再次渲染元素。
但是，如果使用移動優先方法，則設備按以下順序呈現：
- 閱讀第一種風格。
- 下載小圖。
- 跳過僅桌面樣式（因為它不適用）。
- 渲染元素一次。
該網站不僅在將完成的頁面提供給瀏覽器之前要運行的步驟更少，而且還消除了對未使用的瑣碎圖像的額外調用！
請注意，隨著移動優先開發，媒體查詢將從最大寬度變為最小寬度。 最大寬度查詢將適用於小於 1000 像素的所有設備，而最小寬度查詢將適用於大於 1000 像素的設備。
切換到 min-width 創建了一個障礙，阻止我們為大型設備編寫的新樣式影響網站在小型設備上的外觀。 這提高了響應式網站的加載速度，同時確保您在僅限桌面的媒體查詢中所做的任何更改都不會影響您的移動佈局。 這是雙贏的！
停止與自己戰鬥
假設我們正在開發一個項目，它的 CSS 文件被註釋為三個主要部分：台式機、平板電腦和移動設備。
不幸的是，我們遵循了桌面優先的方法，並且該網站在手機上加載緩慢。 我們嘗試過縮小圖像尺寸，添加瀏覽器緩存，甚至縮小 HTML（粗略）。 但是該網站仍然不適合首次訪問者，並且需要修復。
由於我們使用桌面優先方法構建網站，我們的 .header 元素的 CSS 看起來像這樣： 
我們的目標是減少發送到移動設備的樣式數量。 首先，我們需要清點應用到元素的內容，並在覆蓋我們自己的樣式時記錄下來。
首先，讓我們切換到移動優先的方法。 我們將使移動設備成為我們默認的非媒體查詢樣式（注意：不要在生產中這樣做，它會破壞網站並使您的客戶脾氣暴躁）。 
讓我們再看看我們的圖像，因為這對我們網站的速度影響最大。
由於我們沒有在移動設備上加載背景，我們可以刪除該屬性。 我們稍後會在實際需要時為更大的設備添加圖像。 margin-bottom 屬性也是如此，我們只剩下兩個實際需要應用於移動設備的屬性！
繼續到平板電腦部分，我們需要將背景屬性和填充從桌面樣式上移到平板電腦樣式中，因為平板電腦是下一個要渲染的部分。
請記住，我們的目標是僅在屬性發生更改時覆蓋屬性，並且僅在需要發生更改時添加新屬性，如下圖所示： 
好多了！ 通過檢查移動設備如何呈現我們新優化的 CSS，很快就會發現，與桌面優先方法相比，移動優先開發對小型設備的影響有多大。
更聰明地工作，而不是更努力地工作
開發桌面優先會產生比它修復的問題更多的問題。 “切換到移動優先的開發方法可以讓你聰明地工作，而不是努力工作。 ”
在開發響應式網站時，請記住，默認情況下，媒體查詢之外的所有內容都會顯示。 通過使默認（非媒體查詢）樣式迎合移動設備，我們允許將盡可能少的信息發送到最容易受網站大小影響的設備。
台式機和平板電腦 99.999% 的時間都連接到快速互聯網連接，從而可以高速傳遞大量信息。 手機最有可能通過慢速互聯網連接加載信息。 調整樣式表以適應最敏感的設備使您能夠為客戶提供最好的網站。