Elastyczny rozmiar czcionki w CSS


342

Stworzyłem witrynę za pomocą siatki Zurb Foundation 3 . Każda strona ma dużą h1:

body {
  font-size: 100%
}

/* Headers */

h1 {
  font-size: 6.2em;
  font-weight: 500;
}
<div class="row">
  <div class="twelve columns text-center">
    <h1> LARGE HEADER TAGLINE </h1>
  </div>
  <!-- End Tagline -->
</div>
<!-- End Row -->

Gdy zmieniam rozmiar przeglądarki na rozmiar mobilny, duża czcionka nie dostosowuje się i powoduje, że przeglądarka zawiera przewijanie w poziomie, aby zmieścić duży tekst.

Zauważyłem, że na przykładowej stronie Zurb Foundation 3 Typografia nagłówki dostosowują się do przeglądarki, ponieważ jest ona skompresowana i rozwinięta.

Czy brakuje mi czegoś naprawdę oczywistego? Jak to osiągnąć?


1
Spójrz tutaj: Elastyczny rozmiar czcionki tylko z css https://github.com/pavelkukov/Font-Size-Responsive-CSS Demo: http://fiddle.jshell.net/dgJaK/1/show/
pavel

2
Myślę, że pierwszy link jest nieaktualny

OMG, tyle skomplikowanych odpowiedzi. po prostu użyj css rem .
ToolmakerSteve,

css rem nie zmienia dynamicznie rozmiaru na podstawie okna rzutni. Jeśli musisz to zrobić, musisz albo Javascript, albo jedną z poniższych czystych odpowiedzi CSS3. To naprawdę tylko coś, czego potrzebujesz w przypadku dużego tekstu nagłówka.
Evan Donovan

@ToolmakerSteve To bardzo naiwna rzecz do powiedzenia, zwłaszcza jeśli chodzi o problemy z reagowaniem na wszystkich urządzeniach. rem nie jest naprawdę świetną opcją, po prostu wydajesz się ignorować odpowiedzi, ponieważ jest to „skomplikowane”?
Emobe

Odpowiedzi:


287

font-sizeNie odpowie tak podczas zmiany rozmiaru okna przeglądarki. Zamiast tego reagują na ustawienia powiększenia / rozmiaru przeglądarki, na przykład gdy naciśniesz Ctrli +razem na klawiaturze w przeglądarce.

Zapytania o media

Trzeba będzie spojrzeć na użycie zapytań o media, aby zmniejszyć rozmiar czcionki w określonych odstępach czasu, w których zaczyna on łamać projekt i tworzyć paski przewijania.

Na przykład spróbuj dodać to w swoim CSS na dole, zmieniając szerokość 320 pikseli dla każdego miejsca, w którym projekt zaczyna się psuć:

@media only screen and (max-width: 320px) {

   body { 
      font-size: 2em; 
   }

}

Długości procentowe rzutni

Można również użyć rzutni długości procentowe , takie jak vw, vh, vmini vmax. Oficjalny dokument W3C dla tego stwierdza:

Długości procentowe rzutni są względne do rozmiaru początkowego bloku zawierającego. Gdy wysokość lub szerokość początkowego bloku zawierającego zostanie zmieniona, są one odpowiednio skalowane.

Ponownie, z tego samego dokumentu W3C każdą jednostkę można zdefiniować jak poniżej:

jednostka vw - równa 1% szerokości początkowego bloku zawierającego.

Jednostka vh - równa 1% wysokości początkowego bloku zawierającego.

Jednostka vmin - równa mniejszej z vw lub vh.

Jednostka vmax - równa większej z vw lub vh.

I są używane dokładnie tak samo, jak każda inna wartość CSS:

.text {
  font-size: 3vw;
}

.other-text {
  font-size: 5vh;
}

Kompatybilność jest względnie dobra, co można zobaczyć tutaj . Jednak niektóre wersje Internet Explorera i Edge nie obsługują vmax. Ponadto iOS 6 i 7 mają problem z jednostką vh, która została naprawiona w iOS 8.


44
Co font-size: 1.5vw;?
Dev_NIX

24
Jeszcze lepiej,font-size: calc(12px + 1vw)
Cuzox

3
@Dev_NIX Co z tym?
Christiaan Westerbeek

1
Podobało mi się to, co proponuje @Cuzox - tego szukałem
Eleazar Resendez,

@Cuzox Powinieneś przesłać to jako odpowiedź, inne rozwiązania podnoszą poziom testowy do małego, aby móc używać tych metod do czegokolwiek przydatnego. Jeśli połączysz taką wysokość statyczną, to się przyda
ricks

617

Możesz użyć wartości rzutni zamiast ems, pxs lub pts:

1vw = 1% szerokości rzutni

1vh = 1% wysokości rzutni

1vmin = 1vw lub 1vh, w zależności od tego, która wartość jest mniejsza

1vmax = 1vw lub 1vh, w zależności od tego, która wartość jest większa

h1 {
  font-size: 5.9vw;
}
h2 {
  font-size: 3.0vh;
}
p {
  font-size: 2vmin;
}

From CSS-Tricks: Viewport Sized Typography


2
Obecnie koduję tylko do webkita - jestem zakochany w tym pomiarze dziękuję
iamwhitebox


19
Świetnie, mogę użyć vw do skalowania tekstu, aby nie wyglądał mizernie na pulpicie! Idealnie ... Och. Huh, teraz tekst jest za mały, by go przeczytać, gdy przegląda się go na telefonie. Okej, cóż, mogę po prostu użyć „max (x, y)”, aby upewnić się, że nie zmniejszy się poniżej minimalnego rozmiaru. Idealnie ... Och. Hmm Wygląda na to, że „max” nie jest poprawnie obsługiwane przez Chrome. Okej, myślę, że użyję ponownie „px”.
original_username

10
Nie wydaje mi się to praktyczne, ponieważ rozmiar staje się zbyt mały w telefonach komórkowych i zbyt duży w komputerach o wyższej rozdzielczości.
Mr_Green

7
@Mr_Green: Dlatego korzystasz z zapytań o media. W mniejszych rzutniach powiększ czcionkę, w większych rzutniach zmniejsz.
Alistair,

45

Rozważam sposoby rozwiązania tego problemu i wierzę, że znalazłem rozwiązanie:

Jeśli potrafisz napisać aplikację dla Internet Explorera 9 (i nowszych) i wszystkich innych nowoczesnych przeglądarek obsługujących CSS calc (), jednostki rem i jednostki vmin. Możesz użyć tego do uzyskania skalowalnego tekstu bez zapytań o media:

body {
  font-size: calc(0.75em + 1vmin);
}

Tutaj jest w akcji: http://codepen.io/csuwldcat/pen/qOqVNO


2
Powinienem zauważyć, że różnica polega na tym, że użycie calc do połączenia dwóch jednostek jest łatwym sposobem na wyciszenie wariancji w skali tekstu vw w skrajności.
csuwldcat

jednostki rzutni są idealne dla każdego projektu, który nie wymaga zgodności ze starymi przeglądarkami. Ta sztuczka obliczeniowa wykonuje dokładnie to, co mówisz, płynnie skalując tekst (w przeciwieństwie do ścisłych limitów określonych przez zapytania mediów), ale w mniejszym (lub wyższym!) Stosunku niż zmiana rozmiaru ekranu
Ward DS

Jak należy go używać? Mam na myśli, że jeśli chcę zmienić rozmiar mojej czcionki, czy powinienem zmienić tylko jednostkę em, tylko jednostkę vmin, czy jedno i drugie?
Snoob Dogg

Przyszedłem tutaj, aby napisać to niezwykle proste rozwiązanie, ale potem zobaczyłem twoją odpowiedź i dałem +1. Możemy zastosować to rozwiązanie do każdego elementu. Na przykład szerokość obrazu: calc (50px + 10vw)
y.selimdogan

35

Używaj mediaspecyfikatorów CSS (tego właśnie używają [zurb]) do responsywnego stylu:

@media only screen and (max-width: 767px) {

   h1 {
      font-size: 3em;
   }

   h2 {
      font-size: 2em;
   }

}


15

Można to osiągnąć na kilka sposobów.

Użyj zapytania o media , ale wymaga ono rozmiarów czcionek dla kilku punktów przerwania:

body
{
    font-size: 22px;
}

h1
{
    font-size: 44px;
}

@media (min-width: 768)
{
    body
    {
        font-size: 17px;
    }
    h1
    {
        font-size: 24px;
    }
}

Użyj wymiarów w % lub em . Wystarczy zmienić podstawowy rozmiar czcionki, a wszystko się zmieni. W przeciwieństwie do poprzedniego, możesz po prostu zmienić czcionkę ciała, a nie h1 za każdym razem, lub pozwolić, aby podstawowy rozmiar czcionki był domyślny dla urządzenia, a reszta to em:

  1. „Ems” (em) : „Em” jest skalowalną jednostką. Em jest równy bieżącemu rozmiarowi czcionki, na przykład jeśli rozmiar czcionki dokumentu wynosi 12 pkt, 1 em jest równy 12 pkt. Ems są z natury skalowalne, więc 2 em to 24 pt, 0,5 em to 6 pt itp.
  2. Procent (%) : Jednostka procentowa jest bardzo podobna do jednostki „em”, z wyjątkiem kilku podstawowych różnic. Przede wszystkim obecny rozmiar czcionki jest równy 100% (tj. 12 pkt = 100%). Podczas korzystania z jednostki procentowej tekst pozostaje w pełni skalowalny dla urządzeń mobilnych i dla ułatwień dostępu.

Zobacz kyleschaeffer.com / ....

CSS 3 obsługuje nowe wymiary, które odnoszą się do portu widoku. Ale to nie działa na Androidzie:

  1. 3,2 vw = 3,2% szerokości rzutni
  2. 3,2vh = 3,2% wysokości rzutni
  3. 3.2vmin = Mniejszy z 3.2vw lub 3.2vh
  4. 3.2vmax = Większa z 3.2vw lub 3.2vh

    body
    {
        font-size: 3.2vw;
    }

Zobacz CSS-Tricks ... a także spójrz na Can I Use ...


13

Istnieje inne podejście do elastycznych rozmiarów czcionek - korzystanie z jednostek rem.

html {
    /* Base font size */
    font-size: 16px;
}

h1 {
    font-size: 1.5rem;
}

h2 {
    font-size: 1.2rem;
}

Później w zapytaniach o media możesz dostosować wszystkie rozmiary czcionek, zmieniając podstawowy rozmiar czcionki:

@media screen and (max-width: 767px) {
    html {
      /* Reducing base font size will reduce all rem sizes */
      font-size: 13px;
    }

    /* You can reduce font sizes manually as well */
    h1 {
        font-size: 1.2rem;
    }
    h2 {
        font-size: 1.0rem;
    }
}

Aby to zadziałało w Internet Explorerze 7 i Internet Explorerze 8, musisz dodać awaryjne jednostki pikseli:

h1 {
    font-size: 18px;
    font-size: 1.125rem;
}

Jeśli rozwijasz się z Lessem , możesz stworzyć mixin, który wykona matematykę za Ciebie.

Obsługa urządzeń Rem - http://caniuse.com/#feat=rem


11

Rozwiązanie „vw” ma problem z przejściem na bardzo małe ekrany. Możesz ustawić rozmiar bazy i przejść stamtąd za pomocą calc ():

font-size: calc(16px + 0.4vw);

Użyłem font-size: calc(1.2rem + 1vw)nagłówka. W ten sposób miałem tę zaletę, że korzystałem z jednostki nie opartej na pikselach (choć może nie mieć to tutaj zastosowania). Miałem również awarię zwykłych ems dla starszych przeglądarek Wreszcie, ponieważ stało się to trochę małe na urządzeniach mobilnych, użyłem do nich zapytania medialnego. To może być zbyt skomplikowane, ale wydaje się, że robi to, co chciałem.
Evan Donovan

8

Jest to częściowo zaimplementowane w fundamencie 5.

W pliku _type.scss mają dwa zestawy zmiennych nagłówka:

// We use these to control header font sizes
// for medium screens and above

$h1-font-size: rem-calc(44) !default;
$h2-font-size: rem-calc(37) !default;
$h3-font-size: rem-calc(27) !default;
$h4-font-size: rem-calc(23) !default;
$h5-font-size: rem-calc(18) !default;
$h6-font-size: 1rem !default;


// We use these to control header size reduction on small screens
$h1-font-reduction: rem-calc(10) !default;
$h2-font-reduction: rem-calc(10) !default;
$h3-font-reduction: rem-calc(5) !default;
$h4-font-reduction: rem-calc(5) !default;
$h5-font-reduction: 0 !default;
$h6-font-reduction: 0 !default;

Dla średnich w górę generują rozmiary na podstawie pierwszego zestawu zmiennych:

@media #{$medium-up} {
    h1,h2,h3,h4,h5,h6 { line-height: $header-line-height; }
    h1 { font-size: $h1-font-size; }
    h2 { font-size: $h2-font-size; }
    h3 { font-size: $h3-font-size; }
    h4 { font-size: $h4-font-size; }
    h5 { font-size: $h5-font-size; }
    h6 { font-size: $h6-font-size; }
}

A dla domyślnych, tj. Małych ekranów, używają drugiego zestawu zmiennych do generowania CSS:

h1 { font-size: $h1-font-size - $h1-font-reduction; }
h2 { font-size: $h2-font-size - $h2-font-reduction; }
h3 { font-size: $h3-font-size - $h3-font-reduction; }
h4 { font-size: $h4-font-size - $h4-font-reduction; }
h5 { font-size: $h5-font-size - $h5-font-reduction; }
h6 { font-size: $h6-font-size - $h6-font-reduction; }

Możesz użyć tych zmiennych i zastąpić w swoim niestandardowym pliku scss, aby ustawić rozmiary czcionek dla odpowiednich rozmiarów ekranu.


6

Elastyczny rozmiar czcionki można również wykonać za pomocą tego kodu JavaScript o nazwie FlowType :

FlowType - responsywna typografia sieci w najlepszym wydaniu: rozmiar czcionki oparty na szerokości elementu.

Lub ten kod JavaScript o nazwie FitText :

FitText - uelastycznia rozmiary czcionek. Użyj tej wtyczki w swoim responsywnym projekcie do zmiany rozmiaru nagłówków na podstawie proporcji.


6

Jeśli używasz narzędzia do kompilacji, wypróbuj Plecak.

W przeciwnym razie możesz użyć zmiennych CSS (właściwości niestandardowe), aby łatwo kontrolować minimalne i maksymalne rozmiary czcionek tak ( demo ):

* {
  /* Calculation */
  --diff: calc(var(--max-size) - var(--min-size));
  --responsive: calc((var(--min-size) * 1px) + var(--diff) * ((100vw - 420px) / (1200 - 420))); /* Ranges from 421px to 1199px */
}

h1 {
  --max-size: 50;
  --min-size: 25;
  font-size: var(--responsive);
}

h2 {
  --max-size: 40;
  --min-size: 20;
  font-size: var(--responsive);
}

Czy masz odniesienie do tego plecaka, o którym mówisz?
Peter Mortensen

5

Widziałem świetny artykuł z CSS-Tricks . Działa dobrze:

body {
    font-size: calc([minimum size] + ([maximum size] - [minimum size]) * ((100vw -
    [minimum viewport width]) / ([maximum viewport width] - [minimum viewport width])));
}

Na przykład:

body {
    font-size: calc(14px + (26 - 14) * ((100vw - 300px) / (1600 - 300)));
}

Możemy zastosować to samo równanie do line-heightwłaściwości, aby zmienić ją również w przeglądarce.

body {
    font-size: calc(14px + (26 - 14) * ((100vw - 300px) / (1600 - 300)));
    line-height: calc(1.3em + (1.5 - 1.2) * ((100vw - 300px)/(1600 - 300)));
}

Czy istnieje sposób, aby rozmiar czcionki nie był większy niż zdefiniowany [maksymalny rozmiar]?
Igor Janković

4

Właśnie wymyśliłem pomysł, w którym musisz zdefiniować rozmiar czcionki tylko raz na element, ale wciąż mają na nią wpływ zapytania medialne.

Najpierw ustawiam zmienną „--text-scale-unit” na „1vh” lub „1vw”, w zależności od rzutni za pomocą zapytań o media.

Następnie używam zmiennej za pomocą funkcji calc () i mojego numeru multiplikatora dla rozmiaru czcionki:

/* Define a variable based on the orientation. */
/* The value can be customized to fit your needs. */
@media (orientation: landscape) {
  :root{
    --text-scale-unit: 1vh;
  }
}
@media (orientation: portrait) {
  :root {
    --text-scale-unit: 1vw;
  }
}


/* Use a variable with calc and multiplication. */
.large {
  font-size: calc(var(--text-scale-unit) * 20);
}
.middle {
  font-size: calc(var(--text-scale-unit) * 10);
}
.small {
  font-size: calc(var(--text-scale-unit) * 5);
}
.extra-small {
  font-size: calc(var(--text-scale-unit) * 2);
}
<span class="middle">
  Responsive
</span>
<span class="large">
  text
</span>
<span class="small">
  with one
</span>
<span class="extra-small">
  font-size tag.
</span>

W moim przykładzie użyłem tylko orientacji rzutni, ale zasada ta powinna być możliwa przy każdym zapytaniu o media.


2
Dlaczego nie można po prostu użyć vmini vmaxzamiast tego @mediabiznesu?
Gark Garcia

3

„FitText” jQuery jest prawdopodobnie najlepiej reagującym rozwiązaniem nagłówkowym. Sprawdź to na GitHub: https://github.com/davatron5000/FitText.js


2
Nie wydaje się to bezpośrednią odpowiedzią na pytanie, dlaczego czcionka się nie dostosowuje. W każdym razie odpowiedzi typu „tylko łącze” nie są zalecane w SO. Proszę rozważyć dodanie więcej szczegółów / przykładowego kodu.
Harry

2

Podobnie jak w przypadku wielu frameworków, kiedy „zejdziesz z siatki” i zastąpisz domyślny CSS frameworku, rzeczy zaczną się łamać w lewo iw prawo. Ramy są z natury sztywne. Jeśli miałbyś używać domyślnego stylu Zurb H1 wraz z domyślnymi klasami siatki, strona internetowa powinna wyświetlać się poprawnie na urządzeniach mobilnych (tj. Responsywnych).

Wydaje się jednak, że potrzebujesz bardzo dużych nagłówków 6.2em, co oznacza, że ​​tekst będzie musiał się skurczyć, aby zmieścił się na wyświetlaczu mobilnym w trybie portretowym. Najlepszym rozwiązaniem jest użycie responsywnej wtyczki tekstowej jQuery, takiej jak FlowType i FitText . Jeśli chcesz czegoś lekkiego, możesz sprawdzić moją wtyczkę jQuery Scalable Text:

http://thdoan.github.io/scalable-text/

Przykładowe użycie:

<script>
$(document).ready(function() {
  $('.row .twelve h1').scaleText();
}
</script>

Myślę, że skalowanie tekstów / zmiana rozmiaru tekstu w celu szybkiego użycia powinny być pozostawione przeglądarce, szczególnie w przypadku zapytań o media, do czego są przeznaczone.
user254197,

2

W prawdziwym oryginalnym Sass (nie scss) możesz użyć poniższych miksów, aby automatycznie ustawić akapit i wszystkie nagłówki font-size.

Podoba mi się, ponieważ jest znacznie bardziej kompaktowy. I szybsze pisanie. Poza tym zapewnia tę samą funkcjonalność. W każdym razie, jeśli nadal chcesz trzymać się nowej składni - scss, możesz przekonwertować moją zawartość Sass na scss tutaj: [KONWERSJA SASS NA SCSS TUTAJ]

Poniżej podaję cztery miksy Sass. Będziesz musiał dostosować ich ustawienia do swoich potrzeb.

=font-h1p-style-generator-manual() // You don’t need to use this one. Those are only styles to make it pretty.
=media-query-base-font-size-change-generator-manual() // This mixin sets the base body size that will be used by the h1-h6 tags to recalculate their size in a media query.
=h1p-font-size-generator-auto($h1-fs: 3em, $h1-step-down: 0.3, $body-min-font-size: 1.2em, $p-same-as-hx: 6) // Here you will set the size of h1 and size jumps between h tags
=config-and-run-font-generator() // This one only calls the other ones

Po zakończeniu gry z ustawieniami po prostu wywołaj jeden mixin - czyli: + config-and-run-font-generator () . Aby uzyskać więcej informacji, zobacz poniższy kod i komentarze.

Wydaje mi się, że można to zrobić automatycznie w przypadku zapytania o media, tak jak w przypadku tagów nagłówka, ale wszyscy używamy różnych zapytań o media, więc nie byłoby to odpowiednie dla wszystkich. Korzystam z koncepcji projektowania mobilnego, więc właśnie tak bym to zrobił. Skopiuj i użyj tego kodu.

KOPIUJ I WKLEJ MIESZANKI DO SWOJEGO PLIKU:

=font-h1p-style-generator-manual()
  body
    font-family: "Source Sans Pro", "Helvetica Neue", Helvetica, Arial, sans-serif // google fonts
    font-size: 100%
    line-height: 1.3em
  %headers
    line-height: 1em
    font-weight: 700
  p
    line-height: 1.3em
    font-weight: 300
  @for $i from 1 through 6
    h#{$i}
      @extend %headers


=media-query-base-font-size-change-generator-manual()
  body
    font-size: 1.2em
  @media screen and (min-width: 680px)
    body
      font-size: 1.4em
  @media screen and (min-width: 1224px)
    body
      font-size: 1.6em
  @media screen and (min-width: 1400px)
    body
      font-size: 1.8em

=h1p-font-size-generator-auto($h1-fs: 3em, $h1-step-down: 0.3, $body-min-font-size: 1.2em, $p-same-as-hx: 6)
  $h1-fs: $h1-fs // Set first header element to this size
  $h1-step-down: $h1-step-down // Decrement each time by 0.3
  $p-same-as-hx: $p-same-as-hx // Set p font-sieze same as h(6)
  $h1-fs: $h1-fs + $h1-step-down // Looping correction
  @for $i from 1 through 6
    h#{$i}
      font-size: $h1-fs - ($h1-step-down * $i)
    @if $i == $p-same-as-hx
      p
        font-size: $h1-fs - ($h1-step-down * $i)

// RUN ONLY THIS MIXIN. IT WILL TRIGGER THE REST
=config-and-run-font-generator()
  +font-h1p-style-generator-manual() // Just a place holder for our font style
  +media-query-base-font-size-change-generator-manual() // Just a placeholder for our media query font size
  +h1p-font-size-generator-auto($h1-fs: 2em, $h1-step-down: 0.2, $p-same-as-hx: 5) // Set all parameters here

KONFIGURUJ WSZYSTKIE MIESZANKI NA SWOJE POTRZEBY - GRAJ Z NIM! :) A NASTĘPNIE ZADZWOŃ NA SWOIM RZECZYWISTYM KODIE SASS Z:

+config-and-run-font-generator()

To wygeneruje ten wynik. Możesz dostosować parametry, aby generować różne zestawy wyników. Ponieważ jednak wszyscy używamy różnych zapytań o media, niektóre miksy będziesz musiał edytować ręcznie (styl i media).

Wygenerowany CSS:

body {
  font-family: "Source Sans Pro", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 100%;
  line-height: 1.3em;
  word-wrap: break-word; }

h1, h2, h3, h4, h5, h6 {
  line-height: 1em;
  font-weight: 700; }

p {
  line-height: 1.3em;
  font-weight: 300; }

body {
  font-size: 1.2em; }

@media screen and (min-width: 680px) {
  body {
    font-size: 1.4em; } }
@media screen and (min-width: 1224px) {
  body {
    font-size: 1.6em; } }
@media screen and (min-width: 1400px) {
  body {
    font-size: 1.8em; } }
h1 {
  font-size: 2em; }

h2 {
  font-size: 1.8em; }

h3 {
  font-size: 1.6em; }

h4 {
  font-size: 1.4em; }

h5 {
  font-size: 1.2em; }

p {
  font-size: 1.2em; }

h6 {
  font-size: 1em;

}

2

Używam tych klas CSS, dzięki czemu mój tekst jest płynny na dowolnym ekranie:

.h1-fluid {
    font-size: calc(1rem + 3vw);
    line-height: calc(1.4rem + 4.8vw);
}

.h2-fluid {
    font-size: calc(1rem + 2vw);
    line-height: calc(1.4rem + 2.4vw);
}

.h3-fluid {
    font-size: calc(1rem + 1vw);
    line-height: calc(1.4rem + 1.2vw);
}

.p-fluid {
    font-size: calc(1rem + 0.5vw);
    line-height: calc(1.4rem + 0.6vw);
}

1
 h1 { font-size: 2.25em; } 
 h2 { font-size: 1.875em; }
 h3 { font-size: 1.5em; }
 h4 { font-size: 1.125em; }
 h5 { font-size: 0.875em; }
 h6 { font-size: 0.75em; }

6
Ten fragment kodu może rozwiązać pytanie, ale wyjaśnienie naprawdę pomaga poprawić jakość posta. Pamiętaj, że w przyszłości odpowiadasz na pytanie dla czytelników, a ci ludzie mogą nie znać przyczyn Twojej sugestii kodu.
Tony Babarino

Wytłumaczenie byłoby w porządku.
Peter Mortensen

1

Istnieją następujące sposoby osiągnięcia tego celu:

  1. Użyj rem dla np. 2.3 rem
  2. Użyj ich np. Do 2.3em
  3. Użyj% np. 2,3% Ponadto możesz użyć: vh, vw, vmax i vmin.

Jednostki te dokonają automatycznej zmiany rozmiaru w zależności od szerokości i wysokości ekranu.


1

Możesz dostosować rozmiar czcionki, jeśli definiujesz go w vw (szerokość rzutni). Jednak nie wszystkie przeglądarki obsługują to. Rozwiązaniem jest użycie JavaScript do zmiany podstawowego rozmiaru czcionki w zależności od szerokości przeglądarki i ustawienia wszystkich rozmiarów czcionek w%.

Oto artykuł opisujący sposób tworzenia elastycznych czcionek: http://wpsalt.com/responsive-font-size-in-wordpress-theme/


Link wydaje się być zepsuty: „403 Forbidden. Nginx / 1.10.3”
Peter Mortensen

1

Znalazłem to rozwiązanie i działa dla mnie bardzo dobrze:

/* Fluid font size:
minimum font size at min. device width 300px = 14
maximum font size at max. device width 1600px = 26
*/

body {
    font-size: calc(14px + (26 - 14) * ((100vw - 300px) / (1600 - 300)));
}

1

Jednym ze sposobów rozwiązania problemu z tekstem, który wygląda dobrze zarówno na komputerze stacjonarnym, jak i telefonie komórkowym / tablecie, jest ustawienie rozmiaru tekstu na jednostki fizyczne, takie jak fizyczne centymetry lub cale, które nie zależą od PPI ekranu (punktów na cal).

W oparciu o tę odpowiedź poniżej znajduje się kod, którego używam na końcu dokumentu HTML dla elastycznego rozmiaru czcionki:

<div id='testdiv' style='height: 1in; left: -100%; position: absolute; top: -100%; width: 1in;'></div>
<script type='text/javascript'>
  var devicePixelRatio = window.devicePixelRatio || 1;
  dpi_x = document.getElementById('testdiv').offsetWidth * devicePixelRatio;
  dpi_y = document.getElementById('testdiv').offsetHeight * devicePixelRatio;

  function setFontSizeForClass(className, fontSize) {
      var elms = document.getElementsByClassName(className);
      for(var i=0; i<elms.length; i++) {
          elms[i].style.fontSize = String(fontSize * dpi_y / 96) + "px";
      }
  }

  setFontSizeForClass('h1-font-size', 30);
  setFontSizeForClass('action-font-size', 20);
  setFontSizeForClass('guideline-font-size', 25);
  // etc for your different classes
</script>

W powyższym kodzie elementy innej klasy mają przypisane rozmiary czcionek w jednostkach fizycznych, o ile przeglądarka / system operacyjny jest poprawnie skonfigurowany do PPI jego ekranu.

Czcionka jednostki fizycznej jest zawsze niezbyt duża i niezbyt mała, o ile odległość od ekranu jest zwykle (odległość czytania książki).


1

Rozmiar tekstu można ustawić za pomocą vwjednostki, co oznacza „szerokość rzutni”. W ten sposób rozmiar tekstu będzie zgodny z rozmiarem okna przeglądarki:

https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_responsive_text

Do mojego osobistego projektu użyłem vw i @meida. Działa idealnie.

.mText {
    font-size: 6vw;
}

@media only screen and (max-width: 1024px) {
    .mText {
        font-size: 10vw;
    }
}


.sText {
    font-size: 4vw;
}

@media only screen and (max-width: 1024px) {
    .sText {
        font-size: 7vw;
    }
}

1

Użyj tego równania:

calc(42px + (60 - 42) * (100vw - 768px) / (1440 - 768));

Dla czegokolwiek większego lub mniejszego niż 1440 i 768 możesz albo nadać mu wartość statyczną, albo zastosować to samo podejście.

Wadą rozwiązania vw jest to, że nie można ustawić współczynnika skali, powiedzmy, że 5vw przy rozdzielczości ekranu 1440 może mieć rozmiar czcionki 60px, rozmiar czcionki pomysłu, ale kiedy zmniejszysz szerokość okna do 768, może to skończyć się 12 pikseli, a nie minimum, którego chcesz.

Dzięki takiemu podejściu możesz ustawić górną i dolną granicę, a czcionka będzie się skalować między nimi.


1

Możemy użyć calc () z css

p{
font-size: calc(48px + (56 - 48) * ((100vw - 300px) / (1600 - 300))) !important;
}

Wzór matematyczny to calc (minsize + (maxsize - minsize) * (100vm - minviewportwidth) / (maxwidthviewoport - minviewportwidth)))

Codepen


0

Obawiam się, że nie ma łatwego rozwiązania w zakresie zmiany rozmiaru czcionek. Możesz zmienić rozmiar czcionki za pomocą zapytania o media, ale technicznie nie zmieni się płynnie. Na przykład, jeśli używasz:

@media only screen and (max-width: 320px){font-size: 3em;}

Twój font-sizebędzie 3em zarówno na 300 pikseli i 200 pikseli szerokości. Ale potrzebujesz mniejszej font-sizeszerokości 200 pikseli, aby idealnie reagować.

Więc jakie jest prawdziwe rozwiązanie? Jest tylko jeden sposób. Musisz utworzyć obraz PNG (z przezroczystym tłem) zawierający tekst. Następnie możesz łatwo dostosować swój obraz (na przykład: szerokość: 35%; wysokość: 28 pikseli). W ten sposób Twój tekst będzie w pełni reagował na wszystkie urządzenia.


0

Po wielu wnioskach skończyłem z tą kombinacją:

@media only screen and (max-width: 730px) {

    h2 {
        font-size: 4.3vw;
    }
}


-1

Oto coś, co zadziałało dla mnie. Testowałem to tylko na iPhonie.

Niezależnie od tego h1, czy masz tagi h2, czy pumieść to wokół tekstu:

<h1><font size="5">The Text you want to make responsive</font></h1>

To renderuje 22-punktowy tekst na pulpicie i jest nadal czytelny na iPhonie.

<font size="5"></font>

14
To jest 2015. Tag czcionki jest przestarzały od HTML5.
Dan H

Myślałem, że znacznik czcionki jest przestarzały developer.mozilla.org/en-US/docs/Web/HTML/Element/font Nie sądzę, aby był już przestarzały, ale w pewnym momencie.
Jake

1
@Jake: Został przestarzały w HTML4, a w HTML5 jest przestarzały. Usunięcie następuje po wycofaniu, a nie na odwrót.
Santon
Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.