Datenschutz Impressum

NOF-Schule | Forum

zur Schule NOF-NetObjects-Tutorials von Tommy Herrmann


Font-size in Prozent?
#1
Ich bin mir sicher, dass ich irgendwann mal die Fontgröße in % angegeben habe für mediaqueries.

Aber irgendwie führt ein Font-Size:70% zu winziger Größe....
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#2
Stellt sich die Frage, wovon die % genommen werden! Wahrscheinlich von der Zeilenhöhe. Das ergibt nicht viel Spielraum.
Du kannst die Anweisung font-size: XY%; für den body in den HEADER schreiben oder "vw" (% of viewport width) für font-size:XYvw nehmen.
Keine Zeit, muss Haare machen!
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#3
nee, das klappt nicht, wenn ich über Media-Queries gehe für nur einen Block.
Ich ging bislang davon aus, dass sich die %-Zahl auf die Einstellung im Site-Style bezieht.
Hat bislang auch funktioniert - obwohl sehr selten gemacht (und somit vielleicht Zufall)
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#4
Nimm doch mal
h1 {
font-size: 8vw;
}
Achtung: Werte zwischen 3 und 8 %

Bei mir funktioniert es!
Keine Zeit, muss Haare machen!
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#5
Moin,

so ganz verstehe ich die Diskussion noch nicht :confused:

Mobirise stellt doch global (am blauen Pinsel-Symbol) diese CSS-Anweisungen per Default ein.


.jpg  CSS_Global.JPG (Größe: 302,34 KB / Downloads: 7)


Mobirise verwendet hierfür grundsätzlich die dynamische Maßeinheit "rem", die auch in Bootstrap grundsätzlich verwendet wird - also "Root - em" (EM steht für "Equal M" - die ungefähr gleiche Breite und Höhe des Großbuchstabens M hat), eben diese Default-Einstellung 1rem = 16px. Das sind dann 100% und dann sind natürlich 75% entsprechend kleiner oder gleich 0.75rem oder gleich 12px.

https://nekocalc.com/de/px-zu-rem-umrechner

Hier ein Beispiel von 75% oder 0.75rem am Block mit dem vertikal zentriertem Text neben dem Bild und das sind dann auch genau 75% der Text-Größe darüber. 75% sind eben 75 Teile von Hundert - aber nicht winzig!

So was wie Zufall gibt es nur beim Lotto :D

http://www.mobirise-tutorials.com/Testse...-Zentriert

In meinem Beispiel steht der modifizierte Text am PC auf 0.75rem und am Handy auf 1.25rem.


.jpg  75_Prozent_Font-Size.JPG (Größe: 201,2 KB / Downloads: 7)


Es kommt also darauf an, was als Standard am Pinsel festgelegt wurde, dort steht für den Text, also das <p> Tag, eigentlich immer 1rem (die "line-height" ist dabei 1.5) - also 100% oder 16px (bei manchen Themen auch 1.1rem).

https://www.w3schools.com/bootstrap4/boo...graphy.asp


Wolltest Du also am Handy eine größere Schrift als z.B. 75% von 1rem haben (weil diese dort zu winzig wirkt), dann müsstest Du via @Media-Abfrage diese Schriftgröße am Handy größer machen (z.B. wieder bei 100% oder 1rem belassen) und nicht in das Verhältnis zur Default-Größe setzen, also z.B. die unten im Code definierte class="meineKleineSchrift" an die entsprechenden Textpassagen schreiben, sodass diese Class eben erst ab einer Mindest-Displaybreite von 768px wirkt.

Code:
@media (min-width: 768px) {
  .meineKleineSchrift{
    font-size: 0.75rem;
  }
}
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#6
Da ich mir meine Schriftgrößen gelegentlich umdefiniere, habe ich in einem Block gelegentlich auch mal H1 = 5 oder 6 rem.

In den Mediaqueris nehme ich dann 50%, sollte dann 3 Rem sein.
Hat den Vorteil: wenn ich H1 dann doch auf 8 setze, habe in den Queries 4.
Funktioniert - manchmal nicht
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#7
... also (meines Wissens) verwendet Bootstrap per Default für <h1> 2.5rem (250%).

Alles andere ist das Werk der Mobirise-Stylisten. Daher haben die unterschiedlichen Themen eben auch ganz unterschiedliche Größen, wobei aber 6.0 (600%), glaube ich, die größtmögliche Wahl ist.

Dann sollte also 50% (0.5rem) der eingestellten Default-Größe auch immer funktionieren. Wenn nicht, müsste man echt mal forschen warum, vielleicht wurde dann aus irgendwelchen Gründen tatsächlich die "!important-Regel" von Mobirise angewendet.

Vielleicht wurde von Mobirise eben auch schon im kleinen Display-Bereich dann das <h1> Tag überhaupt nicht mehr verwendet (weil dort viel zu groß), sondern vielleicht ein <h5> Tag und dann davon 50% wäre allerdings wirklich winzig.

Du musst also in jedem Einzelfall immer gucken (und das kann in vielen unterschiedlichen CSS-Dateien stehen), welche Media-Anweisungen von Mobirise bereits vordefiniert worden sind, denn ich kann mir sehr gut denken, dass das nicht pauschal mit 50% funktionieren wird.
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#8
Wenn ich so etwas mache schreibe ich mir grundsätzlich eine eigene Klasse. Und die Schriftgröße gibt es nur in rem oder EM für mich. Wenn ich etwas ganz genau haben möchte benutze ich rem denn das kann ich genau in px umrechnen.
Wie Tommy schon im Vorpost geschrieben hat 1rem=16px
Gruss Andy

Wer Rechtschreibfehler findet, darf sie behalten... oder melden
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#9
Ich habe garantiert irgendeinen Fehler gemacht.
Wenn H1 auf 6 Rem steht und ich schreibe in den mediaqueris H1 70% , dann dürfen da keine 7px entstehen...

Wenn ich in den Queris explizit 3 rem angebe, gehts....

Ah geh....scheiß Internetkram...
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren


Möglicherweise verwandte Themen…
Thema Verfasser Antworten Ansichten Letzter Beitrag
  font im Mobirise Block ändern nof15us 2 222 03.03.2020, 14:08
Letzter Beitrag: nof15us
  H1 und H2 und Font-Größe stobi_de 1 256 07.08.2019, 15:24
Letzter Beitrag: Tommy Herrmann
  Mobirise-Interessante vor/zurück/Full Size Bilder Variante Thomas Saake 1 365 11.02.2019, 17:35
Letzter Beitrag: c-laus



Benutzer, die gerade dieses Thema anschauen: 1 Gast/Gäste
nach oben An den Anfang der Seite scrollen
NetObjects Fusion Infos, Downloads und Updates Diese Website wird durch Bot-Trap vor Spam geschützt!