Przejdź do treści

Generator clamp() — płynne rozmiary w CSS

Wygeneruj funkcję CSS clamp() dla płynnej typografii lub odstępów między dwiema szerokościami ekranu.





Podgląd: ten tekst zmienia rozmiar razem z szerokością okna.
    
  

    

    Umieść to narzędzie na swojej stronie
    

      
Bezpłatnie, bez rejestracji. Widżet pokazuje na dole napis „Narzędzie udostępnia AMKBIT.pl”.

      

        
        
        
        
      

      

      
      
Strona demonstracyjna

      
    

  

      

    
Jak to działa


clamp(min, wartość, max) zwraca środkową wartość, ale nie mniejszą niż min i nie większą niż max. Środek to prosta: rozmiar rośnie liniowo z szerokością ekranu (vw). Generator liczy nachylenie (max − min) ÷ (szerokość do − szerokość od) i przesunięcie w rem, tak aby przy szerokości „od” wychodził rozmiar minimalny, a przy „do” maksymalny.
        
Przykłady

    
Tekst 16–24 px
Dla ekranów od 375 do 1280 px: clamp(1rem, 0.7928rem + 0.884vw, 1.5rem). Na telefonie 16 px, na szerokim monitorze 24 px.
Nagłówek 28–48 px
Te same szerokości dają nachylenie 2,21vw i przesunięcie około 1,232rem.

            
Najczęstsze pytania

    
Dlaczego rem, a nie px?
Część w rem reaguje na ustawienia powiększenia tekstu w przeglądarce, co poprawia dostępność.
Czy clamp działa we wszystkich przeglądarkach?
Tak, we wszystkich współczesnych przeglądarkach od około 2020 roku.

            
Poradniki

    
Programowanie i tworzenie stronPłynna typografia w CSS — jak używać clamp()Dlaczego rozmiar czcionki może rosnąć z ekranem, jak działa clamp(), jak policzyć wartości i o czym pamiętać przy dostępności.

        
Wynik ma charakter pomocniczy. Przy ważnych decyzjach (finansowych, technicznych, zdrowotnych) sprawdź go niezależnie. Zasady korzystania.