In der heutigen Zeit mit Hunderten von Displays müssen Webdesigner häufig das Surferlebnis verschiedener Kunden berücksichtigen.
Die Textgröße ist ein wichtiger Teil der Benutzererfahrung. Unterschiedliche Auflösungen, unterschiedliche Monitorgrößen, unterschiedliche DPI-Werte und sogar unterschiedliche Browsereinstellungen wirken sich auf die endgültig angezeigte Textgröße aus. Obwohl viele Browser die Seite jetzt problemlos vergrößern können, ist es für Benutzer immer mühsam, bei jedem Besuch erneut zu zoomen, ganz zu schweigen davon, dass viele Benutzer nicht wissen, wie man die Seite vergrößert. Es ist am besten, den Benutzern basierend auf ihrer Auflösung eine rücksichtsvollere Standardschriftgröße zu geben. Was ist also die geeignete Größe für diese Schriftgröße?
12px? 15px? Oder sollten wir die px-Einheit überhaupt nicht verwenden?
Die Ursache des Problems liegt darin, dass alle Schriftgrößeneinheiten (px, pt, em) auf dem Bildschirm relative Einheiten sind und sie allein nicht die tatsächliche Größe des Textes bestimmen können. Darüber hinaus hängt die grundlegende Wahrnehmung der Textgröße durch den Menschen von der Perspektive der Augen ab, die nicht nur von der physischen Größe des Textes abhängt, sondern auch von seinem Abstand zum menschlichen Auge.
körperliche Größe
Nehmen wir zunächst eine physische Textgröße an, die wir beispielsweise auf einem 17-Zoll-1280 * 1024-Monitor erreichen möchten. Berechnet beträgt die Höhe des Webtexts auf den meisten Monitoren etwa 4,32 mm. Welche Schriftgröße soll dann bei verschiedenen Auflösungen angezeigt werden?
Schritt 1: Zählen Sie die Hauptauflösung des Benutzers und die entsprechende Bildschirmgröße.
Um zwischen physischer Größe und Auflösung umzurechnen, zählen Sie zunächst die Auflösung und die entsprechende Bildschirmgröße. Die Verteilung der Benutzerauflösungen kann den statistischen Protokollen der Website entnommen werden. Da jede Auflösungseinstellung mehreren Bildschirmen unterschiedlicher Größe entsprechen kann und die Bildschirmgröße nicht über die Webseite ermittelt werden kann, müssen wir eine statistische Analyse des aktuellen Monitormarktes durchführen: Zählen Sie für eine bestimmte Auflösung die möglichen Bildschirmgrößenbereiche. von der kleinsten bis zur größten, relativ gängigen Größe (oder verwenden Sie die Mitte des Bereichs als Mainstream-Größe). Wie im Bild unten gezeigt——
Markt für Computermonitore (es gibt viele Arten von Produkten, und es ist unvermeidlich, dass man etwas verpasst, die Daten dienen nur als Referenz)
Schritt 2: Berechnen Sie die physische Breite gängiger Bildschirmgrößen für jede Auflösung
Heutige Monitor-Seitenverhältnisse umfassen nicht nur 4:3-Standardbildschirme, 16:10-Breitbildschirme, sondern auch unregelmäßigere Verhältnisse. Um Monitore mit unterschiedlichen Seitenverhältnissen zu vergleichen, werden für Statistiken horizontale Auflösungen verwendet. Verwenden Sie die gängige Größe und das Seitenverhältnis (vorausgesetzt, die Länge und Breite der Pixel sind gleich), um die Bildschirmbreite (Zoll) zu berechnen, und konvertieren Sie sie dann in metrische Maße (Millimeter). Trend der Bildschirmgröße. Kombiniert mit der Benutzerverteilung jeder Auflösung sind die Ergebnisse wie in der folgenden Abbildung dargestellt (jeder Punkt im Bild entspricht einer Auflösung, die horizontale Achse ist die Anzahl der Pixel in horizontaler Richtung des Bildschirms, die vertikale Achse ist die Die physische Breite des Bildschirms und die Blasengröße geben die Verwendung dieser Auflösung an. Die blaue Blase zeigt den Standardbildschirm und die violette Blase den Breitbildschirm an. Die drei größten Blasen sind 1024 * 768, 1280 * 1024 und 1280*800.
Schritt 3: Berechnen Sie die Schriftgröße auf verschiedenen Monitoren
Teilen Sie die physische Breite des Bildschirms durch die Pixelbreite, um die Breite jedes Pixels zu erhalten. Teilen Sie diese Zahl dann durch die angegebene physische Größe des Textes, um die erforderliche Schriftgröße bei verschiedenen Auflösungen zu erhalten. Um beispielsweise 4,32 mm großen quadratischen Text anzuzeigen, sind bei jeder Auflösung die folgenden Schriftgrößen erforderlich (separat berechnet für Notebooks und Desktops):
Bei unterschiedlichen Auflösungen sind Schriftgrößen erforderlich
Es ist ersichtlich, dass die Größen von Notebooks und Desktops sehr unterschiedlich sind. Der Einfachheit halber wird die Standardgröße oder Durchschnittsgröße jeder Auflösung verwendet, um die für die angegebene Schriftgröße bei jeder Auflösung erforderliche Schriftgröße zu berechnen. (Das folgende Bild entfernt die Auflösungen, die grundsätzlich nur auf Notebooks verwendet werden), wobei 4,32 mm, 3,77 mm und 3,25 mm als Beispiele dienen (Schriftarten in den Größen 16, 14 und 12 bei einer 17-Zoll-Auflösung von 1280 x 1024):
Um eine feste physische Größe beizubehalten, muss das Verhältnis zwischen der erforderlichen Schriftgröße und der Auflösung unter jeder Mainstream-Anzeige festgelegt werden
Da einige chinesische Schriftarten bei nicht geraden Zahlen nicht gut angezeigt werden, wenn ClearType nicht aktiviert ist, wird im Allgemeinen empfohlen, gerade Zahlen wie 12, 14, 16, 18 und 22 Pixel zu verwenden. Wählen Sie also die nächstgelegene gerade Zahl für eine bestimmte Auflösung aus. Beispiel: 14 Pixel werden für horizontale Bildschirmauflösungen unter 1100 verwendet, 16 Pixel werden für 1100 bis 1500 verwendet, 18 Pixel werden für Bildschirme über 1500 verwendet und so weiter.
Entfernung zum menschlichen Auge
Obwohl die Schriftgröße von Notebooks viel kleiner ist als die von Desktop-Computern, bereitet uns dies eigentlich keine großen Unannehmlichkeiten. Dies liegt daran, dass der Abstand zwischen dem menschlichen Auge und dem Bildschirm bei der Verwendung von Notebooks im Allgemeinen geringer ist als bei der Verwendung von Desktop-Computern. Wenn Netbooks immer kleiner werden (das extreme Beispiel sind Mobiltelefone), kann es sein, dass die Leute sie bei der Verwendung näher halten, sodass der Betrachtungswinkel größer wird. Im Gegenteil, wenn das Display immer größer wird (24 Zoll oder sogar größer), kann es aufgrund von Überlegungen wie dem Gesamtbetrachtungswinkel dazu kommen, dass sich Menschen auch weiter vom Bildschirm entfernen, wodurch sich der Betrachtungswinkel verringert.
Quantitativ gesehen: Da die Textgröße h (4 bis 5 mm) im Verhältnis zum Abstand d (30 bis 60 cm) zwischen dem menschlichen Auge und dem Text sehr klein ist, kann davon ausgegangen werden, dass der Betrachtungswinkel θ proportional zu h und umgekehrt ist proportional zu d (θ≈tgθ=h/ d). Mit anderen Worten: Text gleicher Größe erscheint nur halb so groß, wenn er 60 cm davon entfernt ist.
Mit anderen Worten: Der Monitor kann nur eine ungefähre Größe vermitteln, und jeder Benutzer passt den tatsächlichen Effekt, den er sieht, dennoch an, indem er bei bestimmten Vorgängen unbewusst den Abstand zum Bildschirm anpasst. Angesichts der zunehmenden Zahl von Laptop-Benutzern (siehe vorherigen Artikel: Laptop-Marktanteil) können Front-End-Designer nur einen Seiteneffekt bereitstellen, der auf der durchschnittlichen Größe von Laptops und Desktops basiert, und es hängt von den Benutzern ab, sich anzupassen.
Verwenden Sie JS, um die Schriftgröße bei verschiedenen Auflösungen automatisch anzupassen
Die ID des Div, in dem sich der Hauptteil der Webseite befindet, lautet beispielsweise „content“ –
Hinweis: Um sicherzustellen, dass der Text in jedem Browser skaliert werden kann, verwendet die Schriftgrößeneinheit em anstelle von px. Im Allgemeinen ist der Browser standardmäßig 1em=16px und 0,875em1em1,125em ist 1416. 18px.
Bitte beachten Sie bei der Verwendung der Schriftgrößenskalierung: Für Schriftgrößeneinheiten wie Titel innerhalb des div verwenden Sie am besten Prozentsätze statt fester Schriftgrößen, damit diese synchron mit dem Text skaliert werden können.
Anhang: Die wichtigsten in den Diagrammen dieses Artikels genannten Daten
Erstveröffentlichung auf dieser Website: http://www.mhzx1.com