Ich werde eine Website erstellen, die Responsive Design verwendet. Ich lese einige Informationen über css Media Query. Was ich tun möchte, ist, dass das Layout meiner Webseite Unterschiede durch die Verwendung verschiedener Geräte (wie PC, Tablets oder Smartphones) sieht.
Wenn ich eine Medienabfrage verwende, um das Gerät anhand der Breite des Bildschirms (in Pixel) zu bestimmen, mache ich mir immer Gedanken darüber, ob es ein neues Gerät mit einem extrem hohen ppi-Bildschirm geben wird. Dieses Gerät könnte als Tablet oder so etwas wie PC angreifen?
Eine andere Lösung, die den Benutzeragenten verwendet, um mithilfe von userAgent die Gerätekategorie zu bestimmen. Es gibt auch ein Problem ist, dass, wenn das Gerät das Javascript nicht gut interpretieren dann die Seite vielleicht gebrochen.
Jede großartige Lösung, die meine Sorgen oben lösen kann? Oder Welche Lösung ist besser?
Oder ich missverstehe die Methode der Medienabfrage?
Danke.
CSS ist der richtige Weg, und Sie können immer einen Fallback für Browser bereitstellen, die keine Medienabfragen mit einem js-Plugin wie css3mediaqueries.js , aber sich auf JS allein zu verlassen, um Ihre Website responsiv zu machen, ist ein Risiko, weil Sie nicht sicher sagen können, ob der Benutzer Javascript aktiviert hat und wann nicht
Es wird auch empfohlen, em Werte für Medienabfragen anstelle von Pixeln zu verwenden, um sicherzustellen, dass Ihre Website immer richtig skaliert. Mehr zu diesem Thema in diesen Artikel .
Ein weiterer Tipp ist, dass Sie die Medienabfragewerte nach den besten Breakpoints Ihres Contents anstatt nach den Gerätedimensionen bestimmen. So stellen Sie auch sicher, dass Ihre Inhalte immer richtig aussehen, egal wie viele neue Geräte erstellt werden.
Hoffnung, die geholfen hat:)
Ich bevorzuge Medienabfragen in CSS. Schreiben Sie einfach die Abfragen nach dem Standard-CSS ...
@media Bildschirm und (max-width: 600px) { Schreiben Sie hier nur die Elemente, die de Code für reaktionsschnelle Leistung ändern müssen }
%Vor%Vergessen Sie nicht, den Viewport-Code in den head / HTML einzufügen.
%Vor%Ich bevorzuge Twtitter Bootstrap , um CSS3-Medienabfragen für solche verschiedenen Geräte zu verwenden.
Probieren Sie jRWD, ein JavaScript-only-Modul, das ich kürzlich entworfen habe. Es verwendet 12 Zeilen pures JavaScript und 2 kleine Hilfsfunktionen. Es ist verfügbar auf GitHub, Ссылка .
Wenn Sie jRWD in Aktion sehen möchten, besuchen Sie Ссылка . Stellen Sie sicher, dass Sie den Quellcode überprüfen. Minimales JavaScript, minimales CSS Stylesheet. Kein jQuery auch.
Tags und Links javascript html css responsive-design