Bootstrap Responsive Font Size Code Example


Example 1: how to make fonts respnsive

h1 {   font-size: clamp(16px, 5vw, 34px); }

Example 2: responsive text css

/* Uses vh and vm with calc */ @media screen and (min-width: 25em){   html { font-size: calc( 16px + (24 - 16) * (100vw - 400px) / (800 - 400) ); } }  /* Safari <8 and IE <11 */ @media screen and (min-width: 25em){   html { font-size: calc( 16px + (24 - 16) * (100vw - 400px) / (800 - 400) ); } }  @media screen and (min-width: 50em){ html { font-size: calc( 16px + (24 - 16) * (100vw - 400px) / (800 - 400) ); } }

Example 3: how to make font responsive

html { font-size: calc(1em + 1vw); }

Example 4: bootstrap text size

<p class="h1">h1. Bootstrap heading</p> <p class="h2">h2. Bootstrap heading</p> <p class="h3">h3. Bootstrap heading</p> <p class="h4">h4. Bootstrap heading</p> <p class="h5">h5. Bootstrap heading</p> <p class="h6">h6. Bootstrap heading</p>

Comments

Popular posts from this blog

Converting A String To Int In Groovy

"Cannot Create Cache Directory /home//.composer/cache/repo/https---packagist.org/, Or Directory Is Not Writable. Proceeding Without Cache"

Android How Can I Convert A String To A Editable