Pomoc

Fluid type scale: zmienne CSS z clamp()

Ta fluid type scale zamienia pięć liczb w blok własnych właściwości CSS, po jednej na każdy rozmiar czcionki, zapisanych jako clamp() z jednostkami rem i vw. Wpisujesz zakres szerokości ekranu, rozmiar bazowy na obu końcach i współczynnik skali, a każdy stopień, od --text-xs do --text-4xl, płynnie rośnie wraz z ekranem, bez media queries. Nic nie jest wysyłane: CSS powstaje w Twojej przeglądarce.

Jak zrobić fluid type scale krok po kroku

Wypełnij pięć pól u góry. Minimalny viewport (domyślnie 320) i Maksymalny viewport (1200) to szerokości ekranu w pikselach, przy których tekst jest najmniejszy i największy. Minimalny rozmiar bazowy (16) i Maksymalny rozmiar bazowy (20) to rozmiar tekstu podstawowego przy tych dwóch szerokościach. Współczynnik skali (1,25) określa, o ile każdy stopień jest większy od poprzedniego. Każde pole ma okienko z liczbą i suwak.

  1. Wpisz zakres szerokości ekranu.
  2. Wpisz rozmiar bazowy dla wąskich i szerokich ekranów.
  3. Wybierz współczynnik skali.
  4. Pole z CSS poniżej aktualizuje się w trakcie pisania, więc nie ma przycisku zatwierdzania. Gdy wynik Ci odpowiada, kliknij Kopiuj CSS i wklej blok :root do arkusza stylów.

Pole, którego nie da się użyć, pokazuje komunikat: maksymalny viewport musi być większy od minimalnego, maksymalny rozmiar bazowy większy od minimalnego, współczynnik równy co najmniej 1, a każda liczba większa od 0. Użyj stopnia wszędzie tam, gdzie ustawiasz rozmiar, na przykład h1 { font-size: var(--text-3xl); }

Podgląd przy dowolnej szerokości

W sekcji Podgląd przeciągnij suwak Szerokość podglądu między minimalnym a maksymalnym viewportem. Każdy stopień pojawia się jako przykładowy wiersz „Tekst, który płynnie się skaluje” w rozmiarze, jaki ma przy tej szerokości, razem z nazwą zmiennej i rozmiarem w pikselach. Największy stopień jest na górze.

Dzięki temu możesz ocenić różnicę między tekstem podstawowym a nagłówkami na małym telefonie i na szerokim monitorze, zanim cokolwiek skopiujesz.

Jak obliczany jest rozmiar czcionki w clamp()

Dla każdego stopnia narzędzie oblicza rozmiar na wąskim końcu (minimalny rozmiar bazowy razy współczynnik do potęgi numeru stopnia) i na szerokim końcu (maksymalny rozmiar bazowy razy ta sama potęga). Następnie prowadzi prostą przez te dwa punkty: nachylenie to zmiana rozmiaru podzielona przez zmianę szerokości viewportu, a wyraz wolny to rozmiar minimalny minus minimalny viewport razy nachylenie. Nachylenie staje się częścią w vw, wyraz wolny częścią w rem, a rozmiary na końcach — minimum i maksimum w clamp(). Wartości są zaokrąglane do 4 miejsc po przecinku.

Przy ustawieniach domyślnych stopnie mają przy 320, 760 i 1200 px takie rozmiary:

Dlaczego rem i vw zamiast px

Rozmiar zapisany tylko w vw ignoruje rozmiar czcionki wybrany przez odwiedzającego w przeglądarce i nie rośnie przy powiększaniu. Ponieważ każda liczba jest tu podzielona na część w rem i część w vw, tekst nadal podąża za bazowym rozmiarem czcionki użytkownika i da się go powiększać, więc pozostaje czytelny dla osób, które potrzebują większych liter. Narzędzie nigdy nie zwraca px.

Jeśli Twoja strona ustawia html { font-size: 62.5% } albo inny korzeń niż 16 px, otwórz Zaawansowane i zmień Bazowy rozmiar czcionki, żeby 1rem się zgadzało.

Jak wybrać viewporty, rozmiary bazowe i współczynnik skali

Domyślny zakres od 320 do 1200 obejmuje wszystko od małego telefonu po laptopa. Jako maksimum wybierz największą szerokość, przy której tekst ma jeszcze rosnąć, bo powyżej niej rozmiar zostaje na maksimum. Dla tekstu podstawowego częsty jest zestaw 16 px i 20 px. Współczynnik nadaje skali charakter:

Przy współczynniku 1 wszystkie stopnie mają ten sam rozmiar. Współczynnik to jedna liczba dla obu końców, więc skala przy 320 px i przy 1200 px ma te same proporcje; zmienia się tylko rozmiar bazowy.

W sekcji Zaawansowane pole Prefiks zmiennych (domyślnie --text) zmienia nazwy wszystkich właściwości. Nazwy stopni przełączają między sm, lg, xl (--text-sm, --text-base, --text-lg i tak dalej) a -1, 1, 2 (--text--1, --text-0, --text-1 i tak dalej). Mniejsze stopnie (od 0 do 4, domyślnie 2) i Większe stopnie (od 0 do 8, domyślnie 5) określają, ile rozmiarów leży poniżej i powyżej bazy.

Czego to narzędzie nie robi

Tworzy tylko skalę rozmiarów tekstu. Nie ma eksportu do Tailwinda ani innych formatów, nadpisań dla poszczególnych stopni, osobnego współczynnika dla wąskiego i szerokiego końca ani wyjścia w px.

Najczęstsze pytania

Czym jest fluid type scale?

Fluid type scale to zestaw rozmiarów czcionki, które płynnie rosną wraz z szerokością ekranu zamiast skakać na punktach przełamania. Każdy stopień, na przykład mały, bazowy, duży i bardzo duży, dostaje rozmiar minimalny dla wąskich ekranów i maksymalny dla szerokich, a rozmiar pomiędzy nimi leży na prostej. Generator zapisuje każdy stopień jako własną właściwość CSS, której możesz używać w całym serwisie.

Jak użyć clamp() w CSS do rozmiaru czcionki?

clamp(min, preferowana, max) przyjmuje trzy wartości. Przeglądarka używa wartości preferowanej, ale nigdy nie schodzi poniżej minimum ani nie przekracza maksimum. Przy tekście wartość preferowana to część w rem plus część w vw, na przykład clamp(1rem, 0.9091rem + 0.4545vw, 1.25rem). Wstaw to do własnej właściwości, a potem pisz font-size: var(--text-base) wszędzie, gdzie tego potrzebujesz.

Jak zrobić rozmiar czcionki dopasowany do ekranu w CSS?

Zadeklaruj rozmiary raz jako zmienne clamp(), a tekst będzie zmieniał rozmiar płynnie wraz z oknem, bez media queries. Ustaw „Minimalny viewport” i „Maksymalny viewport” na szerokości, przy których chcesz mieć najmniejszy i największy rozmiar, wpisz „Minimalny rozmiar bazowy” i „Maksymalny rozmiar bazowy” i skopiuj CSS. Poniżej minimalnego viewportu tekst zostaje najmniejszy, a powyżej maksymalnego — największy.

Dlaczego mój rozmiar czcionki z clamp() nie działa?

Zwykle brakuje jednostki przy jakiejś wartości, nie ma spacji wokół plusa w clamp(), minimum jest większe od maksimum albo wartość preferowana jest zapisana samym vw, co ignoruje ustawienie rozmiaru czcionki użytkownika. Wygenerowane linie unikają wszystkich czterech problemów: każda wartość ma jednostkę, plus jest otoczony spacjami, a minimum jest zawsze mniejsze od maksimum.

Czy działa tak jak Utopia fluid type scale calculator?

Opiera się na tym samym pomyśle: rozmiary są interpolowane liniowo między wąskim a szerokim viewportem, a każdy stopień jest wielokrotnością rozmiaru bazowego według współczynnika. Różnice: tu jest jeden współczynnik skali dla obu końców, nie ma nadpisań dla stopni, a wynikiem są wyłącznie zwykłe własne właściwości CSS, bez eksportu do Tailwinda czy innych formatów. Wybierz je, gdy szybko potrzebujesz bloku :root.

Tercja wielka czy kwarta czysta: który współczynnik skali wybrać?

Tercja wielka (1,25) to dobra wartość domyślna dla stron z dużą ilością tekstu, bo stopnie leżą na tyle blisko siebie, że nagłówki nie przytłaczają tekstu. Kwarta czysta (1,333) daje większy kontrast między stopniami i pasuje do stron promocyjnych oraz dużych nagłówków. Tercja mała (1,2) jest jeszcze łagodniejsza. Wpisz współczynnik w polu „Współczynnik skali” i sprawdź „Podgląd”, zanim skopiujesz.

Czy clamp() działa we wszystkich przeglądarkach?

clamp() działa we wszystkich aktualnych wersjach Chrome, Edge, Firefoxa i Safari i robi to od 2020 roku. Bardzo stare przeglądarki ignorują deklarację, której nie rozumieją, więc jeśli musisz którąś obsłużyć, wstaw przed linią z clamp() linię ze stałym font-size jako rozwiązanie awaryjne.

Czy to fluid typography generator, czy generator clamp CSS?

Jedno i drugie. Jako fluid type scale generator tworzy całą skalę rozmiarów, a jako generator clamp CSS podaje każdą wartość clamp() już policzoną. Jedni wpisują w wyszukiwarkę „fluid typography css”, „fluid typography css clamp” albo „fluid typography generator”, inni „clamp css online”, ale wszystko prowadzi do tego samego: wpisujesz pięć liczb i kopiujesz wynik.

Czy to, co wpisuję, jest wysyłane na serwer?

Nie. Przeglądarka zamienia liczby w CSS na tej stronie i nic nie jest wysyłane ani zapisywane. Nie ma konta ani rejestracji.

Polecane

Pomaga utrzymać narzędzia za darmo. ✨

Zdjęcia poglądowe. Jestem Partnerem Amazon i otrzymuję wynagrodzenie z tytułu określonych zakupów dokonywanych za moim pośrednictwem.

Powiązane narzędzia

Generator przycisków CSS

Zaprojektuj przycisk, skopiuj HTML, CSS lub Tailwind

Generator ikon favicon

Obraz → favicon.ico, PNG, Apple touch i manifest

Formatowanie kodu

Formatuj kod — JS, JSON, HTML, CSS, Python

Makieta zrzutów ekranu aplikacji

Twórz makiety zrzutów do App Store i Play. Bez wysyłania.

Autoprefixer CSS

Wklej CSS, uzyskaj prefiksy przeglądarek. Za darmo.