2022-5-6 博博
當(dāng)我們拿到網(wǎng)頁設(shè)計需求時，首先要確定是不是要單獨開發(fā)移動版本。因為響應(yīng)式布局兼顧了手機(jī)端適配問題，但是受加載速度、手機(jī)瀏覽器、柵格化系統(tǒng)的限制設(shè)計發(fā)揮的自由度、等的影響很大。
柵格化設(shè)計：是針對網(wǎng)頁設(shè)計師。主要是為了提高網(wǎng)頁的規(guī)范性。
柵格設(shè)計系統(tǒng)：（網(wǎng)格設(shè)計系統(tǒng)，標(biāo)準(zhǔn)尺寸系統(tǒng)、程序版面設(shè)計）是一種屏幕設(shè)計的方法和風(fēng)格，運動固定的格子設(shè)計版面布局，其風(fēng)格工整、整潔。
柵格化布局：針對前端開發(fā)人員，指前端攻城獅使用的css框架，來實現(xiàn)頁面的響應(yīng)式布局。
設(shè)計師使用縱向的柵格（列）讓頁面元素垂直方向上對齊，使用橫向的柵格（排）讓元素水平方向上對齊。設(shè)計師結(jié)合基準(zhǔn)網(wǎng)格（8pt）和縱向柵格（12欄 16pt）進(jìn)行設(shè)計。
基于設(shè)備的邏輯像素進(jìn)行UI設(shè)計——設(shè)計開始前UI設(shè)計師要根據(jù)桌面和平板手機(jī)分辨率大小，考慮最大最小響應(yīng)的屏幕，給出響應(yīng)的策略設(shè)置斷點和次斷點。
斷點：(breakpoint)是頁面改變布局的臨界點，一個響應(yīng)式網(wǎng)頁可能會有一個或者多個斷點。有時候網(wǎng)頁也會設(shè)置次斷點。
次斷點：(minor breakpoint)并未對頁面布局做很大的改動 只是對細(xì)節(jié)做了一些微調(diào)。
媒體查詢：（media queries）是實現(xiàn)斷點的一種方法，它提供了簡單的邏輯方法來根據(jù)不同的設(shè)備特征（寬度 高度 像素比）應(yīng)用不同樣式，最常用的媒體查詢變量是min-width和max-width。）
設(shè)計師根據(jù)網(wǎng)頁的內(nèi)容找到合適的斷點。設(shè)置多少個斷點由網(wǎng)站的內(nèi)容決定，設(shè)置幾個斷點就需要設(shè)計幾套UI設(shè)計圖。設(shè)法避免列間空白太寬或太窄的情況。常見的設(shè)計尺寸1920PX（大屏電腦）、1440PX/1280PX（小屏電腦）、1024PX（橫屏Ipad）、768PX（手機(jī)和豎屏Ipad）。（這些是根據(jù)市場常見的機(jī)型分辨率來的。再根據(jù)網(wǎng)頁內(nèi)容多少進(jìn)行合理的增減。）
用chrome瀏覽器打開一個響應(yīng)式網(wǎng)站，檢查元素，右上角會顯示視窗當(dāng)前的分辨率，慢慢縮小視窗的寬度，找到頁面布局的變化點，就是我們上面說到的斷點或者次斷點。）
這個當(dāng)然不是了。這個視網(wǎng)站中每個頁面的內(nèi)容而定，甚至同一個頁面的不同內(nèi)容模塊布局?jǐn)帱c設(shè)置也不盡相同。在我的實踐過程中，很多頁面只需要設(shè)計三套，當(dāng)然比較復(fù)雜的頁面，在這五個分辨率上，都需要對布局做一些修改或者自動隱藏部分內(nèi)容。
藍(lán)藍(lán)設(shè)計的小編 http://m.jghy.net