Best practices for resizing text on different screen sizes

Question

I'm trying to figure out the best way of resizing text inside a div on different sized devices. In this demo, I've used the media query many times, but this doesn't feel like the most efficient way of doing it.

Does anyone have any better practices than this? Obviously my solution only accommodates for the exact amount of text in this demo, which wouldn't be great for other divs of the same size but with different amounts of text in.

I'm interested in hearing your thoughts.

 .first-news-article-description { background: orange; width: 100%; height: 100px; padding: 15px; } @media(max-width:768px) { .first-news-article-description {background:yellow} h2 {font-size: 1.2em} } @media(max-width:600px) { .first-news-article-description {background:red} h2 {font-size: 1.0em} } @media(max-width:450px) { .first-news-article-description {background:blue} h2 {font-size: 0.8em} } @media(max-width:350px) { .first-news-article-description {background:red} h2 {font-size: 0.7em} } 

 <div class="first-news-article-description"> <h2>Some random text that needs to resize properly on different devices</h2> <span>Some more text</span> </div> 

Answer 1

There is a unit called viewport width . You can use it to resize the text-size without using media query. Find the example below

 <h1 style="font-size:4vw;">Hello World</h1> <p style="font-size:2vw;">Resize the browser window to see how the font size scales.</p>