Wie kann ich CSS-Stylesheets basierend auf der Browserbreite dynamisch anpassen?

8

Wir entwickeln eine Open-Source-Web-App für Kunstlehrer auf der ganzen Welt, um zusammenzuarbeiten. Wir brauchen eine nette Webseite, die sich einfach an die aktive Breite des Browsers anpasst, wie google.org oder barackobama.com so gut funktioniert.

Wir können den Browser, das Betriebssystem usw. erkennen, aber keine dieser Informationen verwenden. Wir wollen nur vier oder fünf verschiedene Stylesheets, die ausgelöst werden, wenn die Browserbreite angepasst wird.

Wenn Sie beispielsweise die App in einem Browser mit einem DESKTOP-Computer aufrufen, sehen Sie die vollständige App, wenn der Browser im Vollbildmodus angezeigt wird. Wenn der Browser seine Breite reduziert, ändert die Site sofort und dynamisch ihr Format, um universelle Kompatibilität zu ermöglichen.

Wir möchten nicht, dass sich unser CSS auf Basis des Browsertyps oder der ursprünglichen Breite ändert, sondern dass es sich je nach aktueller Breite des Ansichtsfensters in Millisekunden anpassen soll - unabhängig davon, ob es sich um ein "mobiles" Gerät handelt oder nicht oder eine "Tablet" -Maschine oder ein "Desktop" -Browser.

Seltsamerweise verwende ich Google Apps Script zum Hosten unserer Web-App. Daher sieht es so aus, als ob alle Meta-Viewport-Tags entfernt werden.

Wie können wir vier oder fünf verschiedene Stylesheets basierend auf der Breite des aktuellen Browserfensters einführen?

    
Sean McGowan 15.08.2012, 00:58
quelle

4 Antworten

15

Sie können CSS-Medienabfragen wie folgt verwenden:

%Vor%

Oder jQuery, so:

%Vor%

Beide wurden gefunden von: Ссылка

    
jeff 15.08.2012 01:00
quelle
9

css Medienabfragen ist der Weg zu gehen

%Vor%     
t q 15.08.2012 01:01
quelle
8

Verwenden Sie CSS-Medienabfragen , um dies zu tun

    
John Conde 15.08.2012 01:00
quelle
2

Sie können mit CSS machen.

%Vor%

Für mehr Code & amp; Detail

Klicken Sie hier

    
cksahu 26.03.2014 16:17
quelle