響應(yīng)式布局的規(guī)則并不是特別復(fù)雜，只要注意兩個(gè)問題：

分段響應(yīng)規(guī)則   組件寬度適應(yīng)

1. 分段響應(yīng)規(guī)則

敲黑板，響應(yīng)式的響應(yīng)，面向的核心對(duì)象是瀏覽器窗口的寬度，而不是設(shè)備類型。所以打開使用響應(yīng)式的網(wǎng)站，我們通過改變?yōu)g覽器的寬度，就可以看見不同的展示效果，比如下圖的星巴克官網(wǎng)。

用一篇文章，幫你看懂網(wǎng)頁響應(yīng)式布局原理

我們可以發(fā)現(xiàn)，瀏覽器寬度每達(dá)到一個(gè)數(shù)值（Breakpoint）的時(shí)候，頁面的排版和樣式就會(huì)發(fā)生明顯的變化，而這就是響應(yīng)式設(shè)計(jì)最重要的功能 —— 分段展示。

用一篇文章，幫你看懂網(wǎng)頁響應(yīng)式布局原理

也就是說，響應(yīng)式規(guī)則就是為頁面分配不同的寬度區(qū)間，每個(gè)區(qū)間有各自展示的樣式，用來應(yīng)對(duì)不同的場景和設(shè)備類型，常見的適配區(qū)間大致如下：

包含圖片截圖 320-800 ：移動(dòng)端收集屏幕 800-1200：平板或上網(wǎng)本屏幕 1200-無窮：一般的電腦顯示器

面對(duì)分段式的布局、樣式變更，我們就要關(guān)注到底發(fā)生了哪些變化?？偨Y(jié)起來，可以簡單的歸納成三種組件的調(diào)整：內(nèi)容增減、布局調(diào)整、樣式調(diào)整。

第一種，內(nèi)容增減。即部分模塊在不同的分段內(nèi)會(huì)有顯示和隱藏的狀態(tài)，尤其是一些網(wǎng)頁端的內(nèi)容覺得在小屏幕上展示會(huì)太多了，就在小屏幕場景中隱藏掉。

用一篇文章，幫你看懂網(wǎng)頁響應(yīng)式布局原理

第二種，布局調(diào)整。主要是模塊的排列和順序發(fā)生變化，常見的就是模塊一行的列數(shù)發(fā)生改變。

用一篇文章，幫你看懂網(wǎng)頁設(shè)計(jì)響應(yīng)式布局原理

第三種，樣式變更。即針對(duì)不同的分段設(shè)計(jì)完全不一樣的樣式，最多應(yīng)用在導(dǎo)航欄的設(shè)計(jì)中，會(huì)為最小的分段使用 iOS 的 Tabbar 或安卓的 Menu 樣式。

用一篇文章，幫你看懂網(wǎng)頁響應(yīng)式布局原理

所以，歸納起來，就是頁面針對(duì)不同的分段展示不同的結(jié)果，即頁面中的組件觸發(fā)了對(duì)應(yīng)的變化類型。每個(gè)組件都可以應(yīng)用不同的變化類型，而無需進(jìn)行統(tǒng)一。

2. 組件寬度適應(yīng)

分段式響應(yīng)，是響應(yīng)式布局的第一層邏輯。而在觸發(fā)關(guān)鍵值（Breakpoint） 之間的區(qū)間，我們拖動(dòng)窗口的寬度，會(huì)發(fā)現(xiàn)組件的寬度也隨之改動(dòng)，這就是 —— 組件寬度適應(yīng)。

組件寬度適應(yīng)在手機(jī) UI 的適配中非常重要，即完成不同屏幕寬的手機(jī)適配所應(yīng)用的邏輯，所下面我們簡單講講它的規(guī)則。

組件的寬度適應(yīng)模式主要有兩種類型，一種是容器寬度適應(yīng)，一種是容器比例縮放，比如下面的圖例。

用一篇文章，幫你看懂網(wǎng)頁響應(yīng)式布局原理

用一篇文章，幫你看懂網(wǎng)頁響應(yīng)式布局原理

容器是一個(gè)比較抽象的概念，類似設(shè)計(jì)軟件中的編組，它集合了所有下級(jí)元素，但本身并沒有實(shí)際的內(nèi)容和樣式。在響應(yīng)式規(guī)則中，下級(jí)元素并不會(huì)和這個(gè)容器等比變動(dòng)，出現(xiàn)下面這種錯(cuò)誤的效果。

用一篇文章，幫你看懂網(wǎng)頁響應(yīng)式布局原理

正確做法是會(huì)定義下級(jí)元素針對(duì)父容器的響應(yīng)方法，做到容器變更的同時(shí)其自身的顯示也是合理的。比如相對(duì)容器左右間距一致、對(duì)齊方向一致、尺寸固定等設(shè)置。

用一篇文章，幫你看懂網(wǎng)頁響應(yīng)式布局原理

而這種規(guī)則的設(shè)置，就是 Sketch/Figma/XD 中的響應(yīng)式設(shè)置功能。只要設(shè)置得當(dāng)，就可以獲得一樣的寬度適應(yīng)效果。

用一篇文章，幫你看懂網(wǎng)頁響應(yīng)式布局原理

如果對(duì)軟件響應(yīng)式功能了解不全面的同學(xué)，就可以自己多搜索一下對(duì)應(yīng)的說明，我就不在這里過多的展開了。

再總結(jié)一下，響應(yīng)式的規(guī)則就是頁面組件先遵循當(dāng)前分段展示的布局效果，并在這個(gè)區(qū)間內(nèi)支持小范圍寬度的變更和適應(yīng)。

文章整理：成都網(wǎng)站建設(shè)公司 aaarwkj.com

名稱欄目：網(wǎng)站建設(shè)響應(yīng)式布局的規(guī)則
標(biāo)題來源：http://aaarwkj.com/news4/321804.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供微信小程序、響應(yīng)式網(wǎng)站、微信公眾號(hào)、網(wǎng)站策劃、網(wǎng)站內(nèi)鏈、品牌網(wǎng)站設(shè)計(jì)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)