So wählen Sie geeignete CSS-Stile basierend auf Bildschirmgröße/Gerät aus

Question

Bootstrap 3 verfügt über einige nette CSS-Klassen im Responsive-Dienstprogramm, die je nach Bildschirmauflösung bestimmte Blöcke ein- oder ausblenden können ;http://getbootstrap.com/css/#responsive-utilities-classes

Ich habe einige Stilregeln in einer CSS-Datei, die ich je nach Bildschirmauflösung anwenden oder nicht anwenden möchte.

Was soll ich tun?

Ich würde alle CSS-Dateien für den Produktionseinsatz in einer Datei komprimieren, aber wenn es keine andere Lösung gibt, als separate CSS-Dateien für verschiedene Bildschirmauflösungen zu verwenden.

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 开发者网络上了解更多关于媒体查询的内容。