（接上一節內容）

4.屏幕分辨率

屏幕分辨簡單點說就是用戶顯示器的分辨率，深一點說，屏幕分辨率指的是用戶使用的設備瀏覽您的Web頁面時的顯示屏幕的分辨率，比如說智能手機瀏覽器、移動電腦瀏覽器、平板電腦瀏覽器和桌面瀏覽器的分辨率。Responsive設計利用Media Queries屬性針對瀏覽器使用的分辨率來適配對應的CSS樣式。因此屏幕分辨率在Responsive設計中是一個很重要的東西，因為只有知道Web頁面要在哪種分辨率下顯示何種效果，才能調用對應的樣式。

5.主要斷點

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

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

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

綜合下來，設置斷點應把握三個要點：滿足主要的斷點；有可能的話添加一些別的斷點；設置高于1024的桌面斷點。