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

4.屏幕分辨率

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

5.主要斷點(diǎn)

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

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

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

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