Chcę ustawić minimalny rozmiar czcionki dla każdego elementu na mojej stronie HTML.
Na przykład, jeśli istnieją elementy o rozmiarze czcionki mniejszym niż 12 pikseli, zmienią się na 12 pikseli.
Ale jeśli są elementy o rozmiarze czcionki większym niż 12 pikseli, nie zmienią się.
Czy można to zrobić za pomocą CSS?
p{ font-size: 1vw } @media (max-width: 1000px){ p{ font-size: 10px } }
W CSS3 jest na to prosty, ale genialny hack:
font-size:calc(12px + 1.5vw);
Dzieje się tak, ponieważ statyczna część funkcji calc () definiuje minimum. Mimo że część dynamiczna może skurczyć się do wartości zbliżonej do 0.
źródło
12px
(w tym przypadku).Od połowy grudnia 2019 r. Funkcja min / max w CSS4 jest dokładnie tym, czego chcesz:
(ostrożnie, to jest bardzo nowe, starsze przeglądarki (aka IE i msEdge) jeszcze jej nie obsługują)
(obsługiwane od dnia Chromium 79 i Firefox v75)
https://developer.mozilla.org/en-US/docs/Web/CSS/min
https://developer.mozilla.org/en-US/docs/Web/CSS/max
Przykład:
blockquote { font-size: max(1em, 12px); }
W ten sposób rozmiar czcionki będzie wynosił 1em (jeśli 1em> 12px), ale przynajmniej 12px.
Niestety ta niesamowita funkcja CSS3 nie jest jeszcze obsługiwana przez żadną przeglądarkę, ale mam nadzieję, że wkrótce się to zmieni!Edytować:
Kiedyś było to częścią CSS3, ale zostało ponownie zaplanowane na CSS4.
Od 11 grudnia 2019 r. Wsparcie pojawiło się w Chrome / Chromium 79 (w tym na Androida i Android WebView), a jako takie także w Microsoft Chredge aka Anaheim, w tym Opera 66 i Safari 11.1 (w tym iOS)
źródło
:root { --responsive-font-size-primary: min(2em, max(0.5em, 5vmin)); }
ułatwienie użytkowania:font-size: var(--responsive-font-size-primary);
Wygląda na to, że jestem trochę spóźniony, ale dla innych z tym problemem wypróbuj ten kod
p { font-size: 3vmax; }
użyj dowolnego tagu, który preferujesz i rozmiaru, który preferujesz (zastąp 3)
p { font-size: 3vmin; }
jest używany dla maksymalnego rozmiaru.
źródło
Użyj zapytania o media. Przykład: To jest coś, co używam oryginalnego rozmiaru to 1.0vw, ale kiedy osiągnie 1000, litera staje się zbyt mała, więc skaluję ją w górę
@media(max-width:600px){ body,input,textarea{ font-size:2.0vw !important; } }
Ta strona, nad którą pracuję, nie reaguje na> 500px, ale możesz potrzebować więcej. Zaletą tego rozwiązania jest to, że zachowujesz skalowanie rozmiaru czcionki bez super małych liter i możesz zachować to js za darmo.
źródło
CSS ma funkcję clamp (), która przechowuje wartość między górną i dolną granicą. Funkcja clamp () umożliwia wybór wartości środkowej w zakresie wartości pomiędzy zdefiniowanymi wartościami minimalnymi i maksymalnymi.
Po prostu ma trzy wymiary:
spróbuj z poniższym kodem i sprawdź zmianę rozmiaru okna, co spowoduje zmianę rozmiaru czcionki widocznej w konsoli. Ustawiam wartość maksymalną
150px
i minimalną100px
.$(window).resize(function(){ console.log($('#element').css('font-size')); }); console.log($('#element').css('font-size'));
h1{ font-size: 10vw; /* Browsers that do not support "MIN () - MAX ()" and "Clamp ()" functions will take this value.*/ font-size: max(100px, min(10vw, 150px)); /* Browsers that do not support the "clamp ()" function will take this value. */ font-size: clamp(100px, 10vw, 150px); }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <center> <h1 id="element">THIS IS TEXT</h1> </center>
źródło
Rozwiązanie CSS:
.h2{ font-size: 2vw } @media (min-width: 700px) { .h2{ /* Minimum font size */ font-size: 14px } } @media (max-width: 1200px) { .h2{ /* Maximum font size */ font-size: 24px } }
Na wszelki wypadek, gdyby ktoś potrzebował miksu scss:
/// /// Viewport sized typography with minimum and maximum values /// /// @author Eduardo Boucas (@eduardoboucas) /// /// @param {Number} $responsive - Viewport-based size /// @param {Number} $min - Minimum font size (px) /// @param {Number} $max - Maximum font size (px) /// (optional) /// @param {Number} $fallback - Fallback for viewport- /// based units (optional) /// /// @example scss - 5vw font size (with 50px fallback), /// minumum of 35px and maximum of 150px /// @include responsive-font(5vw, 35px, 150px, 50px); /// @mixin responsive-font($responsive, $min, $max: false, $fallback: false) { $responsive-unitless: $responsive / ($responsive - $responsive + 1); $dimension: if(unit($responsive) == 'vh', 'height', 'width'); $min-breakpoint: $min / $responsive-unitless * 100; @media (max-#{$dimension}: #{$min-breakpoint}) { font-size: $min; } @if $max { $max-breakpoint: $max / $responsive-unitless * 100; @media (min-#{$dimension}: #{$max-breakpoint}) { font-size: $max; } } @if $fallback { font-size: $fallback; } font-size: $responsive; }
źródło
AFAIK nie jest to możliwe w przypadku zwykłego CSS,
ale możesz wykonać dość kosztowną operację jQuery, taką jak:
jsBin demo
$('*').css('fontSize', function(i, fs){ if(parseInt(fs, 10) < 12 ) return this.style.fontSize = "12px"; });
Zamiast używać selektora globalnego
*
, sugerowałbym (jeśli to możliwe) bardziej szczegółowe określenie swoich selektorów.źródło
Właściwości
font-min-size
ifont-max-size
CSS zostały usunięte ze specyfikacji modułu czcionek CSS na poziomie 4 (i nigdy nie zostały zaimplementowane w przeglądarkach AFAIK). Grupa robocza ds. CSS zastąpiła przykłady CSS,font-size: clamp(...)
które nie mają jeszcze największej obsługi przeglądarek, więc będziemy musieli poczekać, aż przeglądarki ją obsłużą. Zobacz przykład w https://developer.mozilla.org/en-US/docs/Web/CSS/clamp#Examples .źródło
Sądząc po twoim powyższym komentarzu, możesz to zrobić z jQuery - tutaj:
// for every element in the body tag $("*", "body").each(function() { // parse out its computed font size, and see if it is less than 12 if ( parseInt($(this).css("font-size"), 10) < 12 ) // if so, then manually give it a CSS property of 12px $(this).css("font-size", "12px") });
Bardziej przejrzystym sposobem na zrobienie tego może być umieszczenie w CSS klasy „min-font”, która ustawia rozmiar czcionki: 12px, a zamiast tego wystarczy dodać klasę:
$("*", "body").each(function() { if ( parseInt($(this).css("font-size"), 10) < 12 ) $(this).addClass("min-font") });
źródło
Idealnie będzie działać z 50px. Który będzie działał jako statyczny, a zatem jako minimalna szerokość.
font-size: calc(50px + 5vw);
źródło