終于上線啦，有好多好玩的模型，包括最近很火的瞬息宇宙

這篇文章探討了新一代響應(yīng)式設(shè)計的演進過程。它強調(diào)了過去幾年中響應(yīng)式設(shè)計的變革和發(fā)展，以適應(yīng)不斷變化的設(shè)備和用戶體驗需求。

文章介紹了新一代響應(yīng)式設(shè)計的關(guān)鍵特點和趨勢。它強調(diào)了對移動設(shè)備的優(yōu)化，包括移動優(yōu)先設(shè)計和快速加載速度的重要性。它還討論了靈活性和自適應(yīng)性的概念，以確保設(shè)計在各種屏幕尺寸和設(shè)備上都能良好展示。

該文章還提到了新一代響應(yīng)式設(shè)計所面臨的挑戰(zhàn)和解決方案。其中包括處理復(fù)雜布局和交互元素的方法，以及利用新技術(shù)和工具來實現(xiàn)更高級的響應(yīng)式效果。

下面是正文~~~

大家都知道響應(yīng)式設(shè)計的工作原理，但我們大多數(shù)開發(fā)人員仍在尋找最佳實踐來實現(xiàn)它。2013年初，當我開始進行響應(yīng)式設(shè)計時，我很快意識到網(wǎng)絡(luò)上流行的方法并不適合我，于是我開始了深入響應(yīng)式設(shè)計領(lǐng)域的旅程。

為什么“移動優(yōu)先”不再足夠好！

移動優(yōu)先方法論的發(fā)明初衷是基本樣式以移動端為主，但這并不總是正確的！在我的第一個響應(yīng)式案例研究中，我參與了一個非常大的項目。

在移動設(shè)備上，導(dǎo)航欄是一個側(cè)邊菜單，而在桌面設(shè)備上，導(dǎo)航欄是一個頂部菜單。

查看移動和桌面導(dǎo)航欄

移動導(dǎo)航欄

PC導(dǎo)航欄

那時我明白了，在這種情況下，“移動優(yōu)先”并不合適！你問為什么？因為無論我是“移動優(yōu)先”還是“桌面優(yōu)先”，我都會發(fā)現(xiàn)自己需要大量的CSS覆蓋！而且如果有一件事我在CSS中學(xué)到的，那就是CSS覆蓋是邪惡的！

整理你的CSS/SASS

為了使用我的新方法，保持高度組織性并為小組件維護小的SASS文件非常重要。這樣，我們就可以享受這種技術(shù)的好處。

基于組件的設(shè)計

為了實現(xiàn)有序性，最重要的是將樣式分成小組件并使用單獨的文件進行分離。在使用SASS時，我們可以使用@import進行分離。這有助于我們實現(xiàn)有序性。

輸出將只有一個CSS文件，這對于瀏覽器和服務(wù)器來說是一件好事，以避免有大量的HTTP請求。

媒體查詢的樣式應(yīng)該放在哪里？

文件的分離為我們提供了一種簡單的結(jié)構(gòu)順序，因此將媒體查詢放置在每個組件中，靠近它們自己的樣式，是最好的位置。

現(xiàn)在，由于每個組件都有相同的斷點，將它們放入變量中以便更輕松地維護代碼會更好。創(chuàng)建一個 SASS 文件（例如：_devices.scss），將常見的斷點作為變量。

現(xiàn)在只需使用變量即可：

當設(shè)計師突然覺得斷點需要更改時，這個技巧可以幫助您避免更改大量代碼行。

新“基本優(yōu)先”方法，以及為什么放棄了“移動優(yōu)先”！

我意識到“移動優(yōu)先”是一個好主意，但它仍然不是最好的，因為就像我之前說的，有時移動設(shè)備與桌面設(shè)備非常不同。

解決問題

我的新方法** Basic First** 基于一個非常簡單的原則，即只有當樣式在所有斷點上都是通用的時候，它才會被寫入組件的主根。

在斷點中需要CSS封裝

除此之外，我還有另一個問題需要解決。網(wǎng)絡(luò)上的常見做法是使用僅以最小寬度為起點而沒有最大寬度的斷點（稱之為“開放式斷點”），這是一個非常大的問題！你問為什么？因為你幾乎無法控制上層斷點會受到什么影響！

以下是《衛(wèi)報》網(wǎng)站的一個例子，展示了為什么開放的斷點是不好的！

瀏覽器中有一個檢查元素的小組件，即 logo。看看它有多少覆蓋！當我看到這么多覆蓋時，我就知道代碼有問題了！它非常難以閱讀，更糟糕的是，如果你在底部添加了一些內(nèi)容，它會影響所有上面的斷點而沒有任何控制！

了解響應(yīng)式斷點類型

我將響應(yīng)式斷點分為兩種類型，打開斷點和閉合斷點。

Open breakpoints 打開斷點

當我們使用媒體查詢時，有一個起始值但沒有結(jié)束值。例如:

Closed breakpoints 閉合斷點

當我們使用具有開始和結(jié)束值的媒體查詢時。例如：

好的，哪個更好用？

請僅使用閉合斷點！除非是我們想要支持的最大分辨率的最后一個斷點。

例如：

但是如果我們想在兩個或更多斷點中使用相同的樣式呢？

非常簡單！您可以在同一個媒體查詢中使用盡可能多的斷點，使用逗號（表示“或”），因為我們已經(jīng)將這些斷點保存在變量中，所以可以輕松使用它們。

CSS封裝的威力與閉合斷點

現(xiàn)在讓我們再來看看這個主標題組件。在這張圖片中，HTML 是相同的，但移動設(shè)備+平板電腦和桌面版本看起來完全不同！

我所做的是將“移動導(dǎo)航欄”的樣式放在移動+平板電腦的斷點上，將桌面的樣式放在桌面斷點上。

• 移動設(shè)備+平板電腦——適用于0像素至1000像素寬度。
• 桌面版 - 適用于1001像素及以上的屏幕。

現(xiàn)在，“移動導(dǎo)航欄”的樣式不會影響“桌面導(dǎo)航欄”的樣式，反之亦然。它們都被封裝了！

這意味著在這種方法中，以這個例子來說，如果我改變移動平板的樣式，桌面版樣式并不會受到影響；同樣地，如果我改變桌面版的樣式，移動平板的樣式也不會受到影響。這就是CSS響應(yīng)式設(shè)計的自由性！

這就是我對“基礎(chǔ)優(yōu)先”方法論的全部內(nèi)容！

總結(jié)

從這篇文章中需要了解的重點是什么：

• 以小組件為單位工作。
• 在單獨的文件中定義SASS變量中的常見閉合斷點。
• 在每個需要的組件中使用SASS變量的斷點。
• 工作和思考時要“基本優(yōu)先”！只有當一個組件的所有斷點都需要使用公共樣式時，才使用公共樣式！否則，只將它們放在相關(guān)的斷點中。
• CSS覆蓋是有害的！盡量避免使用。