So verwalten Sie die Schriftgröße zwischen Retina und dem normalen Design

Ich verspotte eine einseitige Website mit Skizze in Macbook Pro Retina mit einer Auflösung von 1440 Breite und 5120 Höhe. Ich sehe alles perfekt, sobald mein Design fertig ist, aber wenn ich anfange, HTML und CSS mit meinem Thunderbolt zu codieren, sehe ich, dass die Schriftgrößen größer sind als die, die ich auf meinem Retina-Display sehe. Was wäre also die bessere Lösung, um ein besseres Design im normalen Fenster und im Retina-Fenster zu haben? Ich verwende 1x- und 2x-Bilder für Retina- und normale Fenster, bin mir aber bei den Schriftgrößen nicht sicher. Jede Hilfe wäre willkommen.

Wenn Sie die Größe der Bilder für die "normale" Größe halbieren müssen, müssen Sie die Größe des Typs halbieren, um proportional zu sein. Wenn Ihr Retina-Display Bilder mit 2-facher Pixelgröße erfordert, erfordert Ihr Retina-Display den Typ 2x (Pixelgröße).
Meinen Sie (zum Beispiel) eine Schriftart, die in Ihrem HTML/CSS auf 24pt eingestellt ist, sieht größer aus als eine 24pt-Schrift in Ihrer Design-App?
@Mysterfxit ja, genau das habe ich vor
Welche Zahlen scheinen mit Ihren Erwartungen übereinzustimmen? Das Layout oder der Code?

Antworten (2)

Wenn Sie @2x in Ihrem Designprogramm arbeiten, können Sie die PPI-Einstellung für das Dokument verdoppeln, aber die Pixelabmessungen gleich lassen.

Wenn Ihr Dokument also 1440 x 1520 bei 72 ppi hat, ändern Sie es in 1440 x 1520 bei 144 dpi

Dadurch sieht alles genau gleich aus, aber jetzt stimmen Ihre Schriftgrößen besser mit dem überein, was Sie schließlich in CSS codieren werden.

Oder Sie können einfach alle Schriftgrößen durch 2 teilen.

Ich habe versucht, die Schriftgrößen durch 2 zu teilen, aber an einigen Stellen sehen sie immer noch zu klein aus. Ich meine, wenn ich 20/2 teile, ist es 10, es ist nicht sichtbar 😔
Welche Einheiten verwenden Sie in Ihrem CSS für Schriftgrößen? dh px, pt oder em
Ich verwende Pixel genauso wie in der Sketch-App
Hmm ... so arbeite ich normalerweise in Photoshop und es funktioniert für mich. Sketch kenne ich nicht. Vielleicht stimmt etwas anderes nicht.
Punkte sind relativ zu Zoll, also teilen Sie 24pt nicht einfach durch zwei, Sie müssen es in Pixel umwandeln. Dies ist, was Sie tun, indem Sie alles mit einer höheren dpi markieren (die Software führt diese Berechnung für Sie durch).
@Yorik Im Allgemeinen nein, aber in meinem Beispiel ja, du kannst durch zwei teilen.
@Yorik Ich habe beim letzten Kommentar zu schnell die Eingabetaste gedrückt. Ich weiß, dass es nicht ganz genau ist, aber normalerweise nehme ich einfach die Photoshop-Punktzahl und verwende diese für Pixel in CSS, und das bringt mich innerhalb von etwa 10 %, und ich fummele es nur ein bisschen in CSS, damit es richtig aussieht. Wie konvertieren Sie zwischen Pixeln und Punkten?
@Mysterfxit: Ich habe vergessen, meinen Kommentar zu Benjamin zu markieren, da er sich mehr auf seinen ersten Kommentar zu Ihrer Antwort bezog. Die DPI-Einstellung in Bildern ist lediglich ein Flag oder Indikator für die Absicht, aber in "zollbewusster" Software ist die DPI-Einstellung ein Skalierungsfaktor, der zur Berechnung von Schriftgrößen usw. verwendet wird, wie Ihre Antwort zeigt.

Ich muss meine Dateien mit 200 % anzeigen, um zu sehen, wie Bilder/Text im Browser aussehen. Dies hat mich auch überrascht, als ich ein Retina-Display bekam.

So verwalten Sie die Schriftgröße zwischen Retina und dem normalen Design
AntwortenHierDatenschutz-Bestimmungen1y, 0v