如何根據螢幕尺寸/裝置選擇適當的CSS樣式
P粉529245050
2023-08-21 21:50:42
<p>Bootstrap 3在響應式實用工具中有一些不錯的CSS類，可以根據螢幕解析度來隱藏或顯示某些區塊<a href="http://getbootstrap.com/css/#responsive- utilities-classes">http://getbootstrap.com/css/#responsive-utilities-classes</a></p>
<p>我在一個CSS檔案中有一些樣式規則，我希望根據螢幕解析度來應用或不應用這些規則。 </p>
<p>我該如何做呢？ </p>
<p>我將把所有的CSS檔案壓縮到一個生產部署的檔案中，但如果沒有其他解決方案，只能為不同的螢幕解析度使用單獨的CSS檔案。 </p>
檢測是自動的。您必須指定每個螢幕解析度可以使用的css：
/* 对于所有屏幕，使用14px字体大小 */ body { font-size: 14px; } /* 响应式，对于小屏幕，使用13px字体大小 */ @media (max-width: 479px) { body { font-size: 13px; } }使用
@media查詢。它們正好可以滿足這個需求。以下是一個範例，說明它們的工作原理：@media (max-width: 800px) { /* 在宽度等于或小于 800px 时显示的 CSS 代码放在这里 */ }這只會在寬度等於或小於 800px 的裝置上生效。
在 Mozilla 開發者網路上了解更多關於媒體查詢的內容。