最近，我寫(xiě)了很多關(guān)于響應(yīng)的設(shè)計(jì)。我已經(jīng)覆蓋了媒體查詢(xún)，技術(shù)方面基本實(shí)現(xiàn)，完整的設(shè)計(jì)教程，一些CSS技巧，和一系列可怕的反應(yīng)位點(diǎn)。今天，我想談一談在響應(yīng)設(shè)計(jì)中設(shè)置斷點(diǎn)。你應(yīng)該如何設(shè)置斷點(diǎn)？一般準(zhǔn)則是什么？我將分享我的觀點(diǎn)在設(shè)置斷點(diǎn)。

你有一個(gè)常用的斷點(diǎn)列表嗎？

有些人喜歡在設(shè)備分辨率的基礎(chǔ)上設(shè)置斷點(diǎn)。例如：320px移動(dòng)，768px平板，桌面電腦或更高。就我個(gè)人而言，我不是一個(gè)大風(fēng)扇設(shè)置斷點(diǎn)的基礎(chǔ)上，因?yàn)橛刑嘣O(shè)備的設(shè)備分辨率。如果設(shè)備分辨率改變了呢？要更防彈，斷點(diǎn)應(yīng)根據(jù)設(shè)計(jì)和內(nèi)容。

那么什么是一般準(zhǔn)則？

在我的響應(yīng)設(shè)計(jì)工作流，我一般測(cè)試設(shè)計(jì)的瀏覽器窗口大小?？磧?nèi)容如何流動(dòng)時(shí)，調(diào)整大小和添加一個(gè)斷點(diǎn)時(shí)，設(shè)計(jì)突破。有沒(méi)有具體的規(guī)則，有多少斷點(diǎn)的設(shè)計(jì)應(yīng)該有。經(jīng)驗(yàn)法則是確保內(nèi)容流程的設(shè)計(jì)很好地在任何視口的寬度。我將用我的網(wǎng)站作為例子：網(wǎng)頁(yè)設(shè)計(jì)師墻和最好的網(wǎng)絡(luò)畫(huà)廊。

網(wǎng)頁(yè)設(shè)計(jì)師墻

對(duì)網(wǎng)頁(yè)設(shè)計(jì)師的墻，我有5個(gè)媒體查詢(xún)：google，760px，600px，480px 320px，和。但在重大布局的變化來(lái)看，我只有三個(gè)：固定側(cè)頭三柱，用頭球頂柱，和一個(gè)單欄布局在邊欄低于含量。

網(wǎng)頁(yè)設(shè)計(jì)師墻斷點(diǎn)

2列布局?jǐn)帱c(diǎn)設(shè)置在google。單柱設(shè)置在760px。其他斷點(diǎn)是必要的，以確保在所有斷點(diǎn)的內(nèi)容流很好。

最佳網(wǎng)絡(luò)畫(huà)廊

最好的網(wǎng)上畫(huà)廊，我有3個(gè)媒體查詢(xún)：1240px，800px，和480px。在主要布局變化的詞，我有兩個(gè)：四柱式和單欄布局。

最佳網(wǎng)絡(luò)畫(huà)廊斷點(diǎn)

在這種情況下，我認(rèn)為沒(méi)有必要有更多的布局?jǐn)帱c(diǎn)（即打破四柱為三柱或柱）由于后容器不打破小視口。