Zurück in unserem Code, hier im Startbildschirm, dem ersten Bildschirm, den wir sehen, konnten
wir bereits sehen, dass unsere beiden Schaltflächen - Zurücksetzen und Bestätigen - auch nicht so gut in
unserem Schaltflächencontainer positioniert waren.
Schauen wir uns also das Styling an, das wir dort unten eingerichtet haben. Was wir hier sehen
können, ist, dass wir dem Button-Container die
Breite von 100% zuweisen, aber worauf bezieht sich diese Größe?
Nun, diese Größe in dieser Ansicht hier bezieht sich natürlich, wenn wir 100% sagen, am Ende auf das umgebende
übergeordnete Element, bei dem es sich in diesem Fall um
diese Karte, diesen Eingabecontainer und in diesem Eingabecontainer handelt. Wir haben tatsächlich eine Breite von 300 festgelegt ist einfach zu klein, kombiniert mit unseren Schaltflächen,
die wir eine feste Breite von 100 haben, erhalten wir diesen Look, den wir nicht wollen, den wir übrigens
sehen können, wenn wir etwas ändern, so dass unsere App neu erstellt und daher neu gestartet wird
Wir sehen diesen Startbildschirm wieder. Hier ist der
Look, den wir nicht wollen.
Was wollen wir hier?
Nun, vielleicht wollen wir hier nicht die Breite von 300, sondern eine flexiblere Breite. Wir legen eine maximale Breite von 80% fest. Wir
können hier immer eine Breite von beispielsweise 80 oder 90% festlegen und einfach sicherstellen, dass diese immer eine minimale Breite von
300 hat, damit wir immer eine haben Zumindest so viele Pixel für den Fall, dass wir ein kleines
Gerät haben, bei dem 80% weniger wären, und dass wir mindestens dies
haben und jetzt würde dies hier besser aussehen.
Warum?
Weil wir jetzt standardmäßig 80% haben und vorher
hatten wir es als maximale Breite.
Wenn Sie nun einen Standardwert festlegen, wird sichergestellt, dass dies nicht unsere Grenze
ist, sondern unsere Standardgröße. Wir
möchten jedoch auch festlegen, dass die Mindestbreite 300 beträgt. Auf diesem kleinen Gerät überschreibt diese
Mindestbreite unsere Standardbreite, da 80% auf diesem kleinen Gerät tatsächlich weniger als
300 betragen würden.
Jetzt könnten Sie natürlich ein noch kleineres Gerät haben, bei dem diese Regel jedoch zu einem Problem
führt, bei dem eine Mindestbreite von 300 im Grunde bedeutet, dass Ihr Gerät kleiner als das ist, nicht breit genug ist
und Ihr Container daher die Grenzen unseres Geräts überschreiten würde Bildschirm.
Das ist vielleicht immer noch nicht die perfekte Regel, aber es ist sicherlich besser, wie wir hier sehen können, denn auf dem
größeren Bildschirm sieht dies hier auf dem iPhone immer noch gut aus, auf dem kleineren Bildschirm sieht es jetzt
auch gut aus.
Um sicherzustellen, dass wir unsere Grenzen nie verlassen, können wir auch eine maximale Breite festlegen und diese so einstellen, dass sie beispielsweise
95% beträgt, sodass wir zumindest einen kleinen Abstand um sie herum haben.
Jetzt stellen wir sicher, dass unser Container niemals außerhalb unseres Bildschirms fährt, sondern 80% benötigt. Wenn wir
jedoch einen superkleinen Bildschirm haben, benötigt
er 300, aber niemals mehr als 95% der verfügbaren Breite.
Jetzt haben wir hier einfach flexiblere Regeln aufgestellt, die auf einer breiteren Palette von Geräten funktionieren, was, wie Sie sehen
können, hier etwas besser ist.