Ich habe eine Website, die pixel verwendet, um die Seiten zu rendern. Aber wenn ich die Website in verschiedenen Geräten mit unterschiedlicher Bildschirmauflösung sehe, passt die ganze Seite nicht in den Bildschirm und wenn ich prozentual verwende, wird der Seiteninhalt gedrückt
Ist das responsive Webdesign die richtige Wahl, um die Webseite zu gestalten? Wenn ja, habe ich wenig Bedenken.
Wenn Sie Medienabfragen verwenden, wird ein anderes CSS für verschiedene Bildschirmgrößen angepasst. Die Art, wie es funktioniert, sagt dem Browser: wenn screenwidth = 700px oder kleiner / größer; Verwenden Sie mobile CSS. Wenn Bildschirmbreite = 1000px oder kleiner / größer; Verwenden Sie Desktop-CSS. Es gibt keine Begrenzung für die Anzahl der Medienabfragen, die Sie verwenden können.
Die Verwendung von Prozentsätzen ist auch eine Möglichkeit; flüssiges Design . Ich würde vorschlagen, dies jedoch zusammen mit Medienabfragen zu verwenden.
Wie für Frameworks gibt es viele da draußen. Bootstrap gehört zu den beliebtesten. Ich persönlich glaube, dass mobile am besten funktioniert. Über dieses Thema wird jedoch immer noch heftig diskutiert.
Wie Pete zuvor in einem Kommentar erwähnt hat; Wenn Sie mit einer grazilen Degradierung arbeiten, (Desktop zuerst) wird das Gerät so viel herunterladen wie die Desktop-Site, aber den heruntergeladenen Inhalt nicht nutzen. Wich ist ein großer Nachteil für den Benutzer. (Größere Pageroom-Zeiten, viele Server-Anfragen, mehr Verwendung von MB-Daten, etc.) Daher, warum ich denke, progressive Verbesserung (mobile zuerst) ist der Weg zu gehen.
Mit progressiver Verbesserung lädt der Browser immer zuerst das mobile css herunter; Die Seitenladezeiten werden extrem verkürzt.
Informationen zum Browser-Support für Responsive Design finden Sie hier .
>Lesen Sie Medienabfragen , um css entsprechend der Browserbreite oder -höhe zu ändern.
Fügen Sie Ansichtsfenster ein, um es zu erstellen Ihre Webseiten auf mobilen Geräten werden korrekt skaliert.
Sehen Sie sich einen typischen reaktiven Kopf von html an:
%Vor%und ein typisches responsives CSS
%Vor%Versteh dich jetzt selbst.
Wenn Sie nicht verstehen können, dann besuchen Sie meine Website unten: responsive Website im Texteditor wie Notepad schreiben
Tags und Links html screen-resolution css3 responsive-design pixels