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

怎么查看一個響應式網(wǎng)站的斷點？

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

響應式能夠做到響應的前提有兩點：

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

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

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

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

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

列和槽

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

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

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

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

8點網(wǎng)格

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

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

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

當前主流屏幕分辨率，基本上都能被8整除

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

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

當前標題：設計稿響應式工作原理是怎樣的呢
轉載注明：http://www.aaarwkj.com/news24/130674.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供Google、用戶體驗、全網(wǎng)營銷推廣、ChatGPT、響應式網(wǎng)站、網(wǎng)站內(nèi)鏈

廣告

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