Worauf kommt es bei der Verwendung von% Einheiten im Responsive Design an?

Question

Ich habe meine Website neu gestaltet, weil sie auf verschiedenen Auflösungen schrecklich aussieht (abgesehen von Geräten), die meisten Anleitungen und Tutorials basieren auf % und em als feste Werte. Ich lerne immer noch so, also lese ich alles herum.

Dachte, das würde die Frage mit anderen Displaygrößen lösen, aber nochmal: Wir müssen noch ein paar CSS für die Behebung einiger spezifischer Probleme erstellen.

Wenn ich Medienabfragen für zusätzliche Anzeigegrößen hinzufügen muss, warum% dann verwenden? Verwenden Sie% wirklich reduzieren die Codierung? Ist es ok, dass du etwas CSS für einige Größen hinzufügen musst oder mache ich etwas falsch?

Danke für jede Beratung!

Answer 1

Der Zweck der Verwendung von em Größen ist es, die Basis Ihr Design von der Wahl des Benutzers der Schriftgröße zu ermöglichen. Ich kann eine größere Schriftgröße verwenden, weil ich einen großen Monitor und schlechte Sehkraft habe, während jemand anderes eine kleinere Schrift bevorzugen könnte. Wenn Sie em Einheiten verwenden, werden in Ihrem Design beide Schrifteinstellungen berücksichtigt und die Größe entsprechend angepasst, anstatt die Schriftgröße auf einen bestimmten Standard zu setzen (z. B. "12-Punkt-Schriftart").

Auf ähnliche Weise können Sie mit Prozent (%) Einheiten auf unterschiedliche Browsergrößen reagieren. In Verbindung mit den Einheiten em können textbasierte Elemente auf beliebige Schriftgrößen und Layoutelemente reagieren, um auf beliebige Browsergrößen zu reagieren.

Es ist vollkommen akzeptabel, ein einzelnes responsives Design für alle Medientypen zu entwerfen. Media queries sind vorgesehen, wenn Sie unterschiedliche Anzeigestile auf verschiedenen Geräten wünschen, nicht, um verschiedene Displaygrößen zu "unterstützen". Ein Beispiel wäre die Verwendung von Serif-Fonts auf Printmedien und Sans Serif-Fonts auf Display-Medien, da Usability-Studien gezeigt haben, dass diese Schriftarten für diese Art von Medien bevorzugt sind.

Darüber hinaus können Sie benutzerdefinierte Styling für einige Situationen wie mobile Geräte, wo Sie vielleicht daran denken, dass der Benutzer eine begrenzte Menge an Bandbreite und möglicherweise reduziert auf zusätzliche Bilder. Oder wenn Sie Ihren Inhalt in einem völlig anderen Layout für den mikroskopischen Bildschirm bestimmter Telefone anzeigen möchten.

Answer 2

% ermöglicht es Ihrer Website, auf die Sichtweise des Benutzers zu reagieren. Nehmen wir an, Sie haben eine div, die 100% ist. Es füllt den gesamten Bereich aus, unabhängig davon, ob es sich um ein Telefon oder einen Desktop handelt.

Es sollte in Ordnung sein, zusätzliches CSS für Größen hinzuzufügen. Soweit ich weiß, können Sie einige Elemente in % und einige mit einem festen px Wert angezeigt haben, obwohl sie möglicherweise Konflikt je nachdem, wie die Seite eingerichtet ist oder was es angezeigt wird mit.

Answer 3

Zum Beispiel.

Ihre Website Header haben die Breite von 950px; Aber in einem mobilen Gerät kann es 450px passen;

So verwenden Sie Media-Abfrage, um einige Elemente neu zu positionieren und einige Größenprobleme zu behandeln und die Headerbreite auf 450px festzulegen;

Wenn Sie jedoch% -Werte verwenden, können Sie festlegen, dass Ihr Headerdiv 100% der Basisbreite in seinem übergeordneten Element hat. So können Sie nur den Körper oder eine Container-div-Breite ändern, die alle Kinder anpassen werden.

Answer 4

Diana,

Ich bin froh, dass ich auf diese Frage stieß. Ich habe gerade mein erstes responsives Design hochgeladen, das zu 90% aus Prozentsätzen in Bezug auf Schriftgröße und Breite besteht.

Schauen Sie sich die folgende Liste: http://www.noxinnovations.com/portfolio/responsive/

Offensichtlich ist es nicht toll aussehen, und das Bild sieht deplaziert Art und Weise ... Aber mir einen Gefallen tun und das Browserfenster skalieren, indem sie es langsam machen kleiner und kleiner. Ich habe das getan, indem ich eine prozentuale Breite eingestellt habe!

Vertrauen Sie mir, ich habe versucht, diese Responsive-Design-Test mit Pixeln, und es ging nicht so gut aus. Die prozentuale Breite stellt sicher, dass unabhängig von der Auflösung und/oder den Pixelabmessungen (per se) das Design immer auf die Größe des Bildschirms abgestimmt ist. Außerdem musste ich keine CSS3-Medienabfrage verwenden, aber ich würde sehr empfehlen, CSS3-Medienabfragen nur dann zu verwenden, wenn Sie sie benötigen.

Meiner Meinung nach sollte ich wahrscheinlich eine Media Query für einen größeren Bildschirm haben.

Ich hoffe das hilft dir so viel wie es mir geholfen hat! Danke, Aaron