什么是響應(yīng)式布局？
時(shí)間：2024-02-14 04:55:01 | 來源：網(wǎng)站運(yùn)營
時(shí)間：2024-02-14 04:55:01 來源：網(wǎng)站運(yùn)營
什么是響應(yīng)式布局？：
“ 我們正在為鼠標(biāo)和鍵盤、手持游戲控制器和觸摸界面進(jìn)行設(shè)計(jì)。簡而言之，我們面臨著比以往更多的設(shè)備、輸入模式和瀏覽器。我們需要以更有效便捷的方式提供在不同尺寸的屏幕下相同的體驗(yàn)設(shè)計(jì)，因此我們需要響應(yīng)式?！?/i>
我們正在面臨空前爆炸的設(shè)備時(shí)代，折疊屏、可穿戴設(shè)備的出現(xiàn)使帶屏設(shè)備尺寸愈加復(fù)雜，為這樣復(fù)雜的場景做設(shè)計(jì)，繞不開一個關(guān)鍵詞
“響應(yīng)式”。作為一個UX設(shè)計(jì)師，項(xiàng)目落地中經(jīng)常會涉及到響應(yīng)式布局的內(nèi)容，在規(guī)范的創(chuàng)建中也經(jīng)常會涉及到這個概念，這次參與公司項(xiàng)目的前端組件庫的構(gòu)建、系統(tǒng)級B端規(guī)范的創(chuàng)建中也頻繁涉及。在我粗略的印象中，響應(yīng)式是一種可變的，布局、組件彈性響應(yīng)不同分辨率的設(shè)計(jì)，但是它背后的技術(shù)以及深層概念一直沒有梳理清楚，借著今年項(xiàng)目創(chuàng)立新領(lǐng)域規(guī)范的機(jī)會，我決定深入沉淀一些東西，構(gòu)建這個系列。
響應(yīng)式布局（Responsive Layout）的定義
響應(yīng)式布局的定義是2010年5月由
Ethan Marcotte在他的文章《 Responsive Web Design 》
提出的一個概念。他認(rèn)為，隨著移動互聯(lián)網(wǎng)的誕生，為每一個終端做一個特定的版本已經(jīng)不合適了，而應(yīng)該是一個網(wǎng)站兼容多個終端，網(wǎng)頁智能響應(yīng)不同尺寸的屏幕。
正如該領(lǐng)域最著名的一句話
“Content is like water”，如果把各種尺寸的屏幕看作容器，那么內(nèi)容就應(yīng)該像水一樣適應(yīng)不同的容器形狀。和響應(yīng)式建筑相似，Web設(shè)計(jì)同樣應(yīng)該做到根據(jù)不同設(shè)備環(huán)境自動響應(yīng)及調(diào)整界面。
本質(zhì)上來說，響應(yīng)式布局設(shè)計(jì)是適配不同屏幕尺寸的最佳展示方法，
在設(shè)計(jì)上來說，頁面的元素能夠響應(yīng)適配多種分辨率，通過前端技術(shù)在不同分辨率下，智能化的對頁面內(nèi)容進(jìn)行布局，達(dá)到適合當(dāng)前屏幕的最佳展示效果。響應(yīng)式布局設(shè)計(jì)不屬于一項(xiàng)單獨(dú)的技術(shù)，而是一個術(shù)語，用于描述網(wǎng)頁設(shè)計(jì)的方法或一組最佳實(shí)踐。在 Marcotte 最初的探索中，使用的是靈活的網(wǎng)格和媒體查詢。在撰寫該文章后的近 10 年中，響應(yīng)式工作已成為默認(rèn)設(shè)置。現(xiàn)代 CSS 布局方法本質(zhì)上是響應(yīng)式的。
以下以“星巴克官網(wǎng)”為例
當(dāng)窗口從1920調(diào)整為1024時(shí)，頁面左側(cè)的登陸界面消失，菜單位置變更為頭部菜單
當(dāng)窗口從1024調(diào)整為768時(shí)，布局卡片跟隨窗口進(jìn)行尺寸縮放調(diào)整
當(dāng)窗口從768調(diào)整為425（手機(jī)等小屏幕尺寸），頁面在卡片布局、菜單位置、菜單樣式上皆有調(diào)整。
所以以后說到響應(yīng)式布局，再也不要單純的理解為僅僅是組件寬度的自適應(yīng)，它其實(shí)是一個多維度的共同適配，會涉及到頁面布局的改變，菜單等功能的變化，內(nèi)容的刪減等。
響應(yīng)式布局的三個CSS技術(shù)
想要更深入的了解響應(yīng)式布局，不得不理解它所使用到的幾個CSS概念，前端CSS中對響應(yīng)式布局的實(shí)現(xiàn)主要通過：
- 百分比流式布局（Liquid Layout）
- 網(wǎng)格系統(tǒng) (Grid System)
- @media 媒體查詢
對屏幕尺寸進(jìn)行響應(yīng)布局。
流式布局（Liquid Layout）
流式布局（Liquid Layout）就是百分比布局，也稱非固定像素布局。將頁面的寬度設(shè)置成百分比，根據(jù)窗口的寬度來進(jìn)行伸縮，不受固定像素的限制，內(nèi)容向兩側(cè)填充。
頁面元素的寬度按照屏幕分辨率進(jìn)行適配調(diào)整，但整體頁面布局不變。屏幕分辨率變化時(shí)，頁面里元素的大小會變化而但布局不變。使用%百分比定義寬度（搭配min-*、max-*屬性使用），高度大都是用px來固定住，可以根據(jù)可視區(qū)域 (viewport) 和父元素的實(shí)時(shí)尺寸進(jìn)行調(diào)整，盡可能的適應(yīng)各種分辨率。
例如設(shè)計(jì)中的柵欄系統(tǒng)，不同分辨率下的刪格系統(tǒng)，整體布局不變，刪格的Column、Gutter、Offset的尺寸會根據(jù)屏幕分辨率進(jìn)行調(diào)整。
刪格系統(tǒng)網(wǎng)格系統(tǒng) (Grid System)
Grid布局是一種新的 CSS 布局模型，比較擅長將一個頁面劃分為幾個主要區(qū)域，以及定義這些區(qū)域的大小、位置、層次等關(guān)系。
它使用一系列容器、行和列來布局和對齊內(nèi)容，這就意味著它可以同時(shí)處理列和行，號稱是當(dāng)前最強(qiáng)大的的 CSS 布局方案。
我們可以這樣理解，Grid布局是把頁面分成一個一個的基礎(chǔ)網(wǎng)格，通過不同數(shù)量基礎(chǔ)網(wǎng)格的組合，自由組合成不同的單元格布局，同時(shí)對每個單元格可以進(jìn)行獨(dú)立控制。因此也被稱為“二維布局”。
Grid System媒體查詢@media
媒體查詢@media由媒體類型和一個或多個檢測媒體特性的條件表達(dá)式組成。可以在不改變頁面內(nèi)容的情況下，為特定的一些輸出設(shè)備定制顯示效果。通過媒體查詢，我們可以確定設(shè)備顯示器的具體特征，并為其設(shè)定CSS樣式。媒體查詢可用于檢查
- 視口的寬度和高度
- 設(shè)備的寬度和高度
- 方向（平板電腦/手機(jī)處于橫向還是縱向模式？）
- 解析度
通過媒體查詢@media提供的一系列條件，我們可以對頁面進(jìn)行不同的布局組合，當(dāng)媒體查詢結(jié)果滿足某些條件時(shí)，布局上進(jìn)行相應(yīng)的變化。例如，當(dāng)分辨率小于多少時(shí)，卡片由1*4切換為2*2; 當(dāng)窗口分辨率過小時(shí)，頭部菜單隱藏收起等。
通過流式布局（Liquid Layout）、網(wǎng)格系統(tǒng)（Grid System）、媒體查詢@media實(shí)現(xiàn)的響應(yīng)式布局可以實(shí)現(xiàn)在不同分辨率下最佳的頁面體驗(yàn)，保持統(tǒng)一的體驗(yàn)感受。
此處敲黑板！?。?br>
響應(yīng)式的響應(yīng)的是瀏覽器窗口的寬度，而不是設(shè)備類型。響應(yīng)式的響應(yīng)的是瀏覽器窗口的寬度，而不是設(shè)備類型。響應(yīng)式的響應(yīng)的是瀏覽器窗口的寬度，而不是設(shè)備類型。重要的事情說三遍，所以打開響應(yīng)式的網(wǎng)站，改變?yōu)g覽器的寬度，就可以看見頁面隨同窗口寬度進(jìn)行變化。
從設(shè)計(jì)的角度看，響應(yīng)式布局在頁面上的展現(xiàn)可以簡單歸納為：
- 頁面布局從寬度的適配到整體布局的調(diào)整
- 頁面組件內(nèi)容的增減
由于當(dāng)前32:9、21:9顯示器以及曲面屏的不斷發(fā)展，多屏、分屏觀看窗口已成為用戶使用的常態(tài)，當(dāng)用戶自定義窗口大小時(shí)，符合當(dāng)前窗口尺寸的內(nèi)容布局十分重要。頁面橫向內(nèi)容展示不全，需要滾動條橫向操作無疑是非常致命的體驗(yàn)缺陷（不排除某些專業(yè)情況的需要）。在互聯(lián)網(wǎng)技術(shù)及用戶體驗(yàn)飛速發(fā)展的今天，頁面的響應(yīng)式布局已是一種常規(guī)基礎(chǔ)操作。
在線咨詢