當(dāng)終端設(shè)備分辨率達(dá)到每一個(gè)zui小寬度（也稱為臨界值或斷點(diǎn)），就會(huì)觸發(fā)該寬度下預(yù)設(shè)的頁(yè)面布局進(jìn)行zui佳顯示，這就是響應(yīng)式的工作原理。

怎么查看一個(gè)響應(yīng)式網(wǎng)站的斷點(diǎn)？

用chrome瀏覽器打開(kāi)一個(gè)響應(yīng)式網(wǎng)站，右擊“檢查元素”，找到“布局”里的“盒模型”顯示的就是視窗當(dāng)前的分辨率，慢慢縮小視窗的寬度，頁(yè)面布局會(huì)隨著尺寸的變化而變化，這就是網(wǎng)站的斷點(diǎn)。

響應(yīng)式能夠做到響應(yīng)的前提有兩點(diǎn)：

1.頁(yè)面布局具有規(guī)律性；

2.元素寬高可用百分比代替固定數(shù)值；

而這兩點(diǎn)正是柵格系統(tǒng)本身具有的典型特點(diǎn)，所以利用柵格系統(tǒng)進(jìn)行響應(yīng)式設(shè)計(jì)是順理成章的，響應(yīng)式與柵格化自然也成為了zui佳搭檔。

注意：執(zhí)行頁(yè)面時(shí)，必須優(yōu)先考慮版式設(shè)計(jì)與創(chuàng)意，而不是被規(guī)范所固化，當(dāng)完成頁(yè)面創(chuàng)意后，再進(jìn)行柵格系統(tǒng)的規(guī)范化調(diào)整。

頁(yè)面邊距就是內(nèi)容區(qū)域以外的空間，響應(yīng)式頁(yè)面邊距可以隨著屏幕尺寸增大而增大。

列和槽

列是內(nèi)容的容器，槽是調(diào)節(jié)相鄰兩個(gè)列的間距，把控頁(yè)面留白；列和槽加上頁(yè)面邊距就是屏幕的水平寬度。列和列間距的內(nèi)容區(qū)域由N個(gè)列和（N-1）個(gè)槽組成。通常情況下，web 端采用 12 列，平板采用 8 列，移動(dòng)端采用 4 列。

利用 Sketch 的布局設(shè)置功能，可快速搭建網(wǎng)格系統(tǒng)的參考布局，提高設(shè)計(jì)效率。（設(shè)置方法：菜單欄——視圖——畫布——布局設(shè)置）

以12柵格系統(tǒng)為例，一個(gè)12柵格系統(tǒng)根據(jù)業(yè)務(wù)需要，可被2等分、3等分、4等分、6等分、12等分，還可以被1：2：1、1：3：2、1:2、1:3、1:5等不對(duì)稱分割。

注：列的數(shù)量越多，頁(yè)面就越“碎”，比較難把控，適用于業(yè)務(wù)信息量大、信息分組多、單個(gè)盒子內(nèi)信息體積較小的頁(yè)面設(shè)計(jì)；槽的寬度越大，頁(yè)面越輕松簡(jiǎn)單；

8點(diǎn)網(wǎng)格

列跟槽的寬度是以網(wǎng)格作為基本單位來(lái)做增減，所以應(yīng)該先定義好柵格的原子單位，目前zui普適易用的就是8點(diǎn)網(wǎng)格。設(shè)計(jì)頁(yè)面時(shí)，也應(yīng)該遵循8點(diǎn)規(guī)律。值得注意的是，列跟槽的值盡量取8的倍數(shù)，但不是非得是8的倍數(shù)。但產(chǎn)品中各類元素應(yīng)該遵循8倍原則（圖標(biāo)、組件大小等）。8點(diǎn)網(wǎng)格系統(tǒng)有兩種柵格形式，設(shè)計(jì)師可根據(jù)具體情況進(jìn)行選擇。將元素放到8的倍數(shù)柵格中，稱之為“硬柵格”。元素之間的距離是8的倍數(shù)，稱之為“軟柵格”。

為什么是8點(diǎn)網(wǎng)格呢？

目前主流設(shè)備的屏幕分辨率基本能被8整除，可確保不同布局之間的視覺(jué)一致性，同時(shí)可以適配多種尺寸。

當(dāng)前主流屏幕分辨率，基本上都能被8整除

以8為單位符合“偶數(shù)原則”。偶數(shù)原則在頁(yè)面縮放中zui大程度的避免了0.5、0.75、1.25等次像素的出現(xiàn)，使頁(yè)面顯示效果更佳。

前端開(kāi)源組件庫(kù)比如Metronic、antdesign等也是基于8的原子單位來(lái)設(shè)計(jì)，設(shè)計(jì)師使用以8為基本單位的柵格系統(tǒng)的話，相互對(duì)接會(huì)更加方便，也能更高品質(zhì)的還原設(shè)計(jì)。

分享標(biāo)題：設(shè)計(jì)稿響應(yīng)式工作原理是怎樣的呢
分享URL：http://www.aaarwkj.com/news/130674.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供移動(dòng)網(wǎng)站建設(shè)、定制網(wǎng)站、品牌網(wǎng)站設(shè)計(jì)、面包屑導(dǎo)航、動(dòng)態(tài)網(wǎng)站、標(biāo)簽優(yōu)化

廣告

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