it-swarm.com.de

Verwendung bestimmter CSS-Stile basierend auf Bildschirmgröße/Gerät

Bootstrap 3 enthält Nice-CSS-Klassen in responsiven Dienstprogrammen, mit denen ich je nach Bildschirmauflösung einige Blöcke ausblenden oder anzeigen kann. http://getbootstrap.com/css/#responsive-utilities-classes

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

Wie kann ich es tun?

Ich werde alle meine CSS-Dateien auf die für die Produktionsbereitstellung minimieren, dies könnte jedoch vermieden werden, wenn es keine anderen Lösungen gibt als separate CSS-Dateien für unterschiedliche Bildschirmauflösungen.

26
Zelid

Verwenden Sie @media-Abfragen . Sie dienen genau diesem Zweck. Hier ist ein Beispiel, wie sie funktionieren:

@media (max-width: 800px) {
  /* CSS that should be displayed if width is equal to or less than 800px goes here */
}

Dies funktioniert nur bei Geräten, deren Breite 800px oder weniger beträgt.

Weitere Informationen zu Medienabfragen finden Sie im Mozilla Developer Network .

55
Ranveer

Die Erkennung erfolgt automatisch. Sie müssen angeben, welche CSS für jede Bildschirmauflösung verwendet werden kann:

/* for all screens, use 14px font size */
body {  
    font-size: 14px;    
}
/* responsive, form small screens, use 13px font size */
@media (max-width: 479px) {
    body {
        font-size: 13px;
    }
}
4
C.P.O

Ich habe ein kleines Javascript-Tool erstellt, um Elemente auf Bildschirmgröße zu formatieren, ohne Medienabfragen zu verwenden oder Bootstrap-CSS neu zu erstellen:

https://github.com/Heras/Responsive-Breakpoints

Fügen Sie einfach die Klasse responsive-breakpoints zu einem beliebigen Element hinzu, und es werden automatisch xs sm md lg xl-Klassen zu diesen Elementen hinzugefügt.

Demo: https://codepen.io/HerasHackwork/pen/rGGNEK

1
Heras

Verwenden Sie @ media-queries ? Diese sind genau für diesen Zweck gedacht. Sie können dies auch mit jQuery tun, aber das ist ein letzter Ausweg in meinem Buch.

var s = document.createElement("script");

//Check if viewport is smaller than 768 pixels
if(window.innerWidth < 768) {
    s.type = "text/javascript";
    s.src = "http://www.example.com/public/assets/css1";
}else { //Else we have a larger screen
    s.type = "text/javascript";
    s.src = "http://www.example.com/public/assets/css2";
}

$(function(){
    $("head").append(s); //Inject stylesheet
})
0

Zu diesem Zweck dienen @media-Abfragen. Hier ist ein Beispiel:

@media only screen and (max-width: 991px) and (min-width: 769px){
 /* CSS that should be displayed if width is equal to or less than 991px and larger 
  than 768px goes here */
}

@media only screen and (max-width: 991px){
 /* CSS that should be displayed if width is equal to or less than 991px goes here */
}
0
Sugam Parajuli