Frage Allgemeine Frage zu Maßeinheiten :)

[bUu2188]

Schönen guten Abend :)
Ich hätte mal folgende Frage an Euch. Eine ganz allgemeine Frage an Euch. Wann benutzt Ihr welche Maßeinheit?
Bei meiner Homepage die ich gerade bastel, habe ich oft das Problem, dass es bei einer gewissen Skalierung top aussieht und bei einer anderen
wie Müll :-D . Ich habe die ganze Zeit versucht ohne Media-Querys aus zukommen. Aber ich habe das Gefühl ich komme nicht drum herum.
Zu meiner Frage zurück, um oft mein gewünschtes Ergebnis zu bekommen bei Skalierung mache ich auch oft so Spielereien wie

width: 10vh

Was von außen aussieht wie... HÄÄ er benutzt bei WIDTH View height. Aber damit bekomme ich oft gute Ergebnisse bei Browser
Skalierung. Deshalb meine Frage an Euch wann und wo benutzt Ihr welche Maßeinheit?
Ich arbeite zum Beispiel gerne mit "vh und vw", obwohl ich schon gemerkt habe, dass iOS Safari da nicht so ganz zufrieden damit ist :-(

Liebe Grüße

 

[basti1012]

Also Pixel ist immer schlecht weil du damit kaum was reponsiv hinbekommst. Für Border und Mini margin und Padding Abständen vieleicht noch Ok ,aber sonst ehr schlecht. Für Reponsive Webseiten wirst du wohl ehr rem ,em , % nehmen müssen.

Mit vw und vh kann man auch etwas reponsiv machen,nur ist da der fall wenn man das auf schriften oder Bilder anwendet das es dann mal zusammen gedrückt aussehen tut ,jenachdem wie der Browser gerade verkleinert wird.

Wie auch immer .Kuck dir @media queries an und mache es damit und em, rem und Prozenten und dann wirst du auch ein gutes Ergebniss erzielen können

 

[bUu2188]

Also benutzt man rem und em hauptsächlich dafür um die Abstände zu definieren ... wie padding: 5rem; ?
Ich kann mir vorstellen, dass rem und em deshalb responsive sind, weil man dadurch einfach durch Breakpoints nur die font-size global ändern müsste um alles mit skalieren zu lassen?
Weil em und rem haben ja sonst keine responsive Eigenschaft wie zum Beispiel % oder vh und vw.

Liebe Grüße

 

[scbawik]

font-size global ändern müsste um alles mit skalieren zu lassen?

Du kannst die globale font-size auch wiederum mit relativer Maßeinheit angeben (zb "vw") und hast dann eine proportional skalierende Website.

html {
  font-size: 1vw;
}
.example {
  padding: 1rem;
}

Dadurch machst du aus rem/em dynamische Werte, die sich an der Bildschirmbreite orientieren.
Habe diese Technik früher oft verwendet, um bspw. zwischen 1000 Pixel und 1200 Pixel das Erscheinungsbild beizubehalten.

Um die Skalierung zu beenden, einfach via Media Query:

@media all and (max-width: 1000px) {
  html {
    font-size: 10px;
  }
}

@media all and (min-width: 1200px) {
  html {
    font-size: 12px;
  }
}

Allerdings ist es nicht unbedingt sinnvoll, eine Website wie ein PDF zu behandeln.
Ich persönlich mach das mittlerweile nicht mehr.

 

[bUu2188]

Vielen Dank für deine Antwort :) Und wie machst Du es jetzt? Also benutze ich um Div's zu definieren ( vh und vw ) ?
Und für padding, margin ( em und rem ) ?

Liebe Grüße

 

[scbawik]

Vielen Dank für deine Antwort :) Und wie machst Du es jetzt? Also benutze ich um Div's zu definieren ( vh und vw ) ?
Und für padding, margin ( em und rem ) ?

Liebe Grüße

Ich verwende eigentlich immer die Maßeinheit die sich gerade am besten eignet.
vw, vh, em und rem also eher selten :)

In vielen Fällen lässt sich mit % statt vw/vh arbeiten. Gerade bei verschachtelten Elementen unerlässlich.

1 em sind 1 rem.
1 rem sind standardmäßig 16 Pixel. Dann kann man also auch gleich mit Pixeln arbeiten.

Also: Pixel für absolute Angaben, Prozent für relative Angaben.

Natürlich haben alle Einheiten ihre Daseinsberechtigung.
Nur lässt sich das schwer verallgemeinern was sich nun am besten für welchen Ausnahmefall eignet.
em sind beispielsweise in Textelementen genial.

 

[bUu2188]

Ok vielen Dank für deine Hilfe :)