How to make the text adapt to the size of the div?

Question

I have a div that has the dimensions widht and height 100% of the screen size. Inside, I have a text encapsulated in p.

How do I define the font-size so that it gets the same ratio on different sized screens or if the user resizes the tab?

Answer 1

What I’m going to comment on here is just the tip of iceberg

To better understand I advise you to read these two articles! https://css-tricks.com/snippets/css/fluid-typography/ and https://www.smashingmagazine.com/2016/05/fluid-typography/

In these articles you will see that there is an approach that arrives at this result:

And it would result:

The CSS base model for fluid typography according to the Smashing Magazine article Michael Riethmuller would be so:

/* Older browsers */
html { font-size: 16px; }

/* Modern browsers only need this one */

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

---

Simply putting the text in vw, viewport width You’d have that result, and you’d need a treatment with @media not to make the text too small when the screen is too narrow...

Notice that so the line never breaks, but the size becomes very small, as it is in proportion to the width of the viewport

Example:

html, body {
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
}
div {
	width: 100%;
	height: 100%;
}
p {
	font-size: 1vw;
	margin: 0;
}

	<div>
		<p>
			Lorem ipsum dolor sit amet consectetur, adipisicing elit. Corporis, facilis optio cupiditate ducimus animi ea quidem odit eum error corrupti ratione impedit illo sed nesciunt culpa velit repellendus eius, praesentium est quasi! Nobis ab magnam, laudantium obcaecati voluptatibus esse. Impedit repudiandae temporibus molestias cum dolorum ipsum qui, voluptates accusantium expedita esse cumque fuga earum cupiditate excepturi in eos ad, nihil commodi quae aspernatur itaque! Fuga distinctio autem nulla, accusamus minus hic obcaecati tempora accusantium consectetur! Vitae, in distinctio ipsum sint laudantium beatae natus, inventore, nam aspernatur explicabo quo accusantium quia quam quibusdam. Cumque voluptate excepturi culpa dolor pariatur nostrum, possimus impedit eum modi. Impedit dignissimos nesciunt quia iure beatae tempore suscipit ipsam, asperiores harum ullam facilis labore assumenda debitis quae eum ut corrupti ad, recusandae dolorum delectus, repellendus deleniti dolore? Culpa rerum vitae accusantium saepe, pariatur similique quam quia aspernatur nemo inventore atque quos, laudantium at ipsam earum. Officia ab beatae rem cumque eaque ea debitis, veniam corporis voluptatum doloremque. Est et numquam tenetur beatae facere a cumque, necessitatibus deserunt veritatis at adipisci in voluptatem eaque sunt aliquam iure maxime doloremque quam tempora. Sapiente quibusdam, blanditiis accusamus sequi quam autem consequuntur earum praesentium eveniet. Eum corporis perspiciatis veniam at excepturi.
		</p>
	</div>

---

Also note that like the media VW is relative to the width of the viewport even though you give Zoom in the Browser the size of the text that is in VW continues with the same "size" In this answer there are other details about this behavior of Zoom: Media Query for different zoom levels?

Answer 2

First, I suggest reading about W3’s css measurement unit: CSS: in, px, ct, cm, etc

You can use a unit of measure that is proportional to the size. For this you can use the unit vw or viewport width, which is relative to what can be viewed according to the size (width), ie will vary according to how the size.

Example: font-size: 3vw

To document, the 1vw is equivalent to 1/100 (one hundredth) the size of the viewport screen.

Another way is by using media queries (more information here on Mozilla: Media Queries).

You can use media query to set a specific size according to the resolution, this is a good option as well. Basically you set a "standard" size and adjust the size according to the resolution, for example using the unit of measure em.

Example:

body {
  font-size: 14px;
}
@media (max-width: 1200px) {
  body { font-size: 1.2em; }
}
@media (max-width: 768px) {
  body { font-size: 1.1; }
}
@media (max-width: 468px) {
  body { font-size: 1em; }
}