Responsieve lettergrootte in CSS

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 -->

Antwoord 1, autoriteit 100%

De font-size reageert niet op deze manier bij het wijzigen van de grootte van het browservenster. In plaats daarvan reageren ze op de instellingen voor zoom/typegrootte van de browser, bijvoorbeeld als u in de browser tegelijkertijd op Ctrl en + drukt op het toetsenbord.

Mediaquery’s

Je zou moeten kijken naar het gebruik van mediaquery’s om de lettergrootte te verkleinen met bepaalde tussenpozen begint het je ontwerp te breken en schuifbalken te maken.

Probeer dit bijvoorbeeld onderaan uw CSS toe te voegen, waarbij u de breedte van 320 pixels wijzigt voor waar uw ontwerp begint te breken:

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

Viewport percentage lengtes

U kunt ook viewport-percentagelengtes gebruiken, zoals vw, vh, vmin en vmax. Het officiële W3C-document hiervoor vermeldt:

De lengtes van het kijkvenster zijn relatief ten opzichte van de grootte van het oorspronkelijke blok. Wanneer de hoogte of breedte van het oorspronkelijke bevattende blok wordt gewijzigd, worden ze overeenkomstig geschaald.

Nogmaals, vanuit hetzelfde W3C-document kan elke afzonderlijke eenheid als volgt worden gedefinieerd:

vw unit – Gelijk aan 1% van de breedte van het oorspronkelijke bevattende blok.

vh-eenheid – Gelijk aan 1% van de hoogte van het oorspronkelijke bevattende blok.

vmin-eenheid – Gelijk aan de kleinste van vw of vh.

vmax-eenheid – Gelijk aan de grootste van vw of vh.

En ze worden op precies dezelfde manier gebruikt als elke andere CSS-waarde:

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

De compatibiliteit is relatief goed, zoals hier te zien is. Sommige versies van Internet Explorer en Edge ondersteunen vmax echter niet. Ook hebben iOS 6 en 7 een probleem met de vh-eenheid, dat is opgelost in iOS 8.

Antwoord 2, autoriteit 95%

U kunt de viewport-waarde gebruiken in plaats van ems, pxs of pts:

1vw = 1% van de breedte van het kijkvenster

1vh = 1% van kijkvensterhoogte

1vmin = 1vw of 1vh, welke kleiner is

1vmax = 1vw of 1vh, welke groter is

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

Van CSS-Tricks: Viewport-formaat typografie

Antwoord 3, autoriteit 18%

Ik heb met manieren gespeeld om dit probleem op te lossen en ik denk dat ik een oplossing heb gevonden:

Als u uw toepassing kunt schrijven voor Internet Explorer 9 (en later) en alle andere moderne browsers die CSS calc(), rem-eenheden en vmin-eenheden ondersteunen. U kunt dit gebruiken om schaalbare tekst te maken zonder mediaquery’s:

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

Hier is het in actie: http://codepen.io/csuwldcat/pen/qOqVNO

Antwoord 4, autoriteit 11%

Gebruik CSS media-specificaties (dat is wat ze [zurb] gebruiken) voor responsieve styling:

@media only screen and (max-width: 767px) {
   h1 {
      font-size: 3em;
   }
   h2 {
      font-size: 2em;
   }
}

Antwoord 5, autoriteit 9%

Als je het niet erg vindt om een ​​jQuery-oplossing te gebruiken, kun je de TextFill-plug-in proberen

jQuery TextFill past de tekstgrootte aan zodat deze in een container past en maakt de lettergrootte zo groot mogelijk.

https://github.com/jquery-textfill/jquery-textfill

Antwoord 6, autoriteit 7%

Ik kan zeggen dat mijn methode de beste aanpak heeft om uw probleem op te lossen

h1{
  font-size : clamp(2rem, 10vw, 5rem);
}

hier heeft clamp 3 argumenten.

• eerste is de minimaal toegestane lettergrootte.

• derde is de maximaal toegestane lettergrootte.

• tweede argument is de lettergrootte die u altijd wilt hebben. De eenheid moet relatief zijn (vw, vh, ch) en niet absoluut (d.w.z. niet px, mm, pt). relatieve eenheid zorgt ervoor dat het van grootte verandert ten opzichte van de veranderende schermformaten.

Beschouw een voorbeeld:
bedenk dat er een groot, geweldig pictogram is waarvan u het formaat dynamisch wilt wijzigen (responsief pictogram)

fa-random-icon{
   font-size: clamp( 15rem, 80vw, 80vh)   
}

• Hier is 80vw de gewenste lettergrootte.
• 15 rem is de minimale lettergrootte.
• 80vh is de maximale lettergrootte.

d.w.z.

• indien in een bepaalde mobiele schermgrootte indien 80vw < 15rem dan is de lettergrootte 15rem.

• als het scherm te breed is, dan als 80vw > 80vh, dan is de lettergrootte 80vh.

De hierboven door mensen gesuggereerde methoden hebben altijd een wat onzeker resultaat… zoals wanneer we alleen vw gebruiken, kan de lettergrootte soms te groot of te klein zijn (onbegrensd).

media-query’s kunnen worden gebruikt, maar u moet de lettergrootte beperken met minimaal 3 media-query’s

Antwoord 7, autoriteit 5%

Er zijn verschillende manieren om dit te bereiken.

Gebruik een mediaquery, maar deze vereist lettergroottes voor verschillende onderbrekingspunten:

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

Gebruik dimensies in % of em. Verander gewoon de basislettergrootte en alles zal veranderen. In tegenstelling tot de vorige, kun je gewoon het hoofdlettertype wijzigen en niet elke keer h1 of de basislettergrootte de standaardgrootte van het apparaat laten zijn en de rest allemaal in em:

1. Ems (em): De em is een schaalbare eenheid. Een em is gelijk aan de huidige lettergrootte, bijvoorbeeld als de lettergrootte van het document 12 pt is, is 1 em gelijk aan 12 pt. Em’s zijn schaalbaar van aard, dus 2 em zou gelijk zijn aan 24 pt, .5 em zou gelijk zijn aan 6 pt, enz..
2. Percentage (%): de procenteenheid lijkt veel op de eenheid em , afgezien van enkele fundamentele verschillen. Eerst en vooral is de huidige lettergrootte gelijk aan 100% (d.w.z. 12 pt = 100%). Bij gebruik van de procenteenheid blijft uw tekst volledig schaalbaar voor mobiele apparaten en voor toegankelijkheid.

Zie kyleschaeffer.com/. …

CSS 3 ondersteunt nieuwe dimensies die relatief zijn aan de viewport. Maar dit werkt niet op Android:

1. 3,2vw = 3,2% van de breedte van het kijkvenster
2. 3,2 vh = 3,2% van de hoogte van het kijkvenster
3. 3.2vmin = Kleiner van 3.2vw of 3.2vh

4. 3.2vmax = Groter van 3.2vw of 3.2vh

   body
   {
       font-size: 3.2vw;
   }
   

Zie CSS-trucs … en kijk ook naar Kan ik gebruiken…

Antwoord 8, autoriteit 4%

Er is een andere benadering van responsieve lettergroottes: rem-eenheden gebruiken.

html {
    /* Base font size */
    font-size: 16px;
}
h1 {
    font-size: 1.5rem;
}
h2 {
    font-size: 1.2rem;
}

Later in mediaquery’s kunt u alle lettergroottes aanpassen door de basislettergrootte te wijzigen:

@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;
    }
}

Om dit te laten werken in Internet Explorer 7 en Internet Explorer 8 moet u een fallback toevoegen met px-eenheden:

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

Als je ontwikkelt met Less, kun je een mixin dat zal de wiskunde voor je doen.

Ondersteuning voor Rem-eenheden – http://caniuse.com/#feat=rem

Antwoord 9, autoriteit 3%

De “vw”-oplossing heeft een probleem bij het gebruik van zeer kleine schermen. U kunt de basisgrootte instellen en vanaf daar omhoog gaan met calc():

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

Antwoord 10, autoriteit 3%

Dit is deels geïmplementeerd in foundation 5.

In bestand _type.scss hebben ze twee sets kopvariabelen:

// 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;

Voor medium up genereren ze formaten op basis van de eerste set variabelen:

@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; }
}

En voor standaard kleine schermen gebruiken ze een tweede set variabelen om CSS te genereren:

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; }

Je kunt deze variabelen gebruiken en overschrijven in je aangepaste scss-bestand om lettergroottes in te stellen voor de respectievelijke schermgroottes.

Antwoord 11, autoriteit 2%

Ik zag een geweldig artikel van CSS-Tricks. Het werkt prima:

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

Bijvoorbeeld:

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

We kunnen dezelfde vergelijking toepassen op de eigenschap line-height om deze ook met de browser te wijzigen.

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

Antwoord 12, autoriteit 2%

Een responsieve lettergrootte kan ook worden gedaan met deze JavaScript-code genaamd FlowType:

• http://simplefocus.com/flowtype/
• https://github.com/simplefocus/FlowType.JS

FlowType – Responsieve webtypografie op zijn best: lettergrootte op basis van elementbreedte.

Of deze JavaScript-code genaamd FitText:

• http://fittextjs.com/
• https://github.com/davatron5000/FitText.js

FitText – Maakt de lettergrootte flexibel. Gebruik deze plug-in op uw responsieve ontwerp voor het aanpassen van de grootte van uw koppen op basis van verhoudingen.

Antwoord 13, autoriteit 2%

Als je een build-tool gebruikt, probeer dan Rucksack.

Anders kun je CSS-variabelen (aangepaste eigenschappen) gebruiken om eenvoudig de minimale en maximale lettergrootte te bepalen, zoals (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);
}

Antwoord 14

Ik had net een idee bedacht waarbij je de lettergrootte maar één keer per element hoeft te definiëren, maar het wordt nog steeds beïnvloed door mediaquery’s.

Eerst heb ik de variabele “–text-scale-unit” ingesteld op “1vh” of “1vw”, afhankelijk van de viewport die de mediaquery’s gebruikt.

Vervolgens gebruik ik de variabele met calc() en mijn vermenigvuldigingsgetal voor lettergrootte:

/* 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>

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

=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

=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

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

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;
}

.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);
}

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

html {
  font-size: min(max(16px, 4vw), 22px);
}

 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; }

/* 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)));
}

<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>

.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;
    }
}

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

@media only screen and (max-width: 730px) {
    h2 {
        font-size: 4.3vw;
    }
}

@media only screen and (max-width: 1000px) {
     h1 {
         font-size:5em;
    }
}
 @media only screen and (max-width: 500px) {
     h1 {
         font-size: 3em;
    }
}
 @media only screen and (max-width: 300px) {
     h1 {
         font-size: 2em;
    }
}
 @media only screen and (max-width: 100px) {
     h1 {
         font-size: 1em;
    }
}
 

<h1>Resize the browser!</h1>

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