"Responsive text with css"
Bootstrap 4.1.1 Snippet by ALIMUL AL RAZY

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div> <h1>Bangladesh is our homeland.</h1> </div>
* { /* Typography */ --main-font: 'Slabo 27px', serif; /* Calculation */ --responsive: calc((var(--min-font) * 1px) + (var(--max-font) - var(--min-font)) * ((100vw - 420px) / (1200 - 420))); /* Ranges from 421px to 1199px */ } h1 { /* Set max and min font sizes */ --max-font: 50; --min-font: 25; font-family: var(--main-font); font-size: var(--responsive); } p { font-family: sans-serif; margin: auto; width: fit-content; /* Set max and min font sizes */ --max-font: 20; --min-font: 14; font-size: var(--responsive); } @media (min-width: 1200px) { h1, p { font-size: calc(var(--max-font) * 1px); } } @media (max-width: 420px) { h1, p { font-size: calc(var(--min-font) * 1px); } } /* Whatever */ * { box-sizing: border-box; margin: 0; padding: 0; } html, body { height: 100%; } body { display: flex; } div { margin: auto; padding: 20px; } a, a:visited, a:focus, a:active, a:link { text-decoration: none; outline: 0; } a { color: skyblue; transition: .2s ease-in-out color; } h1, h2, h3, h4 { margin: .3em 0; } ul { padding: 0; list-style: none; } img { vertical-align: middle; height: auto; width: 100%; }

Related: See More


Questions / Comments: