[CSS] 響應式設計_ZenDei技術網路在線

響應式設計旨在編寫一套代碼，在不同設備上都能有良好的表現。響應式設計有兩種思路：桌面端優先和移動端優先，它們的區別是先實現一種佈局，再使用媒體查詢設置斷點，實現不同屏幕尺寸下的佈局，逐漸過渡到另一端。即由大到小和由小到大的區別。 ...

響應式設計基本原則

1. 流式佈局

頁面需要適應當前視口寬度（甚至高度）；
需要適配視口的元素，使用 % 單位（或者 vh、vw），而不是 px；
使用 max-width 取代 width。

2. 響應式單位

對於大部分長度，使用 rem 單位取代 px，可以簡化整個佈局的自動縮放。

3. 靈活的圖像

預設情況下，改變視口大小的時候，圖片不會自動縮放；
使用%單位設置圖片的大小，並配合max-width使用。
為不同尺寸的屏幕提供不同解析度的圖片。

4. 媒體查詢

媒體查詢可以在特定的視口尺寸下應用特定的CSS樣式。（特定的視口尺寸成為斷點）
媒體查詢需要搭配上面三個原則才能實現響應式佈局。

響應式設計策略

桌面端與移動端的優先

響應式設計有兩種思路：桌面端優先和移動端優先，它們的區別是先實現一種佈局，再使用媒體查詢設置斷點，實現不同屏幕尺寸下的佈局，逐漸過渡到另一端。即由大到小和由小到大的區別。

在設置媒體查詢的斷點時：

桌面端優先：使用max-width；

如下圖，我們首先假設我們開發的桌面端網頁應用寬度是大於1200px的，然後，我們開始考慮小尺寸屏幕的情況，設置max-width: 1200px的媒體查詢，匹配所有寬度≤1200px的屏幕。進一步細化後，最終設置max-width: 900px和max-width: 600px。
移動端優先：使用min-width.

註：一種尺寸的屏幕可能會同時匹配上多個媒體查詢中的CSS選擇器，媒體查詢並不會改變選擇器的具體程度，因此最後的媒體查詢會覆蓋前面的媒體查詢。

移動端優先的優缺點

優點：

完全針對移動用戶進行了優化（移動端應用具有便捷性，市場需求量大，現代互聯網的許多流量都來自於手機，屬於優點）；
移動端的設計會更註重內容，而不是純粹的美學設計。

缺點：

逐步轉變到桌面版本的時候，佈局會顯得很空洞和過於簡化；
由於優先考慮移動端，“畫板”小，創作自由度低，難以創建有區別度的產品；
特定領域的用戶可能更關註桌面端應用而不是移動端。

斷點的選擇

BAD：使用流行設備的尺寸作為斷點，這種策略針對流行的設備做了最大程度的優化，但是忽略了其它設備；同時，這種策略極度依賴設備尺寸，如果設備開發商突然修改了設備尺寸，則需要大範圍修改代碼。
GOOD：在互聯網上查詢儘可能多的設備尺寸，將他們聚集在一起，並選擇中間的稀疏的尺寸作為斷點。這種策略適用性廣，難度適中，推薦使用。
PERFECT：完全忽略設備的尺寸，只關註網頁的內容和設計，當屏幕大小到達某個尺寸後開始崩壞，則添加斷點。這種策略實現難度過大。

在Screen Resolution Stats Worldwide | Statcounter Global Stats可以查看2023年屏幕尺寸的使用量占比。

這些數據可以協助確定斷點，通常需要考慮4種或5種尺寸：手機、縱向平板、橫向平板、桌面端、(大型桌面端)。

下圖中的斷點分別是：600px，900px，1200px，1800px。

能否使用hover？

我們使用響應式設計的初衷是為了用戶使用不同屏幕尺寸的設備都能獲得良好的體驗。但是到目前位置我們區分設備的指標只有簡單的屏幕寬度。

事實上，橫向平板和桌面端在大部分時候的佈局都是類似的，但是它們的操作方式卻截然不同，前者使用觸屏，後者使用滑鼠與鍵盤。

同時，現代UI設計者在桌面端的設計可能結合hover（滑鼠懸浮）與縮放、翻轉等動畫，這種交互設計使得部分按鈕或文本等內容在初始狀態下是隱藏的，而橫向平板的觸屏操作卻無法查看這些內容。

當然，這種情況通常發生在桌面端優先的設計策略中，並且在相容橫向平板界面時，遺漏了對於交互、頁面內容的相容。

由此可見，僅通過屏幕寬度區分設備的媒體查詢是存在缺陷的，媒體查詢應進一步地檢查設備能否使用hover。

媒體查詢匹配能否使用hover的設備

@media (hover:none){
    /* 這裡匹配不能hover的設備 */
}

@media (hover:hover){
    /* 這裡匹配可以hover的設備 */
}

SaSS實現響應式案例

以桌面端優先為例，斷點選擇如下：

0 - 600px：手機
600 - 900px：平板豎向
900 - 1200px：平板橫向
[1200 - 1800]：預設樣式，普通桌面端
1800px + ：大型桌面

使用mixin封裝一個媒體查詢管理器：

@mixin respond($breakpoint){
    @if $breakpoint == phone {
        @media only screen and (max-width: 37.5em) { @content; }     // 600px
    }
    @if $breakpoint == tab-port {
        @media only screen and (max-width: 56.25em) { @content; }     // 900px
    }
    @if $breakpoint == tab-land {
        @media only screen and (max-width: 75em) { @content; }    // 1200px
    }
    @if $breakpoint == big-desktop {
        @media only screen and (min-width: 112.5em) { @content; }    // 1800px
    }
}

需要註意的是，媒體查詢里的em和rem單位都只和瀏覽器預設字體大小（16px）有關，和根節點的字體大小無關。

上面這段代碼中使用em而不是直接使用px是因為用戶可能會更改瀏覽器的預設字體大小，使用em更加靈活。

only screen使得媒體查詢更加嚴謹，當用戶打算列印頁面時，這些媒體查詢不應該生效。

使用：

設置根節點的字體大小，使用上面封裝的mixin匹配不同的屏幕尺寸。

這裡font-size使用百分比而不是直接使用px與上文同理（用戶可能修改瀏覽器預設字體大小）。

html{
    // This defines what 1rem is
    font-size: 62.5%;   // 1rem = 10px, 10/16 = 62.5%

    @include respond(tab-land){ // width < 1200?
        font-size: 56.25%;    // 1rem = 9px, 9/16 = 56.25% 
    }

    @include respond(tab-port){ // width < 900?
        font-size: 50%;    // 1rem = 8px, 8/16 = 50%
    }

    @include respond(big-desktop){
        font-size: 75%;    // 1rem = 12px, 12/16 = 75%
    }
}

註：媒體查詢需要註意代碼順序，應該先media(max-width: 900px)，再media(max-width: 600px)，這樣當屏幕尺寸小於600px時，雖然兩個媒體查詢都能匹配到，但是更加“精細”的後者可以正確地覆蓋前者。

如何實現響應式？

假設我們以桌面端優先，那麼此時CSS代碼都是基於桌面端屏幕尺寸的。

打開瀏覽器開發者工具，使用設備工具欄，拖動界面尺寸，觀察到哪一個斷點開始頁面開始崩壞，然後著手為該部分CSS代碼添加額外的代碼：

需要註意由於選擇桌面端優先，並且配置媒體查詢的時候使用max-width，在寫不同尺寸的CSS代碼的時候應註意由大到小的順序。

如上圖，先tab-port（平板豎向）再phone（移動端）。

響應式圖像

應用場景：

不同尺寸的屏幕：桌面端大屏幕需要較大較清晰的圖片，移動端小屏幕對清晰度要求不高且註重圖片在網路傳輸過程中的流量消耗；
屏幕解析度不同（與尺寸無關）：為低解析度屏幕（1x）和高解析度屏幕（2x）分別準備不同的圖片。

HTML實現

實現方式：

<picture class="footer__logo">
	<source srcset="img/logo-green-small-1x.png 1x, img/logo-green-small-2x.png 2x"
			media="(max-width: 37.5em)">
	<img srcset="img/logo-green-1x.png 1x, img/logo-green-2x.png 2x" alt="Full logo"
		 src="img/logo-green-2x.png">
</picture>

首先，source和img的分離可以實現匹配不同的屏幕尺寸，source支持配置media，與媒體查詢一致，這裡設置的(max-width: 37.5em)匹配上手機的尺寸，當使用手機屏幕訪問時瀏覽器會自動選擇source的圖片，否則使用img的圖片。
其次，使用srcset可以匹配不同解析度（像素密度）的屏幕，語法格式為：圖片路徑1 像素密度1, 圖片路徑2 像素密度2，如上述代碼，低解析度屏幕匹配1x標記，使用img/logo-*-1x.png圖片，高解析度屏幕匹配2x標記的圖片，這一選擇過程由瀏覽器自動完成。
另外，可以通過設置多個source匹配多種屏幕尺寸，但沒必要，一般為手機尺寸單獨設置一個source就足夠了。
最後，img需要繼續設置src，避免舊版瀏覽器無法正確識別srcset屬性。

CSS實現

使用媒體查詢也可以匹配不同解析度的屏幕。

@media (min-resolution: 192dpi) {
    /* 這裡匹配高解析度屏幕 */
}

192dpi是蘋果視網膜屏幕的數據，每英寸屏幕192像素點，超過這個數據的屏幕則認為是高解析度屏幕。

一般會在這裡設置使用較大的圖片，但是目前手機基本都是高解析度屏幕，也會匹配到這裡的大圖片，不太合理。

因此，可以添加媒體查詢的條件：

@media (min-resolution: 192dpi) and (min-width: 600px){
    /* 這裡匹配除了手機以外的高解析度屏幕 */
}

另外，大圖片不僅應用於高解析度屏幕，低解析度屏幕尺寸足夠大時也應該使用大圖片，如下：

@media (min-resolution: 192dpi) and (min-width: 600px),
    (min-width: 2000px){
    /* 這裡匹配除了手機以外的高解析度屏幕，或者尺寸足夠大的低解析度屏幕 */
}

考慮到min-resolution在safari不可用，使用-webkit-min-device-pixel-ratio：

@media (min-resolution: 192dpi) and (min-width: 37.5em),
    (-webkit-min-device-pixel-ratio: 2) and (min-width: 37.5em),
    (min-width: 125em){
	...
}

[CSS] 響應式設計