如何根據螢幕尺寸/裝置選擇適當的CSS樣式

Question

Bootstrap 3在響應式實用工具中有一些不錯的CSS類，可以根據螢幕解析度來隱藏或顯示某些區塊http://getbootstrap.com/css/#responsive-utilities-classes

我在一個CSS檔案中有一些樣式規則，我希望根據螢幕解析度來應用或不應用這些規則。

我該如何做呢？

我將把所有的CSS檔案壓縮到一個生產部署的檔案中，但如果沒有其他解決方案，只能為不同的螢幕解析度使用單獨的CSS檔案。

Answer 1

檢測是自動的。您必須指定每個螢幕解析度可以使用的css：

/* 对于所有屏幕，使用14px字体大小 */
body {  
    font-size: 14px;    
}
/* 响应式，对于小屏幕，使用13px字体大小 */
@media (max-width: 479px) {
    body {
        font-size: 13px;
    }
}

Answer 2

使用 @media 查詢。它們正好可以滿足這個需求。以下是一個範例，說明它們的工作原理：

@media (max-width: 800px) {
  /* 在宽度等于或小于 800px 时显示的 CSS 代码放在这里 */
}

這只會在寬度等於或小於 800px 的裝置上生效。

在 Mozilla 開發者網路上了解更多關於媒體查詢的內容。