Responsieve lettergrootte in CSS

Ik heb een site gemaakt met behulp van het Zurb Foundation 3-raster. Elke pagina heeft een grote 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 -->

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:

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

Of deze JavaScript-code genaamd FitText:

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>

Antwoord 15

jQuery’s “FitText” is waarschijnlijk de beste responsieve header-oplossing. Bekijk het op GitHub:
https://github.com/davatron5000/FitText.js


Antwoord 16

Zoals bij veel frameworks, als je eenmaal “off the grid” gaat en de standaard CSS van het framework overschrijft, beginnen dingen links en rechts te breken. Kaders zijn inherent rigide. Als u de standaard H1-stijl van Zurb zou gebruiken samen met hun standaard rasterklassen, dan zou de webpagina correct moeten worden weergegeven op mobiel (d.w.z. responsief).

Het lijkt er echter op dat u zeer grote 6.2em-koppen wilt, wat betekent dat de tekst moet verkleinen om in portretmodus op een mobiel scherm te passen. U kunt het beste een responsieve jQuery-plug-in voor tekst gebruiken, zoals FlowType en FitText. Als je iets lichtgewichts wilt, dan kun je mijn Scalable Text jQuery-plug-in bekijken:

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

Voorbeeldgebruik:

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

Antwoord 17

In de echte originele Sass (niet scss) zou je het onderstaande kunnen gebruiken mixins om automatisch de font-size van de alinea’s en alle koppen in te stellen.

Ik vind het leuk omdat het veel compacter is. En sneller typen. Verder biedt het dezelfde functionaliteit. Hoe dan ook, als je je nog steeds aan de nieuwe syntaxis wilt houden – scss, voel je dan vrij om mijn Sass-inhoud hier naar scss te converteren:
[CONVERT SASS HIER NAAR SCSS]

Hieronder geef ik je vier Sass-mixins. U zult hun instellingen aan uw behoeften moeten aanpassen.

=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

Nadat je klaar bent met het spelen met instellingen, bel je gewoon één mixin – en dat is: +config-and-run-font-generator(). Zie onderstaande code en opmerkingen voor meer informatie.

Ik denk dat je het automatisch zou kunnen doen voor een mediaquery zoals het wordt gedaan voor header-tags, maar we gebruiken allemaal verschillende mediaquery’s, dus het zou niet voor iedereen geschikt zijn. Ik gebruik een mobiel-eerst ontwerpbenadering, dus dit is hoe ik dat zou doen. Voel je vrij om deze code te kopiëren en te gebruiken.

KOPIEER EN PLAK DEZE MIXINS IN UW BESTAND:

=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

CONFIGUREER ALLE MIXINS VOLGENS UW BEHOEFTEN – SPEEL ER MEE! 🙂 EN NOEM HET DAN BOVENAAN JE WERKELIJKE SASS-CODE MET:

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

Dit zou deze uitvoer genereren. U kunt parameters aanpassen om verschillende sets resultaten te genereren. Omdat we echter allemaal verschillende mediaquery’s gebruiken, moet je sommige mixins handmatig bewerken (stijl en media).

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

Antwoord 18

Ik gebruik deze CSS-klassen en ze maken mijn tekst vloeiend op elk schermformaat:

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

Antwoord 19

We kunnen calc() uit css gebruiken

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

De wiskundige formule is
calc(minimale grootte + (maximale grootte – minimale grootte) * (100vm – minviewportwidth) / (maxwidthviewoport – minviewportwidth)))

Codepen


Antwoord 20

Probeer dit op uw stylesheet op te nemen:

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

Meer informatie op https://css-tricks.com/simplified-fluid-typography /


Antwoord 21

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

Antwoord 22

Er zijn de volgende manieren waarop u dit kunt bereiken:

  1. Gebruik rem voor b.v. 2.3 rem
  2. Gebruik em voor b.v. 2.3em
  3. Gebruik % voor bijv. 2,3%
    Bovendien kunt u gebruik maken van:
    vh, vw, vmax en vmin.

Deze eenheden worden automatisch groter, afhankelijk van de breedte en hoogte van het scherm.


Antwoord 23

U kunt de lettergrootte responsief maken als u deze definieert in vw (viewport-breedte). Niet alle browsers ondersteunen het echter. De oplossing is om JavaScript te gebruiken om de basislettergrootte te wijzigen, afhankelijk van de browserbreedte en alle lettergroottes in te stellen in %.

Hier is een artikel waarin wordt beschreven hoe u responsieve lettertypen kunt maken: http:/ /wpsalt.com/responsive-font-size-in-wordpress-theme/


Antwoord 24

Ik heb deze oplossing gevonden en het werkt heel goed voor mij:

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

Antwoord 25

Een manier om het probleem op te lossen dat de tekst er goed uitziet op zowel desktop als mobiel/tablet, is door de tekstgrootte vast te stellen in fysieke eenheden zoals fysieke centimeters of inches, die niet afhankelijk zijn van de scherm-PPI (punten per inch ).

Op basis van dit antwoord staat hieronder de code Ik gebruik aan het einde van het HTML-document voor een responsieve lettergrootte:

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

In de bovenstaande code worden aan de items van een andere klasse lettergroottes toegewezen in fysieke eenheden, zolang de browser/het besturingssysteem maar correct is geconfigureerd voor de PPI van het scherm.

Een fysiek lettertype is altijd niet te groot en niet te klein, zolang de afstand tot het scherm maar gebruikelijk is (boekleesafstand).


Antwoord 26

De tekstgrootte kan worden ingesteld met een vw-eenheid, wat de “viewport-breedte” betekent. Op die manier volgt de tekstgrootte de grootte van het browservenster:

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

Voor mijn persoonlijke project heb ik vw en @meida gebruikt. Het werkt perfect.

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

Antwoord 27

Gebruik deze vergelijking:

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

Voor alles dat groter of kleiner is dan 1440 en 768, kunt u het een statische waarde geven of dezelfde benadering toepassen.

Het nadeel van de vw-oplossing is dat je geen schaalverhouding kunt instellen, zeg een 5vw bij schermresolutie 1440 kan uiteindelijk 60px lettergrootte worden, jouw idee lettergrootte, maar wanneer je de vensterbreedte verkleint tot 768, wordt het kan uiteindelijk 12px zijn, niet het minimale dat je wilt.

Met deze aanpak kun je je bovengrens en ondergrens instellen, en het lettertype zal zich daartussen schalen.


Antwoord 28

Na veel conclusies kwam ik uit op deze combinatie:

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

Antwoord 29

De lettergrootte verandert afhankelijk van de schermgrootte door CSS te gebruiken. Je kunt zien dat deze H1-tag responsive is. (corrigeer me als ik het mis heb)

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

Antwoord 30

Ik ben bang dat er geen gemakkelijke oplossing is met betrekking tot het wijzigen van de grootte van lettertypen. U kunt de lettergrootte wijzigen met behulp van een mediaquery, maar technisch gezien zal het formaat niet soepel worden gewijzigd. Als u bijvoorbeeld het volgende gebruikt:

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

uw font-size zal 3em zijn voor zowel een breedte van 300 pixels als 200 pixels. Maar je hebt een lagere font-size nodig voor een breedte van 200px om perfect responsive te maken.

Dus, wat is de echte oplossing? Er is maar één manier. U moet een PNG-afbeelding (met een transparante achtergrond) maken met uw tekst. Daarna kun je je afbeelding eenvoudig responsive maken (bijvoorbeeld: width:35%; height:28px). Op deze manier zal uw tekst volledig responsive zijn op alle apparaten.

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Other episodes