Ist es schlecht, mit Pixeln in CSS zu arbeiten? [geschlossen]

Ist es in Bezug auf die Kompatibilität schlecht, Pixelzahlen in CSS anstelle von Prozentsätzen zu verwenden? Wie wäre es mit niedrigeren Auflösungen? Ist es in Ordnung, mit ihnen in Bereichen von 1 bis 100 zu arbeiten?

Dies ist eine schwierige Frage, da die Antwort hauptsächlich von Ihrer Situation abhängt.

Pixel sind nicht so schlecht, ich benutze sie meistens auch. (Manchmal sogar für Schriftgrößen.)
Normalerweise fixiere ich das äußere Blockelement des Layouts durch eine bestimmte Größe (Pixel mit Layouts mit fester Breite und Prozentsätze mit flüssigen Layouts), und auf den inneren Elementen setze ich normalerweise Prozentsätze, wann immer dies möglich ist.

Es gibt einige Elemente, die einfach nicht mit Prozentsätzen oder ems gestylt werden können , insbesondere die ausgefalleneren Dinge, die von Grafikdesignern stammen, die solche Prinzipien nicht verstehen.

Beispiel: Wenn Ihre Site eine Spalte mit einem einfachen Stil enthält, können Sie die Breite leicht auf einen Prozentsatz festlegen. Wenn jedoch ein Hintergrundbild mit einer bestimmten Breite vorhanden ist, das nicht auf Skalierung ausgelegt ist, sieht es nur gut aus mit einer festen Breite. In solchen Fällen müssen Sie sicherstellen, dass der Rest der Seite die verbleibende Breite korrekt einnimmt.

Beachten Sie, dass Sie Pixel mit Prozentsätzen zusammen verwenden können.
Dies ist beispielsweise ein Ausschnitt aus einer meiner neuesten Web-Apps:

min-width: 800px;
width: 80%;
max-width: 1500px;

Die Wahl hängt auch davon ab, welches Design oder Layout Sie erreichen möchten.

Für eine feste Breite Layout mit sind Pixelwerte in Ordnung. Wenn ein Designer Ihnen ein Photoshop-Bild gibt, das wirklich ausgefallene Dinge enthält, die extrem kompliziert wären, wenn Sie überhaupt darüber nachdenken würden, wie sich die Größe ändern würde, sollten Sie sich auf jeden Fall dafür entscheiden.

Wenn Ihr Layout sein muss dynamisch sein muss , sollten Sie Prozentsätze verwenden, um sicherzustellen, dass es sich bei Änderungen der Auflösung erweitert. Mit dem obigen Codefragment können Sie es in Szenarien besser aussehen lassen, in denen es sonst verrückt aussehen würde.

Einige Layouts (z. B. stellen Sie sich vor, StackOverflow würde den gesamten Platz einnehmen) würden auf einer Breite von z. 1920 Pixel - die Linienbreiten wären so wahnsinnig hoch, dass das Lesen äußerst unpraktisch wäre.
Das ist wasmax-width . Selbst in einigen dynamischen Layouts müssen Sie die maximale Breite Ihrer Site begrenzen, um die Benutzerfreundlichkeit und Lesbarkeit zu maximieren.

Berücksichtigen Sie auch die kleineren Bildschirme.
Zwar verwendet niemand mehr einen 800 × 600-Desktop, aber viele Menschen surfen mit mobilen Geräten mit noch geringerer Auflösung im Internet.
Das ist wasmin-width Zweck: Damit Ihr dynamisch erweitertes Layout bei kleineren Ergebnissen weniger überfüllt aussieht.

Ich hoffe das hilft.

BEARBEITEN:

Das Smashing Book enthält einige sehr nette Gedanken zu diesem Thema.

EDIT 2:

Ich möchte nicht, dass mein Beitrag so klingt, als ob Sie Ihren Besuchern eine pixelbasierte Größenänderung aufzwingen.
(Anscheinend haben mich einige Leute in den Kommentaren so missverstanden.)

Um es zu klären:

Ich glaube, dass das ideale Layout gut zu jeder möglichen Auflösung oder Einstellung passt.
Wir können jedoch nicht immer alles perfekt machen. Zeit / Ressourcen und die Zielgruppe sind der Schlüssel, um festzustellen, ob Ihre Site diese erweiterte Funktionalität benötigt oder nicht.

Ich schlage vor, dass Sie das Richtige für den jeweiligen Job verwenden.

Wenn Sie eine Website entwickeln, die einen erheblichen Prozentsatz von Besuchern hat, die erweiterte Anpassungen an der Website benötigen, lohnt es sich möglicherweise.
(Natürlich tun wir es manchmal nur für uns selbst, um das Gefühl zu haben, die Dinge richtig zu machen, aber es ist nicht immer eine finanziell fundierte Entscheidung.)

Dennoch sollten Sie die richtigen Nachforschungen darüber anstellen, um welche Art von Website es sich handelt, wer die Besucher sind und solche Dinge, bevor Sie sich für Layouts entscheiden und ob es sich lohnt, sie flüssiger oder dynamischer zu gestalten.

Alle Messungen haben ihre eigenen Zwecke:

• Verwenden Sie Pixel für pixelbasierte Dinge wie Rahmen. Sie möchten wahrscheinlich keinen Rand, der 1,3422 Pixel breit ist.

• Verwenden Sie textzentrierte Kennzahlen (em, ex) für textbasierte Elemente wie Inhaltsbereiche, Beschriftungen und Eingabefelder. Auf einfache Weise können Sie sicherstellen, dass Sie Platz für Text mit einer bestimmten Länge und Breite haben.

• Verwenden Sie Prozente für fensterbasierte Dinge wie Spalten.

Es gibt natürlich Ausnahmen. Beispielsweise möchten Sie möglicherweise eine minimale Spaltenbreite in Pixel angeben. Befolgen Sie jedoch die obigen Anweisungen, und Ihre Seiten werden gut skaliert. Vergrößern und verkleinern Sie Ihre Seiten IMMER, um zu sehen, wie sie mit unterschiedlichen Schriftgrößen und Browserformen funktionieren - lassen Sie sich später nicht überraschen.

Schriftgrößen

Ich denke, Sie müssen zuerst die Probleme verstehen , die beim Arbeiten mit Pixeln in CSS auftreten:

• Das Zoomen in älteren Browsern ist fehlerhaft. Beispielsweise ändern IE6 und IE7 beim Zoomen die Größe von Text nicht . Die Zeilenhöhe kann auch eigenartig sein. Diese Probleme gibt es in modernen Browsern nicht, aber sie sind ein Grund, warum viele die Verwendung von Pixeln für Schriftgrößen scheuen.
• Jeder sieht Text in der gleichen Größe, wenn Sie die Schriftgröße in Pixel angeben. Browser haben eine Standardgröße von 16 Pixel für Absätze. Wenn Sie also nur emandere relative Größen verwenden, respektieren Sie die Entscheidung der Benutzer, die dies ändern. Dies ist besonders wichtig auf textlastigen Websites, insbesondere wenn mehr ältere Benutzer vorhanden sind. Wenn andererseits das Design einer Website wichtig ist, halte ich es für möglich und gerechtfertigt px, Schriftgrößen anzugeben, ohne die Benutzerfreundlichkeit zu beeinträchtigen.

Am Ende müssen Sie die Entscheidung selbst treffen, und dies hängt von den genauen Umständen ab, aber ich denke, dass die Angabe der Schriftgröße in Pixel in Ordnung ist .

By the way, wenn mit emArbeitsschriftgröße angeben , ist es eine gute Idee , die festlegen bodyzu font-size: 62.5%. Dies bedeutet, dass die Basisschriftgröße 10px beträgt, also 1em 10px, 1.6em 16px usw., was das Denken in Pixeln beim Entwerfen mit ems erleichtert . Ich finde es immer noch frustrierend, so zu arbeiten, besonders wenn die Werte von ems kaskadieren. Es gibt einige sehr praktische Websites wie PXtoEM.com , die dabei helfen.

Layoutprobleme

Der Bildschirm ist ein pixelbasiertes Layout , daher sind Pixel für viele Dinge eine intuitive Wahl. Das Hauptproblem hierbei ist, dass verschiedene Benutzer unterschiedliche Bildschirmgrößen haben . Wie andere bereits betont haben, ist die Verwendung von min-widthund max-widthin Pixel zusammen mit widthin Prozent eine hilfreiche Methode, um die Größe des Bildschirms zu berücksichtigen und gleichzeitig zu verhindern, dass Ihre Site in sehr kleinen und sehr großen Fenstern unangemessen gequetscht oder gedehnt wird.

Ich würde diesen Ansatz jedoch generell zugunsten von CSS-Medienabfragen vermeiden . Sie können dann Blöcke mit fester Breite verwenden und das Layout (unter anderem) mit zunehmender Bildschirmgröße erweitern. CSS-Medienabfragen leiden jedoch wie alle coolen Webtechnologien unter mangelnder Browserunterstützung. Insbesondere IE8 und frühere Versionen unterstützen sie nicht, obwohl es JavaScript-Korrekturen gibt. Auf der anderen Seite werden sie vom iPhone und anderen Handheld-Geräten unterstützt, und ich würde sie dringend empfehlen, wenn Sie möchten, dass Ihre Website auf diesen Geräten gut aussieht.

Ich denke, Gitter mit fester Breite sind in Ordnung . Rastersysteme mit fester Breite wie das 960- Rastersystem sind an sich schon populär genug, und es gibt so viele andere Websites mit fester Breite, dass ich bezweifle, dass Sie in diesem Fall viele Beschwerden hören würden. Handheld-Geräte ohne große Bildschirme sind ein Problem. Hier sollten jedoch CSS-Medienabfragen verwendet werden, damit Sie alles in Pixel angeben können und Ihre Website auf dem Desktop und auf dem iPhone gut aussieht.

Fazit

Letztendlich hängt alles davon ab, wer Ihre Benutzer sind, was Sie unterstützen müssen und wie Ihre Website aussehen soll, aber die Verwendung von Pixeln in CSS ist von Natur aus nichts Falsches .

Das hängt davon ab, was Sie stylen. Bei Spalten sollte die Breite wahrscheinlich von der Textgröße abhängen, um sicherzustellen, dass sie auf mehreren Auflösungen / Bildschirmen optimal aussieht. Wenn Sie Ihre Seite in zwei Teile teilen möchten, sollten Sie Prozentsätze verwenden. Wenn Sie jedoch unabhängig von der Auflösung einen 1-Pixel-Rand zwischen diesen beiden Teilen wünschen, verwenden Sie Pixel.

Grundsätzlich kommt es darauf an, wer Sie anstellt und folglich das Publikum Ihrer Arbeit. Für institutionelle Zwecke (bei denen Inhalte wie bei einem Regierungsprojekt Vorrang vor der Form haben sollten) sollten Sie besser mit .em oder% arbeiten. Sie sind schwerer zu kontrollieren, aber in Bezug auf die Zugänglichkeit sehr benutzerfreundlich.

Wenn wir über korporative Websites sprechen (wo Form das Geschäft ist), ist Pixel ein genaueres Werkzeug, um die Erwartungen Ihrer Kunden in Bezug auf seine Marke zu erfüllen. Eine flüssige Schnittstelle (%, .em) ist immer eine gute Sache, wenn sie intelligent ausgeführt wird. Vergessen Sie jedoch nicht, Ihr Design unter extremen Bedingungen zu überprüfen und sicherzustellen, dass es stabil ist.

Wenn Sie mit Pixeln arbeiten, haben Sie die absolute Kontrolle über das endgültige Erscheinungsbild Ihrer Website. Sie müssen jedoch davon ausgehen, dass einige Benutzer nicht in der Lage sind, effizient damit zu arbeiten.

Beste Option: Anstatt eine Website zu entwerfen, die für alle Plattformen kompatibel ist (was zu einem Multi-Mangel-Design führt), schlagen Sie Ihren Kunden spezielle Versionen der Website vor, die an jede Anforderung angepasst sind. Dies ist eine bessere Vorgehensweise und ein besseres Geschäft für einen Designer. ..

Ich würde sagen, vermeiden Sie es, wenn möglich, außer in bestimmten Fällen.

Zum Beispiel ist es für einen dünnen Rand in Ordnung, nur 1px anzugeben.

Auch für max-und min-Stilattribute ist es ok. Machen Sie dann das Nicht-Max / Min-Attribut nach Möglichkeit zu einem Prozentsatz.

Das ist wirklich eine gute Frage, die ich schon oft gestellt habe. Da ich kein Hardcore-Webdesigner bin (ich bin eher auf der Entwicklungsseite), habe ich normalerweise die Designer, mit denen ich zusammenarbeite, nach ihrer Meinung gefragt, und hier ist, was ich herausgearbeitet habe:

Die Verwendung von Prozentsätzen gegenüber Pixeln zur Größenbestimmung von Elementen usw. ist wirklich eine Frage des persönlichen Geschmacks oder der jeweiligen Anforderungen. Wenn Sie es zum Skalieren benötigen oder es gut skalieren kann, verwenden Sie Prozentsätze. Wenn nicht, verwenden Sie Pixel. Die Leute hier haben die Beispiele für Hauptspalten auf einer Seite verwendet, die möglicherweise flüssig sein müssen, aber Ränder benötigen möglicherweise die Präzision einer Pixelmessung.

Offensichtlich hängt die Größe von Bildern stark von ihrer Auflösung und Pixeleinheiten ab, daher verwende ich sie in diesem Fall immer.

Die Verwendung der Größenanpassung im Vergleich zur Pixel- oder sogar Punktgröße für Text ist jedoch ein ganz anderer Fischkessel. Die meisten Leute, mit denen ich zusammenarbeite, haben einen Basis-Reset-Stil für Schriftgrößen, der die Größe von 1em auf etwa 12 Pixel reduziert. Sie verwenden dann ems überall (oder so nah wie möglich an anderen Orten), um Textelemente, Formularsteuerelemente und dergleichen zu dimensionieren. So arbeite ich jetzt auch, da es in einer Vielzahl von Browsern, Betriebssystemen und DPIs auf Desktops und Laptops gut zu funktionieren scheint. Ich kann jedoch nicht für mobile Geräte bürgen.

Barrierefreiheit ist jedoch der Schlüssel - wenn Sie etwas für Menschen mit Behinderungen nutzbar machen oder an einer Vielzahl von Geräten arbeiten möchten, auch wenn Sie dies für alt halten, ist eine Skalierung erforderlich. Bauen Sie es von Anfang an in Ihr Modell ein, um die Site zu entwerfen, und Sie werden möglicherweise feststellen, dass in diesem Fall nicht einmal eine absolute Pixelgröße erforderlich ist.

Zum Beispiel wird ein kunstintensives Design wahrscheinlich in einem einzigen Maßstab entworfen, aber die neue Bildungswebsite für behinderte Benutzer muss in einer Vielzahl von Situationen funktionieren.

Denken Sie daran, dass das W3C aus einem bestimmten Grund - Flexibilität - eine Vielzahl von Methoden zur Dimensionierung und Skalierung in seine Spezifikationen aufgenommen hat. Tun Sie, was am besten passt und für Ihr Publikum gut funktioniert (wie Moustard bereits sagte).

Ich bin kein CSS / HTML-Experte, aber ich verwende Konvention, um Pixel für die äußeren Container und Prozentsätze für die inneren Objekte zu verwenden.

Eine andere Faustregel, die ich bei jedem habe, der mein Layout überprüft, ist eine Drei-Pixel-Regel . Es ist selten, dass in jedem Browser genau alles genau ausgerichtet ist. Wir sind uns einig, dass der Aufwand die Vorteile überwiegt, wenn drei Pixel oder weniger verschoben werden.

Standardmäßig das Richtige tun. Wenn ein Benutzer Ihre Website mit deaktiviertem Javascript und ohne bevorzugte Cookies besucht, sollten Sie ihm eine Webseite bereitstellen, die so funktional und zugänglich wie möglich ist.

Ihre Standardeinstellung Stylesheet sollte nichts über das Browserfenster annehmen und dennoch eine funktionale Seite rendern, wie abscheulich sie auch sein mag, mit einer Auflösung von 320 x 320 und bis zu unbegrenzten Größen. Wenn die fotografische Wiedergabetreue so wichtig ist, dass Sie der Browserskalierung nicht vertrauen können, und manchmal auch, sollten Sie Pixelmessungen (mindestens Mindestwerte) für Elemente verwenden, die Bilder fester Größe einkapseln, um sicherzustellen, dass Sie nicht mit der Skalierung enden wichtige Dinge werden vertuscht. Durch die Angabe von Mindestbreiten und Prozentsätzen sollten Sie die Kontrolle erhalten, die Sie benötigen, und Ihren Benutzern die Barrierefreiheit bieten, die sie benötigen. Auch wenn die Barrierefreiheit jetzt kein Problem darstellt, wird es später sein, wenn die Site erfolgreich ist.

Wenn Sie tun , um mehr über die Browser - Fenster kennen, dann ist es in Ordnung , feste Breiten in alternativen Stylesheets zu verwenden, wenn die Bedeutung der Gestaltung rechtfertigt die Mehrarbeit zu erhalten.

Wenn Sie eine feste Größe anstreben, sind Pixel in Ordnung. Wenn Sie jedoch möchten, dass Ihr Layout bei verschiedenen Auflösungen / Bildschirmgrößen gut aussieht, sollten Sie sich an relativere Maße wie Prozentsätze halten. Die meisten Leute zielen auf Letzteres.

Es ist in Ordnung, wenn es das ist, was es braucht, um Ihren Kunden zufrieden zu stellen. In den meisten Fällen können Sie den Speicherplatz in verschiedenen Bildschirmgrößen nicht mit nur Prozentsätzen ausgleichen. CSS3-Medienabfragen helfen hier, aber die Übernahme ist immer noch problematisch.

In den meisten Fällen bevorzuge ich Pixel. Beispiel: Die Standardbreite des Inhalts beträgt: 960px. In "1024" ist es in Ordnung, mit kleinen freien Leerzeichen auf beiden Seiten des Bildschirms. Setzen Sie dort einen Farbverlauf oder Hintergrund. In "1280" oder "1440" oder "1680" oder was auch immer - es wird immer größere Lücken geben, aber es wird schön aussehen. Ja, für 800 - diese Seite wird hässlich sein. Aber wen interessiert das schon? Alle großen Spieler haben die Unterstützung für 800 eingestellt. Es gibt zu wenige Leute mit dieser Auflösung.

Es gibt jedoch viele verschiedene Websites, auf denen %% eine viel bessere Lösung darstellt.

Die Bausteine ​​eines Bildschirms sind Pixel. Mit festen Pixelgrößen kann man nichts falsch machen. Wie bereits auf anderen Postern erwähnt, können Sie auch Prozentsätze oder "em" als skalierbaren Ersatz verwenden.