回應式網頁設計與手機之間有許多反應。在智慧型手機問世之前，幾乎沒有人認真思考手持裝置應如何呈現網站外觀及風格。隨著手機內建網路瀏覽器的高峰期改變，這項變革也隨之改變。
回應式網頁設計吸引了提出假設的心態。以往，一般會假設網站只能透過電腦瀏覽，現在則是為手機和平板電腦設計相同的網站。事實上，網頁的行動裝置使用率如今已超越桌機。
這種回應式思維對未來很有幫助。我們完全無法想像，有人有機會用這兩種裝置瀏覽您的網站。而且，這個思維模式也延伸超過螢幕。如今，使用者手上沒有螢幕的裝置也能輕鬆存取您的內容。如果您使用強大的語意 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 媒體功能本身無法協助您設計令人不悅的轉軸。您需要知道轉軸的大小。這時 environment 變數就可以派上用場。
CSS 中的環境變數可讓您將不肖人士入侵裝置的因素納入考量。舉例來說，您可以使用 safe-area-inset-top、safe-area-inset-right、safe-area-inset-bottom 和 safe-area-inset-left 環境值來設計 iPhone X 上的「凹槽」。這些關鍵字會納入 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 (horizontal-viewport-segments: 2) and (vertical-viewport-segments: 1)@media (vertical-viewport-segments: 2) and (horizontal-viewport-segments: 1)@media (vertical-viewport-segments: 2) and (horizontal-viewport-segments: 2)@media (vertical-viewport-segments: 1) and (horizontal-viewport-segments: 1)什麼是環境變數？例如：env(safe-area-inset-top)