What I will comment on here is just the tip of iceberg
To understand better, I recommend reading these two articles! link and link
In these articles you will see that there is an approach that arrives at this result:
AndIwouldgivethisresult:
TheCSSbaselinemodelforflowtypographyaccordingtoSmashingMagazine's Michael Riethmuller article would look like this: / p>
/* 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) ); }
}
Putting the text simply into vw
, viewport width You would have this result, and would need a @media
treatment to not make the text too small when the screen is too narrow .. .
Notice that the line never breaks, but the size becomes very small, because it is in proportion the width of 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>