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

怎么查看一個響應式網站的斷點？

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

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

1.頁面布局具有規律性；

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

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

注意：執行頁面時，必須優先考慮版式設計與創意，而不是被規范所固化，當完成頁面創意后，再進行柵格系統的規范化調整。

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

列和槽

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

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

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

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

8點網格

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

為什么是8點網格呢？

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

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

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

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

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

成都網站建設公司_創新互聯，為您提供Google、用戶體驗、全網營銷推廣、ChatGPT、響應式網站、網站內鏈

廣告

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