（接上一節(jié)內(nèi)容）

4.屏幕分辨率

屏幕分辨簡(jiǎn)單點(diǎn)說(shuō)就是用戶顯示器的分辨率，深一點(diǎn)說(shuō)，屏幕分辨率指的是用戶使用的設(shè)備瀏覽您的Web頁(yè)面時(shí)的顯示屏幕的分辨率，比如說(shuō)智能手機(jī)瀏覽器、移動(dòng)電腦瀏覽器、平板電腦瀏覽器和桌面瀏覽器的分辨率。Responsive設(shè)計(jì)利用Media Queries屬性針對(duì)瀏覽器使用的分辨率來(lái)適配對(duì)應(yīng)的CSS樣式。因此屏幕分辨率在Responsive設(shè)計(jì)中是一個(gè)很重要的東西，因?yàn)橹挥兄繵eb頁(yè)面要在哪種分辨率下顯示何種效果，才能調(diào)用對(duì)應(yīng)的樣式。

5.主要斷點(diǎn)

主要斷點(diǎn)，在Web開(kāi)發(fā)中是一個(gè)新詞，但對(duì)于Responsive設(shè)計(jì)中是一個(gè)很重要的一部分。簡(jiǎn)單的描述就是，設(shè)備寬度的臨界點(diǎn)。在Media Queries中，其中媒體特性“min-width”和“max-width”對(duì)應(yīng)的屬性值就是響應(yīng)式設(shè)計(jì)中的斷點(diǎn)值。簡(jiǎn)單點(diǎn)說(shuō)，就是使用主要斷點(diǎn)和次要斷點(diǎn)，創(chuàng)建媒體查詢(xún)的條件。而每個(gè)斷點(diǎn)會(huì)對(duì)應(yīng)調(diào)用一個(gè)樣式文件（或者樣式代碼），如下圖所示：

上圖的style.css樣式文件運(yùn)用在Web頁(yè)面中，但這個(gè)樣式文件包括了所有風(fēng)格的樣式代碼，也就是說(shuō)所有設(shè)備下顯示的風(fēng)格都通過(guò)這個(gè)樣式文件下載下來(lái)。當(dāng)然，在實(shí)際中還可以使用另一種方法，也就是在不同的斷點(diǎn)加載不同的樣式文件，如下圖所示。

上圖主要顯示的是主要斷點(diǎn)，主要斷點(diǎn)加載的不同樣式文件直接將影響Web的效果。除了主要斷點(diǎn)之外，為了滿足更多效果時(shí)，還可以在這個(gè)基礎(chǔ)上添次要斷點(diǎn)。不過(guò)主要斷點(diǎn)和次要斷點(diǎn)增加之后，需要維護(hù)的樣式也相應(yīng)的增加，成本也相對(duì)應(yīng)的增加。因此在實(shí)際使用中，需要根據(jù)自身產(chǎn)品需求，決定斷點(diǎn)。

綜合下來(lái)，設(shè)置斷點(diǎn)應(yīng)把握三個(gè)要點(diǎn)：滿足主要的斷點(diǎn)；有可能的話添加一些別的斷點(diǎn)；設(shè)置高于1024的桌面斷點(diǎn)。