布局方式，本質(zhì)上就是去處理窗口寬度與網(wǎng)頁(yè)內(nèi)容的關(guān)系。用戶會(huì)使用瀏覽器打開(kāi)不同尺寸的窗口寬度，而網(wǎng)頁(yè)內(nèi)容究竟應(yīng)該如何去適應(yīng)這些窗口尺寸？網(wǎng)頁(yè)布局通常會(huì)分為：固定布局、流式布局、自適應(yīng)布局、響應(yīng)式布局。 1. 固定布局 固定布局是一種最為簡(jiǎn)單的方式，它的設(shè)計(jì)邏輯是將頁(yè)面當(dāng)中的內(nèi)容 “寫(xiě)死固定” 在屏幕上，內(nèi)容不會(huì)隨著本身窗口寬度進(jìn)行改變，所有元素都使用 px 作為基礎(chǔ)單位。當(dāng)然在固定布局當(dāng)中，窗口大小與頁(yè)面內(nèi)容會(huì)存在兩種基本關(guān)系：窗口過(guò)大則將頁(yè)面元素進(jìn)行居中，窗口過(guò)小則展示橫向滾動(dòng)條。固定布局的好處是這種方式相對(duì)簡(jiǎn)單，只需將頁(yè)面設(shè)計(jì)好即可，不會(huì)存在太多兼容性的問(wèn)題，固定布局通常出現(xiàn)在 老舊的政府項(xiàng)目、網(wǎng)頁(yè)的登錄注冊(cè)中。 2. 流式布局 流式布局是最基礎(chǔ)的變化布局，它的設(shè)計(jì)邏輯是將頁(yè)面當(dāng)中的元素設(shè)計(jì)成可以流動(dòng)的 “水” ，通過(guò)在頁(yè)面，設(shè)計(jì)不同的“杯子”容器來(lái)裝下頁(yè)面內(nèi)容，這里的“水”一般指的是 文字、圖標(biāo)、以及一些頁(yè)面重復(fù)出現(xiàn)的元素。而杯子通常是我們?cè)O(shè)計(jì)的容器，它高度固定，只會(huì)變化其寬度，比如卡片、外層容器控制寬度等等。因?yàn)椤氨�子”的限制，也就�?dǎo)致水會(huì)根據(jù)杯子的寬度進(jìn)行延展流動(dòng)，進(jìn)而形成流式布局。使用流式布局可以通過(guò)較低的開(kāi)發(fā)成本，來(lái)實(shí)現(xiàn)一個(gè)頁(yè)面當(dāng)中多尺寸的小范圍適配，如果屏幕尺寸跨度較大，則會(huì)比較困難，而流式布局最常使用的方式就是通過(guò)柵格系統(tǒng)，來(lái)確定整個(gè)“杯子”的寬度，進(jìn)而讓“水”能夠在頁(yè)面當(dāng)中實(shí)時(shí)滾動(dòng)展示，這里有兩個(gè)需要注意的點(diǎn)： 在研發(fā)層面，杯子的大小是需要進(jìn)行限制的，通常會(huì)去設(shè)定它的最大值與最小值，當(dāng)它超過(guò)最大值則居中對(duì)齊，當(dāng)他在流式布局當(dāng)中，窗口超過(guò)其最大值則固定左側(cè)，右側(cè)空白補(bǔ)充；窗口小于其最小值則展示橫向滾動(dòng)條。 流動(dòng)的“水” 需要去考慮它漫出的情況，即在“水杯”高度固定的情況下，整個(gè)寬度無(wú)法裝下如此多“水”的情況，通常我們可以使用 “…” 進(jìn)行標(biāo)注。這個(gè)思路后續(xù)在響應(yīng)式布局當(dāng)中也會(huì)體現(xiàn)。 3. 自適應(yīng)布局 自適應(yīng)布局是將差別較大的屏幕尺寸，去創(chuàng)建多個(gè)不同的設(shè)計(jì)稿，每一個(gè)設(shè)計(jì)稿去對(duì)應(yīng) 一個(gè)用戶實(shí)際的尺寸范圍。改變屏幕分辨率就可以去切換不同的設(shè)計(jì)方案。通俗一點(diǎn)來(lái)說(shuō)，自適應(yīng)就是去單獨(dú)設(shè)計(jì)桌面端、平板端、移動(dòng)端的頁(yè)面，并且將它們?nèi)�者進(jìn)行獨(dú)立，而系統(tǒng)通過(guò)不同尺寸間的 屏幕斷點(diǎn)/瀏覽器 UA 等進(jìn)而適應(yīng)出不同的設(shè)計(jì)頁(yè)面。 自適應(yīng)主要是表達(dá)多個(gè)設(shè)備尺寸下進(jìn)行切換的 布局方式，在不同的設(shè)備之間，也是需要去使用流式布局以及其他布局方式，而不同的設(shè)備之間，屏幕分辨率的差異就會(huì)涉及到一個(gè)關(guān)鍵點(diǎn)，屏幕斷點(diǎn)。 屏幕斷點(diǎn)，屏幕斷點(diǎn)，又叫媒體查詢 @media，因?yàn)樵谡麄�(gè)設(shè)計(jì)當(dāng)中，屏幕尺寸是極其復(fù)雜的，除了我們常見(jiàn)的尺寸：1920、1080、1440、1366，用戶還可以通過(guò)調(diào)整窗口的大小，進(jìn)而改變網(wǎng)頁(yè)尺寸。而屏幕斷點(diǎn)，最主要是判斷屏幕的寬度，來(lái)確定目前的尺寸究竟應(yīng)該采取什么設(shè)計(jì)方案。關(guān)于屏幕斷點(diǎn)的媒體查詢，是在前端 CSS3 代碼當(dāng)中，提供給用戶校驗(yàn)整個(gè)屏幕的寬度。而確定斷點(diǎn)才是這其核心，這里給大家提供兩個(gè)思路，實(shí)際設(shè)計(jì)當(dāng)中還會(huì)更為復(fù)雜： 物理斷點(diǎn)：也就是屏幕當(dāng)中，已經(jīng)劃分好的斷點(diǎn)方式，比如顯示器的全寬大小、不同設(shè)備之間的屏幕分辨率差異， 設(shè)計(jì)斷點(diǎn)：在設(shè)計(jì)過(guò)程當(dāng)中，一些必要的屏幕尺寸。比如上方講到不同平臺(tái)的設(shè)計(jì)問(wèn)題。 其實(shí)屏幕斷點(diǎn)不是最終目的，最終還是想通過(guò)屏幕斷點(diǎn)，將頁(yè)面當(dāng)中不同的不同元素的處理方式實(shí)現(xiàn)在設(shè)計(jì)稿中，如果不需要，完全可以不考慮增加屏幕斷點(diǎn)。 4. 響應(yīng)式布局 響應(yīng)式布局是確保一個(gè)頁(yè)面當(dāng)中所有的設(shè)備（桌面端、平板端、移動(dòng)端）都能夠展示出非常滿意的效果，進(jìn)行產(chǎn)生的一種技術(shù)方案。它更像是 流式布局與自適應(yīng)布局的結(jié)合，它能夠通過(guò)對(duì)屏幕尺寸的快速響應(yīng)，進(jìn)而對(duì)頁(yè)面的內(nèi)容進(jìn)行更為細(xì)致的變化。通俗一點(diǎn)來(lái)說(shuō)就是通過(guò)一套代碼去實(shí)現(xiàn)多個(gè)頁(yè)面，并且將多個(gè)頁(yè)面的內(nèi)容進(jìn)行細(xì)化，進(jìn)而能夠快速適配多個(gè)設(shè)備。