建站
咨詢
售后
建站咨詢
新聞中心
移動(dòng)優(yōu)先的設(shè)計(jì)方法很棒——它專注于對用戶真正重要的東西，它被很好地實(shí)踐，并且多年來一直是一種常見的設(shè)計(jì)模式。所以開發(fā)你的 CSS 移動(dòng)優(yōu)先也應(yīng)該很棒……對吧？
站在用戶的角度思考問題，與客戶深入溝通，找到裕民網(wǎng)站設(shè)計(jì)與裕民網(wǎng)站推廣的解決方案，憑借多年的經(jīng)驗(yàn)，讓設(shè)計(jì)與互聯(lián)網(wǎng)技術(shù)結(jié)合，創(chuàng)造個(gè)性化、用戶體驗(yàn)好的作品，建站類型包括：成都網(wǎng)站建設(shè)、成都網(wǎng)站設(shè)計(jì)、企業(yè)官網(wǎng)、英文網(wǎng)站、手機(jī)端網(wǎng)站、網(wǎng)站推廣、域名注冊、虛擬空間、企業(yè)郵箱。業(yè)務(wù)覆蓋裕民地區(qū)。
嗯，不一定。經(jīng)典的移動(dòng)優(yōu)先 CSS 開發(fā)基于覆蓋樣式聲明的原則：您從默認(rèn)樣式聲明開始您的 CSS，并在min-width為更大的視口添加斷點(diǎn)時(shí)覆蓋和/或添加新樣式（有關(guān)詳細(xì)概述，請參閱“什么是移動(dòng)優(yōu)先 CSS 以及它為何如此受歡迎？ ”）。但是所有這些異常都會(huì)造成復(fù)雜性和低效率，這反過來又會(huì)導(dǎo)致測試工作量增加和代碼庫更難維護(hù)。承認(rèn)吧——我們當(dāng)中有多少人愿意這樣做？
在您自己的項(xiàng)目中，移動(dòng)優(yōu)先的 CSS 可能仍然是這項(xiàng)工作的最佳工具，但首先您需要根據(jù)您正在處理的視覺設(shè)計(jì)和用戶交互來評估它的適用性。為了幫助您入門，以下是我解決您需要注意的因素的方法，如果移動(dòng)優(yōu)先似乎不適合您的項(xiàng)目，我將討論一些替代解決方案。
移動(dòng)優(yōu)先的優(yōu)勢
移動(dòng)優(yōu)先 CSS 開發(fā)的一些優(yōu)點(diǎn)——以及為什么它長期以來一直是事實(shí)上的開發(fā)方法——很有意義：
發(fā)展層次。毫無疑問，您從移動(dòng)優(yōu)先中獲得的一件事是一個(gè)很好的開發(fā)層次結(jié)構(gòu)——您只需專注于移動(dòng)視圖并開始開發(fā)。
嘗試和測試。這是一種久經(jīng)考驗(yàn)的方法，多年來一直有效：它很好地解決了問題。
優(yōu)先考慮移動(dòng)視圖。移動(dòng)視圖是 最簡單 的，也可以說是最重要的，因?yàn)樗?strong>包含所有關(guān)鍵的用戶旅程，并且通常占用戶訪問的更高比例（取決于項(xiàng)目）。
防止以桌面為中心的開發(fā)。由于開發(fā)是使用臺式計(jì)算機(jī)完成的，因此最初專注于桌面視圖可能很誘人。但是從一開始就考慮移動(dòng)設(shè)備可以防止我們以后陷入困境；沒有人愿意花時(shí)間改造以桌面為中心的網(wǎng)站以在移動(dòng)設(shè)備上工作！
移動(dòng)優(yōu)先的缺點(diǎn)
設(shè)置樣式聲明然后在更高的斷點(diǎn)處覆蓋它們可能會(huì)導(dǎo)致不良后果：
更復(fù)雜。你去的斷點(diǎn)層次越遠(yuǎn)，你從較低的斷點(diǎn)繼承的不必要的代碼就越多。
更高的 CSS 特異性。在類名聲明中已恢復(fù)為其瀏覽器默認(rèn)值的樣式現(xiàn)在具有更高的特異性。當(dāng)您想讓 CSS 選擇器盡可能簡單時(shí)，這對于大型項(xiàng)目來說可能是一件令人頭疼的事情。
需要更多的回歸測試。在較低視圖中對 CSS 的更改（例如添加新樣式）需要對所有較高的斷點(diǎn)進(jìn)行回歸測試。
瀏覽器無法優(yōu)先考慮 CSS 下載。在更廣泛的斷點(diǎn)處，經(jīng)典的移動(dòng)優(yōu)先min-width媒體查詢不會(huì)利用瀏覽器按優(yōu)先級順序下載 CSS 文件的能力。
屬性值覆蓋問題
覆蓋值本身并沒有錯(cuò)。CSS 就是為此而設(shè)計(jì)的。盡管如此，繼承不正確的值是沒有幫助的，并且可能是繁重且效率低下的。當(dāng)您必須覆蓋樣式以將其重置為默認(rèn)值時(shí)，它還可能導(dǎo)致樣式特異性增加，這可能會(huì)在以后引起問題，尤其是在您使用定制 CSS 和實(shí)用程序類的組合時(shí)。我們將無法將實(shí)用程序類用于已以更高特異性重置的樣式。
考慮到這一點(diǎn)，我現(xiàn)在開發(fā)的 CSS 更多地關(guān)注默認(rèn)值。由于沒有特定的順序，也沒有要跟蹤的特定值鏈，這讓我可以同時(shí)開發(fā)斷點(diǎn)。我專注于在封閉的媒體查詢范圍（即具有max-width集合的任何范圍）中尋找常見樣式并隔離特定異常。
這種方法開辟了一些機(jī)會(huì)，因?yàn)槟梢詫⒚總€(gè)斷點(diǎn)視為一張白紙。如果一個(gè)組件的布局看起來應(yīng)該在所有斷點(diǎn)處都基于 Flexbox，那很好，可以在默認(rèn)樣式表中編碼。但是，如果 Grid 看起來更適合大屏幕，而 Flexbox 更適合移動(dòng)設(shè)備，那么當(dāng) CSS 放入封閉的媒體查詢范圍時(shí)，這些都可以完全獨(dú)立完成。此外，同時(shí)開發(fā)要求您預(yù)先對所有斷點(diǎn)中的任何給定組件都有很好的理解。這有助于在開發(fā)過程的早期發(fā)現(xiàn)設(shè)計(jì)中的問題。我們不想陷入為移動(dòng)設(shè)備構(gòu)建復(fù)雜組件的兔子洞，然后在獲得桌面設(shè)計(jì)時(shí)發(fā)現(xiàn)它們同樣復(fù)雜且與我們?yōu)橐苿?dòng)視圖創(chuàng)建的 HTML 不兼容！
盡管這種方法并不適合所有人，但我鼓勵(lì)您嘗試一下。有很多工具可以幫助并發(fā)開發(fā)，例如Responsively App、Blisk等等。
話雖如此，我覺得訂單本身并不是特別相關(guān)。如果你習(xí)慣于專注于移動(dòng)端視圖，對其他斷點(diǎn)的需求有很好的理解，并且更喜歡一次在一臺設(shè)備上工作，那么一定要堅(jiān)持經(jīng)典的開發(fā)順序。重要的是識別常見的樣式和異常，以便您可以將它們放入相關(guān)的樣式表中——一種手動(dòng)搖樹的過程！就個(gè)人而言，我發(fā)現(xiàn)在跨斷點(diǎn)處理組件時(shí)這會(huì)更容易一些，但這絕不是必需的。
實(shí)踐中的封閉媒體查詢范圍
在經(jīng)典的移動(dòng)優(yōu)先 CSS 中，我們會(huì)覆蓋樣式，但我們可以通過使用媒體查詢范圍來避免這種情況。為了說明區(qū)別（為了簡潔起見，我使用 SCSS），讓我們假設(shè)有三種視覺設(shè)計(jì)：
- 小于 768
- 從 768 到 1024 以下
- 1024及更大的
舉個(gè)簡單的例子，塊級元素的默認(rèn)padding值為“20px”，在平板電腦上被覆蓋為“40px”，在桌面上設(shè)置回“20px”。
經(jīng)典min-width移動(dòng)優(yōu)先：
.my-block {
padding: 20px;
@media (min-width: 768px) {
padding: 40px;
}
@media (min-width: 1024px) {
padding: 20px;
}
}封閉媒體查詢范圍：
.my-block {
padding: 20px;
@media (min-width: 768px) and (max-width: 1023.98px) {
padding: 40px;
}
}細(xì)微的區(qū)別在于，移動(dòng)優(yōu)先的示例將默認(rèn)設(shè)置padding為“20px”，然后在每個(gè)斷點(diǎn)處覆蓋它，總共設(shè)置了 3
次。相比之下，第二個(gè)示例將默認(rèn)值設(shè)置padding為“20px”，并且僅在它不是默認(rèn)值的相關(guān)斷點(diǎn)處覆蓋它(在這種情況下，tablet 是例外)。
目標(biāo)是：
- 僅在需要時(shí)設(shè)置樣式。
- 不要讓他們期望以后一次又一次地覆蓋它們。
為此，封閉的媒體查詢范圍是我們最好的朋友。如果我們需要對任何給定視圖進(jìn)行更改，我們會(huì)在適用于特定斷點(diǎn)的 CSS 媒體查詢范圍內(nèi)進(jìn)行更改。我們將不太可能引入不需要的更改，并且我們的回歸測試只需要關(guān)注我們實(shí)際編輯的斷點(diǎn)。
以上面的例子為例，如果我們發(fā)現(xiàn).my-block桌面上的間距已經(jīng)被該斷點(diǎn)處的邊距考慮了，并且由于我們想要完全刪除填充，我們可以通過將移動(dòng)設(shè)備設(shè)置padding在封閉的媒體查詢范圍內(nèi)來做到這一點(diǎn)。
.my-block {
@media (max-width: 767.98px) {
padding: 20px;
}
@media (min-width: 768px) and (max-width: 1023.98px) {
padding: 40px;
}
}我們塊的瀏覽器默認(rèn)值為“0”，因此我們可以將移動(dòng)設(shè)備包裝在封閉的媒體查詢中padding，而不是添加桌面媒體查詢并使用unset或“0”作為值（移動(dòng)優(yōu)先）因?yàn)樗F(xiàn)在也是一個(gè)例外）所以它不會(huì)在更寬的斷點(diǎn)處被拾取。在桌面斷點(diǎn)處，我們不需要設(shè)置任何樣式，因?yàn)槲覀冃枰獮g覽器默認(rèn)值。paddingpaddingpadding
捆綁與分離 CSS
過去，由于瀏覽器的并發(fā)請求數(shù)限制（通常約為 6 個(gè)），將請求數(shù)保持在最低限度非常重要。因此，圖像精靈和 CSS 捆綁的使用成為常態(tài)，所有 CSS 一次性下載，作為具有最高優(yōu)先級的一個(gè)樣式表。
隨著 HTTP/2 和 HTTP/3 的出現(xiàn)，請求的數(shù)量不再是過去的大問題。這允許我們通過媒體查詢將 CSS 分成多個(gè)文件。這樣做的明顯好處是瀏覽器現(xiàn)在可以請求它當(dāng)前需要的 CSS，其優(yōu)先級高于它不需要的 CSS。這更高效并且可以減少頁面呈現(xiàn)被阻塞的整體時(shí)間。
您使用的是哪個(gè) HTTP 版本？
要確定您使用的 HTTP 版本，請?jiān)L問您的網(wǎng)站并打開瀏覽器的開發(fā)工具。接下來，選擇網(wǎng)絡(luò)選項(xiàng)卡并確保協(xié)議列可見。如果“h2”列在Protocol下，則表示正在使用 HTTP/2。
注意：要在瀏覽器的開發(fā)工具中查看協(xié)議，請轉(zhuǎn)到網(wǎng)絡(luò)選項(xiàng)卡，重新加載頁面，右鍵單擊任何列標(biāo)題（例如，名稱），然后檢查協(xié)議列。
此外，如果您的網(wǎng)站仍在使用 HTTP/1...為什么？?。∧阍诘仁裁?？對 HTTP/2有很好的用戶支持。
拆分 CSS
將 CSS 分成單獨(dú)的文件是一項(xiàng)有價(jià)值的任務(wù)。使用相關(guān)屬性鏈接單獨(dú)的 CSS 文件media允許瀏覽器立即識別哪些文件是需要的（因?yàn)樗鼈兪卿秩咀枞模?，哪些可以延遲。基于此，它為每個(gè)文件分配適當(dāng)?shù)膬?yōu)先級。
在以下在移動(dòng)斷點(diǎn)上訪問的網(wǎng)站示例中，我們可以看到移動(dòng)和默認(rèn) CSS 以“最高”優(yōu)先級加載，因?yàn)楫?dāng)前需要它們來呈現(xiàn)頁面。其余的 CSS 文件（打印、平板電腦和桌面）仍會(huì)下載以備日后需要，但優(yōu)先級為“最低”。
使用捆綁的 CSS，瀏覽器必須先下載 CSS 文件并對其進(jìn)行解析，然后才能開始渲染。
雖然，如前所述，將CSS 分成不同的文件，鏈接并用相關(guān)media屬性標(biāo)記，瀏覽器可以優(yōu)先考慮它當(dāng)前需要的文件。使用封閉的媒體查詢范圍允許瀏覽器在所有寬度上執(zhí)行此操作，而不是經(jīng)典的移動(dòng)優(yōu)先min-width查詢，其中桌面瀏覽器必須以最高優(yōu)先級下載所有 CSS。我們不能假設(shè)桌面用戶總是有一個(gè)快速的連接。例如，在許多農(nóng)村地區(qū)，互聯(lián)網(wǎng)連接速度仍然很慢。
媒體查詢和單獨(dú)的 CSS 文件的數(shù)量將根據(jù)項(xiàng)目要求因項(xiàng)目而異，但可能類似于下面的示例。
|
捆綁的 CSS 這個(gè)單個(gè)文件包含所有 CSS，包括所有媒體查詢，它將以最高優(yōu)先級下載。 |
分離的 CSS 分離 CSS 并media在每個(gè)標(biāo)簽上指定一個(gè)屬性值link允許瀏覽器優(yōu)先考慮它當(dāng)前需要的內(nèi)容。在上面列出的五個(gè)文件中，將以最高優(yōu)先級下載兩個(gè)：默認(rèn)文件和與當(dāng)前媒體查詢匹配的文件。其他將以最低優(yōu)先級下載。 |
根據(jù)項(xiàng)目的部署策略，對一個(gè)文件（mobile.css例如 ）的更改只需要 QA 團(tuán)隊(duì)在該特定媒體查詢范圍內(nèi)的設(shè)備上進(jìn)行回歸測試。將其與部署單個(gè)捆綁site.css文件的前景進(jìn)行比較，這種方法通常會(huì)觸發(fā)完整的回歸測試。
繼續(xù)
移動(dòng)優(yōu)先 CSS 的采用是 Web 開發(fā)中一個(gè)非常重要的里程碑。它幫助前端開發(fā)人員專注于移動(dòng) Web 應(yīng)用程序，而不是在桌面上開發(fā)網(wǎng)站，然后嘗試對其進(jìn)行改造以在其他設(shè)備上工作。
我認(rèn)為沒有人想再次回到那種開發(fā)模式，但重要的是我們不要忽視它所強(qiáng)調(diào)的問題：如果我們優(yōu)先考慮一種特定設(shè)備（任何設(shè)備），事情很容易變得復(fù)雜且效率低下。其他。出于這個(gè)原因，專注于 CSS 本身，始終注意什么是默認(rèn)設(shè)置和什么是異常，似乎是很自然的下一步。我已經(jīng)開始注意到我自己的 CSS 以及其他開發(fā)人員的 CSS 進(jìn)行了一些小的簡化，并且測試和維護(hù)工作也更加簡化和高效。
一般來說，盡可能地簡化 CSS 規(guī)則的創(chuàng)建最終是一種比繞著覆蓋循環(huán)更干凈的方法。但無論您選擇哪種方法，它都需要適合項(xiàng)目。移動(dòng)優(yōu)先可能會(huì)（也可能不會(huì)）成為所涉及內(nèi)容的最佳選擇，但首先您需要充分了解您要進(jìn)行的權(quán)衡取舍。
網(wǎng)站標(biāo)題：移動(dòng)優(yōu)先CSS：是時(shí)候重新思考了嗎？
分享網(wǎng)址：http://m.5511xx.com/article/cdpigso.html
