如果你和我一樣一直在網頁設計行業，你知道一件事即將發生，唯一不變的就是變化。大約每10年，我們做事的方式就會發生根本性的轉變，這對於超越我們之前所做的事情至關重要……我們即將再次跨入下一個階段。
01
它是如何開始的-固定螢幕
在千禧年來臨之前，我們首先開始在單一檢視螢幕中進行UI設計，這類螢幕在當時最流行的尺寸是640x480。大多數時候，我們甚至沒有考慮讓螢幕滾動，而是在特定區域或文字區域性區塊中設定了內部捲軸。毋庸置疑，當時的大部分網頁也是用Flash或HTML建立的，並帶有用於佈局的表格。那是在智慧手機出現之前，隨著事物的發展，我們經歷了第一個向“響應式”設計的根本轉變。我們已經走了很長一段路，CSS已得到長足的發展，“響應式”網頁設計從2010年開始才真正獲得了專有工具。
圖表來源： https：//www。webdesignmuseum。org/web-design-history
02
它現在怎麼樣-響應式設計
隨著CSS3的釋出，我們獲得了對“媒體查詢”（Media Queries）的訪問許可權（譯者注：隨著移動網際網路的興起，我們需要適配多種移動端裝置，這就需要用到Media Queries，即“媒體查詢”），此後不久，Ethan Marcotte在2009年底創造了“響應式設計”一詞。十多年來，我們一直使用“響應式網頁設計” （RWD） 建立網頁佈局，作為一種網頁設計方法，僅需基於一種螢幕尺寸進行設計，“響應式”使我們的設計能夠適配各種裝置和螢幕尺寸。
在早期，當行動電話還不相容媒體查詢或JavaScript時，“移動優先”和”漸進式增強”的概念就成為了非常流行的方法，當時有很多CSS完全不受支援。
用我們今天的話來說響應式設計，我們認為頁面的佈局要適配整個瀏覽器、螢幕大小和那些需要投射到整個佈局上的限制。當需要設計從桌面端調整為移動裝置螢幕所需的尺寸時，我們使用“媒體查詢”來更改整個頁面佈局。
03
它的未來是什麼-元件驅動
很快，使用這種“響應式”設計方法可能會被認為與使用表格進行頁面佈局一樣過時—就像我們在90年代所做的那樣。
我們透過基於viewport（視口）的“媒體查詢”獲得了許多強大的工具，但我們也缺乏很多適配的可能性，因為“媒體查詢”是一個適用於整個頁面的通用解決方案，並且對每個使用者來說都一樣。我們缺乏響應“使用者需求”的能力，也缺乏將“響應式”樣式注入“元件”本身的能力。
當我們談到元件時，這裡指的是頁面上的“元素”，這些元素可以由其它“元素”的集合組成。例如卡片、橫劃卡或推薦模組之類的UI內容，每個“塊”都由各種更小的“構建塊”組成。這些元件拼湊在一起構成我們的網頁。我們可以使用 global viewport information（全域性視口資訊）來設定這些元件，但它們仍然無法擁有自己的風格。當我們的設計系統是基於“元件”的而不是基於“頁面”的時，這使得它變得更加困難。
好訊息是這個生態系統正在發生變化，而且它正在迅速變化，這需要我們進行一些思維轉變：考慮如何設計和定義元件樣式以及它們如何適應周圍環境。
CSS正在不斷髮展，“響應式”網頁設計的新時代即將到來。從目前的情況來看，自從我們第一次引入 “響應式網頁設計” （RWD） 以來，僅僅10多年的時間，這個生態系統已經準備好迎接CSS發生一些相當大的改變。
讓我們深入研究一下可以期待哪些型別的變化，這會如何改變我們的設計方法，以及我們如何考慮介面設計。
04
使用者能夠設定基於個人偏好的“媒體查詢”
簡單來說，我們可以期待新的基於偏好的“媒體查詢”來幫助我們更好地“響應”使用者。它們將使我們能夠根據使用者自己的特定偏好或需求來設定網頁樣式。這將使我們能夠根據使用者的體驗偏好來調整使用者體驗。
這絕不是一個完整的列表，但能給你一些想法，這些基於偏好的“媒體查詢”可能包括：
這些將幫助我們構建更具活力和個性化的網頁體驗，專門滿足我們使用者的專屬需求，尤其是那些希望網站易於訪問的使用者。更進一步說，這些基於偏好的“媒體查詢“尊重任何使用者已經在作業系統設定的偏好。舉個例子，當用戶的作業系統偏好設定為“減少動效”時，他們很可能不喜歡你頁面上的超級華麗的介紹、載入或飛入的動畫動效。我們應先尊重他們的偏好，併為其他人提供“動效增強”的體驗。
另一個流行的媒體查詢是@prefers-color-scheme（配色偏好設定），它允許我們根據使用者的偏好和作業系統中的設定將我們的設計更改為“亮色模式”或“暗色模式”。這不依賴於使用者需要手動來更改“暗色模式”，它會自動發生。
05
“容器查詢”為你的設計系統注入新的生命力
CSS 中最令人興奮的新興領域之一是“容器查詢”（container queries），通常也稱為“元素查詢”。從基於“頁面”的“響應式”設計到基於“容器”的“響應式”設計的轉變對發展“設計系統”的作用價值不容低估，儘管今天使用它並不安全，但重要的是要了解其發展方向。
簡而言之，“容器查詢”將允許我們基於“父級容器”而不是整個頁面來設定規則。這意味著任何元件都更加獨立，與現代設計系統保持一致，真正成為“即插即用”模組，可以轉移到任何頁面或佈局，而且無需根據新環境重新考慮所有內容。
“容器查詢”為我們如何規劃、設計和構建特定元件提供了一種更加動態的方法，因為元件本身擁有它的響應資訊。
甚至Ethan Marcotte自己也表達了為什麼“容器查詢”如此重要，我們應該研究一下。
06
考慮各種形態因素
由於各種“形態因素”（form factors）的變化和擴充套件，例如新的螢幕型別，可摺疊屏，我們需要“媒體查詢”來考慮這些場景。在這裡提到的所有內容中，請記住，這是最具實驗性的，並且只是一項正在進行的工作，仍在嘗試解決我們可能遇到的任何複雜問題，同時考慮未來“形體因素”可能會如何發展。
在可摺疊屏場景中，原型中有一些“媒體查詢”可以讓你定位螢幕跨度以及我們如何讓內容根據新環境進行適配。例如，你可以在一個螢幕上放置一個收起的側邊欄（或選單），並允許內容在另一個螢幕上展開並隨頁面滾動。
07
為什麼我們需要它？
我知道你在想什麼，我們已經從事網頁設計並使用“響應式”來進行網頁設計10餘年了。我們對其相當滿意，那麼為什麼要改變呢？如果我們真的以終局視角來看響應式設計，那麼它就是關於個人使用者的使用者體驗設計。我們正朝著一個與每一位個體使用者高度相關的時代邁進。我們的網頁體驗應該去適應使用者的需求偏好。隨著設計系統的發展以及我們如何建立更便攜的網頁，諸如“容器查詢”之類的工具將變得非常有意義。
配圖：CSS 將基於各個層級來確定使用者的最佳體驗
考慮到這一點，這意味著我們現在可以使用基於頁面的媒體查（包括跨越螢幕的細微差別）來設計宏觀佈局；使用容器查詢的元件設計微觀佈局；使用基於使用者偏好的媒體查詢，根據使用者獨特的偏好和需求定製使用者體驗。
對於新的響應式設計，有許多新概念正在被原型化和概念化-請看下面的延伸閱讀。所有這些協同工作的方式需要我們從根本上轉變我們對設計和使用者獨特體驗的看法。我們需要更加適應這樣一個事實：即我們的設計不是靜態的，不僅在佈局上，還有在使用者可獲得的體驗中，我們需要學會在這種模糊性中做出計劃。網頁和設計的未來變得越來越複雜，我們需要適應和挑戰自己，理解“新響應式”體驗的意義。
進一步瞭解
• New media queries you need to know （LogRocket）
• Container Units should be pretty handy （CSS-Tricks）
• It’s time we say goodbye to pixel units
• Say Hello To CSS Container Queries
• Container Queries： a Quick Start Guide
文章來源：百度MEUX，版權歸原作者所有
版權宣告：“IXDC”所推送的文章，除非確實無法確認，我們都會註明作者和來源，本公眾號對轉載、分享的內容、陳述、觀點判斷保持中立，不對所包含內容的準確性、可靠性或完善性提供任何明示或暗示的保證，僅供讀者參考。部分文章推送時未能與原作者取得聯絡，若涉及內容或作品等版權問題，煩請原作者聯絡我們，給出內容所在的網址並提供相關證明資料，我們會核查後立即更正或者刪除有關內容！本公眾號不承擔任何責任，並擁有對此宣告的最終解釋權。
