回應式網頁設計在許多滿足手機的需求方面,智慧型手機問世前,很少人認真考慮了網站在手持裝置上應呈現的外觀和風格。隨著手機內建網路瀏覽器的問世,這個趨勢也徹底改變。
回應式網頁設計鼓勵抱持不同假設的思維。先前我們常以為網站只能透過電腦瀏覽,但現在也常是為手機和平板電腦設計同一個網站。事實上,行動裝置使用率已逐漸降低。
這種反應靈敏的思維模式,能滿足您的未來需求。使用者瀏覽自己的網站和螢幕時,現在我們甚至能想像不到。這個思維也延伸到螢幕之外。使用者現在也能在沒有螢幕的裝置上觀看你的內容。如果語音助理使用明確的語意 HTML 基礎,就能使用你的網站。
螢幕上的世界也仍在實驗階段。現今市面上有許多配備摺疊式螢幕的裝置。而且會對您的設計帶來一些挑戰。
雙螢幕
折疊式裝置的使用者可以選擇要讓網路瀏覽器只佔據其中一個螢幕,還是能同時顯示在兩個螢幕上。如果瀏覽器跨越兩個螢幕,顯示的網站就會根據兩個螢幕之間的轉軸而細分。內容看起來不太美觀。
可視區域區隔
有一項實驗性媒體功能,可偵測網站是否在雙螢幕裝置上顯示。建議的媒體功能名稱為 viewport-segments
。共有以下兩種類型:horizontal-viewport-segments
和 vertical-viewport-segments
。
如果 horizontal-viewport-segments
媒體功能回報 2
值,vertical-viewport-segments
回報的值為 1
,表示裝置上的轉軸是從上往下執行,並將內容分成兩個並排面板。
@media (horizontal-viewport-segments: 2) and (vertical-viewport-segments: 1) {
// Styles for side-by-side screens.
}
如果 vertical-viewport-segments
媒體功能回報 2
值,horizontal-viewport-segments
回報的值是 1
,則轉軸會從側邊執行,將內容分割成兩個面板並排顯示。
@media (vertical-viewport-segments: 2) and (horizontal-viewport-segments: 1) {
// Styles for stacked screens.
}
如果 vertical-viewport-segments
和 horizontal-viewport-segments
回報的值為 1
,表示網站只會顯示在一個畫面中,即使裝置有多個畫面也一樣。這相當於不使用任何媒體查詢。
環境變數
viewport-segments
媒體功能本身無法協助您設計惱人的轉軸。您必須知道轉軸的大小。這時環境變數就能派上用場。
CSS 中的環境變數可讓你將不愉快的裝置入侵因素列入考量。舉例來說,您可以設計圍繞「凹槽」設計在 iPhone X 上使用環境值 safe-area-inset-top
、safe-area-inset-right
、safe-area-inset-bottom
和 safe-area-inset-left
。這些關鍵字會納入 env()
函式中。
body {
padding-top: env(safe-area-inset-top);
padding-right: env(safe-area-inset-right);
padding-bottom: env(safe-area-inset-bottom);
padding-left: env(safe-area-inset-left);
}
環境變數的運作方式與自訂屬性類似,這表示在環境變數不存在時,您可以傳入備用選項。
body {
padding-top: env(safe-area-inset-top, 1em);
padding-right: env(safe-area-inset-right, 1em);
padding-bottom: env(safe-area-inset-bottom, 1em);
padding-left: env(safe-area-inset-left, 1em);
}
如要在 iPhone X 上運作這些環境變數,請更新指定 viewport
資訊的 meta
元素:
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
網頁版面配置現在會佔滿整個可視區域,並以裝置提供的插邊值安全地填充文件。
系統提議針對摺疊式螢幕提供六個新的環境變數:viewport-segment-width
、viewport-segment-height
、viewport-segment-top
、viewport-segment-left
、viewport-segment-bottom
、viewport-segment-right
。
以下是含有兩欄的版面配置範例,寬度比另一欄寬。
@media (min-width: 45em) {
main {
display: flex;
flex-direction: row;
}
main article {
flex: 2;
}
main aside {
flex: 1;
}
}
如果是具有垂直轉軸的雙螢幕,請將第一欄設定為第一個畫面的寬度,第二欄則設定為第二個螢幕的寬度。
@media (horizontal-viewport-segments: 2) and (vertical-viewport-segments: 1) {
main article {
flex: 1 1 env(viewport-segment-width 0 0);
}
main aside {
flex: 1;
}
}
將雙螢幕視為機會。也許一個螢幕可用來顯示可捲動的文字內容,另一個則顯示圖片或地圖等固定元素。
未來
摺疊式裝置會成為下一個大螢幕嗎?說不定沒有人無法預測行動裝置會有多熱門,因此對於日後的板型規格可以抱持開放的態度。
最重要的是,您應確保網站能因應未來可能發生的任何變化。其中,回應式設計有各式各樣的用途:除了一組實用技巧外,還可以做為打造未來網路世界的心態。
隨堂測驗
測試您對螢幕設定的瞭解程度
下列哪項媒體查詢指定以分割橫向模式的摺疊式裝置?
@media (vertical-viewport-segments: 2) and (horizontal-viewport-segments: 1)
@media (vertical-viewport-segments: 1) and (horizontal-viewport-segments: 1)
@media (horizontal-viewport-segments: 2) and (vertical-viewport-segments: 1)
@media (vertical-viewport-segments: 2) and (horizontal-viewport-segments: 2)
什麼是環境變數?例如 env(safe-area-inset-top)