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

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

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

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

下面是正文~~~

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

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

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

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

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

移動導(dǎo)航欄

PC導(dǎo)航欄

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

整理你的CSS/SASS

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

基于組件的設(shè)計(jì)

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

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

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

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

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

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

當(dāng)設(shè)計(jì)師突然覺得斷點(diǎn)需要更改時(shí)，這個(gè)技巧可以幫助您避免更改大量代碼行。

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

我意識到“移動優(yōu)先”是一個(gè)好主意，但它仍然不是最好的，因?yàn)榫拖裎抑罢f的，有時(shí)移動設(shè)備與桌面設(shè)備非常不同。

解決問題

我的新方法** Basic First** 基于一個(gè)非常簡單的原則，即只有當(dāng)樣式在所有斷點(diǎn)上都是通用的時(shí)候，它才會被寫入組件的主根。

在斷點(diǎn)中需要CSS封裝

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

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

瀏覽器中有一個(gè)檢查元素的小組件，即 logo?？纯此卸嗌俑采w！當(dāng)我看到這么多覆蓋時(shí)，我就知道代碼有問題了！它非常難以閱讀，更糟糕的是，如果你在底部添加了一些內(nèi)容，它會影響所有上面的斷點(diǎn)而沒有任何控制！

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

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

Open breakpoints 打開斷點(diǎn)

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

Closed breakpoints 閉合斷點(diǎn)

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

好的，哪個(gè)更好用？

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

例如：

但是如果我們想在兩個(gè)或更多斷點(diǎn)中使用相同的樣式呢？

非常簡單！您可以在同一個(gè)媒體查詢中使用盡可能多的斷點(diǎn)，使用逗號（表示“或”），因?yàn)槲覀円呀?jīng)將這些斷點(diǎn)保存在變量中，所以可以輕松使用它們。

CSS封裝的威力與閉合斷點(diǎn)

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

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

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

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

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

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

總結(jié)

從這篇文章中需要了解的重點(diǎn)是什么：

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