css width / heights in geräteunabhängigen Einheiten definieren?

8

Ich habe ein div und ich versuche herauszufinden, wie es dazu gebracht wird, die gleiche Menge an Bildschirmplatz einzunehmen, unabhängig von der Display-Dichte des Geräts.

Nehmen wir zum Beispiel an, ich habe zwei Geräte, die jeweils 5 Zoll breit sind. Die erste Anzeige hat ein Geräte-Pixel-Verhältnis = 1 und die zweite ein Geräte-Pixel-Verhältnis = 2.

%Vor%

So hat das zweite Gerät doppelt so viele Pixel in den gleichen Raum gepackt.

Mein Div-Stil:

%Vor%

Wenn ich das richtig verstehe, scheint Gerät 2 die Hälfte der Breite / Höhe wie bei Gerät 1 zu rendern.

Wenn das der Fall ist, gibt es eine Möglichkeit, unsere Breite / Höhe in einer geräteunabhängigen Einheit zu definieren? Oder müssen wir alle unsere Stile beim Laden der Seite manuell skalieren, nachdem wir das Geräte-Pixel-Verhältnis-Attribut untersucht haben?

Danke

    
user291701 27.11.2012, 15:03
quelle

3 Antworten

3

Erneute Definition der CSS-Größe mit em unit wäre gut.

Einige gute Links in dieser Referenz. Bitte überprüfen Sie diese

  1. w3.org
  2. w3.org
  3. css-tricks

Alle oben genannten Links erfordern, dass em am besten in Fällen geeignet ist, in denen Ihr Dokument sich auf einer Vielzahl von Geräten gut verhalten soll.

    
mtk 27.11.2012 15:32
quelle
0

Das klingt eher so, als müssten Sie mit Prozentsätzen statt mit Pixeln arbeiten. Es wird also einen "Prozentsatz" Ihres Bildschirms verwenden

%Vor%

Es würde das Problem mit der Anzahl der Pixel lösen. Dies würde das Problem lösen, wenn Sie mit dem Bildschirm eines Iphone und eines Android arbeiten, da sie zwei völlig unterschiedliche Auflösungen verwenden. Zum Beispiel glaube ich, dass das Iphone 320 von .. etwas verwendet, während mein eigenes Samsung Galaxy ich 480 von etwas denke. (nicht die wahren Werte)

    
Dorvalla 27.11.2012 15:06
quelle
0

Die meisten Geräte würden unter den folgenden 3 Auflösungen fallen 1) HVGA-Hälfte von VGA (320 x 240) 2) WVGA-Wide VGA (800x 480) - fast 1,5 mal HVGA 3) HVGA 2x- (640 X 960) - IPHONE 4 verwendet diese Auflösung

Schreiben Sie getrennte CSS-Dateien für die obigen drei Auflösungen mit

%Vor%

oder

%Vor%

Machen Sie dasselbe mit anderen Auflösungen. Eine in 1 Auflösung erstellte CSS-Klasse sollte in allen drei Auflösungen kopiert werden, um eine perfekte Ansicht zu erhalten. Auf diese Weise können Sie einen perfekten gerätespezifischen Stil präsentieren

    
Vidiya Prasanth 27.11.2012 15:35
quelle

Tags und Links