-
Posts
-
[DE]
Hallo,
gibt es ein allgemeines Media Queries Sylesheet für ENFOLD mit dem man die Typografie genau steuern kann?
Also ein Best-Practice-Ansatz mit den aktuell geläufigsten Breakpoints für die aktuellen Viewports(Endgeräte)?
————————————
[EN]
Hello,
Is there a general Media Queries Sylesheet for ENFOLD with which you can precisely control the typography?
In other words, a best-practice approach with the most common breakpoints for the current viewports (devices)?Oder sollte man diesen Ansatz wählen und auf Media Queries verzichten bzgl. der typogarfischen Gestaltung?
Or should you choose this approach and do without media queries with regard to typographical design?/* Basis-Schriftgröße für das gesamte Dokument festlegen */
html {
font-size: 16px; /* Basisschriftgröße ist 16px *//* CSS-Variablen für Schriftgrößen mit clamp() */
–font-h1: clamp(2.5rem, 5vw + 1rem, 6.25rem); /* Mindestens 40px, ideal mit Viewport skaliert, maximal 100px */
–font-h2: clamp(1.8rem, 3.5vw + 0.5rem, 2.5rem); /* Mindestens 28.8px, maximal 40px */
–font-h3: clamp(1.6rem, 3vw + 0.5rem, 2rem); /* Mindestens 25.6px, maximal 32px */
–font-h4: clamp(1.4rem, 2.5vw + 0.5rem, 1.75rem); /* Mindestens 22.4px, maximal 28px */
–font-h5: clamp(1.2rem, 2vw + 0.5rem, 1.5rem); /* Mindestens 19.2px, maximal 24px */
–font-h6: clamp(1.1rem, 1.5vw + 0.5rem, 1.25rem); /* Mindestens 17.6px, maximal 20px */
–font-p: clamp(1rem, 1.5vw + 0.5rem, 1.2rem); /* Mindestens 16px, maximal 19.2px */
–font-menu: clamp(0.9rem, 1vw + 0.5rem, 1.1rem); /* Mindestens 14.4px, maximal 17.6px *//* Schriftglättung aktivieren */
-webkit-font-smoothing: antialiased; /* Glättet die Schrift */
-moz-osx-font-smoothing: grayscale; /* Optimiert für Mac-Geräte */
}/* Verwenden der CSS-Variablen für die Überschriften und Textelemente */
h1 {
font-size: var(–font-h1);
line-height: 1.2; /* Kompakter für große Headlines */
text-transform: none !important;
}h2 {
font-size: var(–font-h2);
line-height: 1.3; /* Etwas großzügiger als H1 */
text-transform: none !important;
}h3 {
font-size: var(–font-h3);
line-height: 1.4;
text-transform: none !important;
}h4 {
font-size: var(–font-h4);
line-height: 1.4;
text-transform: none !important;
}h5 {
font-size: var(–font-h5);
line-height: 1.5; /* Noch großzügiger */
text-transform: none !important;
}h6 {
font-size: var(–font-h6);
line-height: 1.5;
text-transform: none !important;
}p {
font-size: var(–font-p);
line-height: 1.6; /* Optimal für Fließtexte */
}.main_menu li a {
font-size: var(–font-menu);
line-height: 1.4; /* Angemessen für Menüpunkte */
}/* Schriftglättung und Font-Weight für Überschriften */
h1, h2, h3, h4, h5, h6 {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-weight: 400 !important; /* Verhindert Überschreibungen */
}Wegen etwas höherer Browser Kompatibilität (so war es jedenfalls mal bei Safari und clamp) nutze ich für fluide font-size Definitionen die min/max Methode.
Siehe Link in Enfold Typography Sektion: https://spencermortensen.com/articles/typographic-scale/ wählte ich die musikalische Skala – und zwar einmal mit Faktor 2 und dann 3 ergeben sich folgende font-size Größen:
40-60, 36-50, 32-42, 28-34, 25-29, 22-24
was zu folgenden fluid Werten führt (ausgehend von einem viewport von 320px bis 1500px (Fluid-Font Calculator)
____
Due to slightly higher browser compatibility, I use the min/max method for fluid font-size definitions.
See link in Enfold Typography section: https://spencermortensen.com/articles/typographic-scale/ I chose the musical scale – once with factor 2 and then 3 the following font-size sizes result:
40-60, 36-50, 32-42, 28-34, 25-29, 22-24
which leads to the following fluid values (based on a viewport of 320px to 1500px (Fluid-Font Calculator)da Enfold selbst mit CSS Variablen arbeitet:
as Enfold itself works with CSS variables::root { --enfold-font-size-theme-content: 13px; --enfold-font-size-theme-h1: 34px; --enfold-font-size-theme-h2: 28px; --enfold-font-size-theme-h3: 20px; --enfold-font-size-theme-h4: 18px; --enfold-font-size-theme-h5: 16px; --enfold-font-size-theme-h6: 14px; }könnte man die mittels Filter überschreiben:
you could overwrite them using a filter:function my_avf_dynamic_css_after_vars( $output = '' ){ $output .= "\n"; $output .= ":root {\n"; $output .= "--enfold-font-size-theme-h1: min(max(40px, calc(2.5rem + (60 - 40) * ((100vw - 320px) / (1500 - 320)))), 60px);\n"; $output .= "--enfold-font-size-theme-h2: min(max(36px, calc(2.25rem + (50 - 36) * ((100vw - 320px) / (1500 - 320)))), 50px);\n"; $output .= "--enfold-font-size-theme-h3: min(max(32px, calc(2rem + (42 - 32) * ((100vw - 320px) / (1500 - 320)))), 42px);\n"; $output .= "--enfold-font-size-theme-h4: min(max(28px, calc(1.75rem + (34 - 28) * ((100vw - 320px) / (1500 - 320)))), 34px);\n"; $output .= "--enfold-font-size-theme-h5: min(max(25px, calc(1.5625rem + (29 - 25) * ((100vw - 320px) / (1500 - 320)))), 29px);\n"; $output .= "--enfold-font-size-theme-h6: min(max(22px, calc(1.375rem + (24 - 22) * ((100vw - 320px) / (1500 - 320)))), 24px);\n"; $output .= "--enfold-font-size-theme-content: min(max(16px, calc(1rem + (20 - 16) * ((100vw - 320px) / (1500 - 320)))), 20px);\n"; // p-tags $output .= "}\n"; return $output; } add_filter( 'avf_dynamic_css_after_vars', 'my_avf_dynamic_css_after_vars', 10, 1 );ich behielt mal die long-hand Version der min-max schreibweise – so wird deutlich wie die font-sizes berechnet werden.
I kept the long-hand version of the min-max notation – this makes it clear how the font sizes are calculated.um es dann global durchzusetzen dies in die quick css:
to then globally enforce this here in the quick css:body {font-size: var(--enfold-font-size-theme-content);} #top h1 {font-size: var(--enfold-font-size-theme-h1); } #top h2 {font-size: var(--enfold-font-size-theme-h2); } #top h3 {font-size: var(--enfold-font-size-theme-h3); } #top h4 {font-size: var(--enfold-font-size-theme-h4); } #top h5 {font-size: var(--enfold-font-size-theme-h5); } #top h6 {font-size: var(--enfold-font-size-theme-h6); }btw: on Layout Builder – Typography Input Fields – you can activate that switch to have:
“Activate to replace predefined selectboxes with font sizes with text fields to use custom units. Only recommended for experienced users who know, what they are doing. This is in active beta (since 5.0.1).”
– you then can insert those fluid values to that input field. e.g. for extremly big h1 headings (80-120px) etc.Der Dev / Mods : I read about this filter in the link at Typography : avf_el_styling_responsive_font_size_skip
so i can skip the responsive settings for some ALB Elements : like headings:
function custom_responsive_font_size_skip( $skip, array $atts, \aviaShortcodeTemplate $sc_context, $font_id, $selector_container ){ if( $sc_context instanceof avia_sc_heading ){ return true; } return $skip; } add_filter( 'avf_el_styling_responsive_font_size_skip', 'custom_responsive_font_size_skip', 10, 5 );looking which elements do have this i read about another filter : avf_responsive_media_sizes
is it possible to redefine those settings?apply_filters( 'avf_responsive_media_sizes', array( 'av-desktop' => array( 990, 0 ), 'av-medium' => array( 768, 989 ), 'av-small' => array( 480, 767 ), 'av-mini' => array( 0, 479 ) ) );Hi,
Yes, you can use the avf_responsive_media_sizes filter to adjust the breakpoints, but keep in mind that it will be applied globally and may affect various styling options across the site.
function avf_responsive_media_sizes_mod( $sizes ) { $sizes = array( 'av-desktop' => array( 1024, 0 ), // Desktop view: Min width 1024px 'av-medium' => array( 769, 1023 ), // Medium view: 769px to 1023px 'av-small' => array( 481, 768 ), // Small view: 481px to 768px 'av-mini' => array( 0, 480 ) // Mini view: 0px to 480px ); return $sizes; } add_filter( 'avf_responsive_media_sizes', 'avf_responsive_media_sizes_mod' );Best regards,
IsmaelThanks @ismael : it’s just for info – and my snippet stock – Of course I know that all the Media Query Css rules remain unaffected.
- You must be logged in to reply to this topic.