I am trying to see whether there is a good way to fill a couple of paragraphs of text on a page of my website, in such a way that it fits on one page without overflow, and I want to do it without using media queries.
On a desktop, the font size should big and on a mobile it should be small enough that there is minimal whitespace, after the end of the text, without the need to scroll.
One option would be to use vw as a sizing unit. However, the users of my website will most likely see it in Portrait mode and it will end up showing a lot of white space at the bottom.
To understand what I mean, consider the following html. If you resize your browser relative your screen, it should proportionately show you the same whitespace. However, if you were to reduce the width more, then the white space increases.
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.text-div {
font-size: 2.5vw;
text-align: justify;
}
</style>
</head>
</body>
<div class="text-div">
<h1>Title</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed lobortis egestas augue, sed cursus ex molestie sit amet. Nunc ullamcorper massa vel nulla finibus feugiat. Suspendisse efficitur facilisis ligula, sit amet egestas tortor placerat in. Morbi nec mi faucibus, lacinia odio sit amet, viverra libero. Pellentesque vel mollis massa, sit amet porta eros. Etiam at lectus feugiat, iaculis mi eget, rutrum lorem. Phasellus a laoreet massa.</p>
<p>In porta ac sem sit amet faucibus. Integer et venenatis sem. Sed nec magna sed elit luctus sodales sed ac nulla. Vivamus odio augue, tincidunt eget risus blandit, rhoncus congue sapien. Morbi viverra enim sit amet risus tincidunt rutrum. Mauris tristique, eros eu gravida porttitor, nisi orci tempus massa, vel volutpat velit tortor vel nulla. Fusce et mollis massa, ac tempor dolor. Mauris ac ipsum laoreet, vulputate tellus et, vehicula mi. Sed eget odio eu metus eleifend suscipit vel ut neque. Fusce rutrum lorem id congue pellentesque. Morbi eleifend congue laoreet. Proin orci ipsum, sagittis id venenatis in, bibendum non tortor.</p>
</div>
</body>
</html>
I guess I'd need to size my base font size (if I want to use em later), based on the available area. There will be a certain font size, if declared in pixels, where irrespective of the orientation, it would fill up the page. Just not sure how to get that.
