屏幕越大字越小

by HDL52

HTML

<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent sed tellus facilisis ex vulputate lobortis sed eu orci. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aliquam accumsan risus nisi, in aliquam ipsum bibendum sit amet. Nullam purus neque, fringilla nec malesuada ut, posuere euismod augue. Mauris sit amet volutpat justo. Vestibulum tincidunt lacus a libero sodales aliquam. Donec condimentum velit eget purus consectetur, in vulputate nunc elementum. Praesent sodales scelerisque turpis, sit amet feugiat mi pulvinar pulvinar. Sed consequat odio gravida, sollicitudin tortor nec, convallis eros. Donec aliquam justo enim, nec gravida velit fringilla sit amet. Suspendisse commodo tellus et libero vestibulum, a lacinia nibh porttitor. Maecenas dictum enim blandit dui commodo tempus. Aenean suscipit risus ac purus viverra rhoncus.

Aliquam vitae ornare quam. Ut blandit gravida diam. Sed lobortis nunc a nibh rhoncus maximus. Ut fermentum, lectus vel ullamcorper dictum, massa sapien commodo nisl, vulputate maximus ex turpis eget sapien. Mauris vel congue lorem. Proin in elit odio. Proin ac metus pellentesque, aliquam dolor et, euismod leo. Proin sagittis tortor eget erat accumsan sodales.

Aliquam erat volutpat. Praesent in feugiat erat. Donec gravida vitae erat quis scelerisque. In interdum sed diam non aliquet. Vivamus ut scelerisque ante. Mauris venenatis dictum luctus. Nulla et leo maximus, maximus lacus non, ullamcorper ante. Vivamus euismod convallis sapien, at pharetra nisl suscipit maximus. Vivamus lorem eros, lobortis non nulla non, molestie gravida purus. Nunc gravida sollicitudin odio, nec facilisis magna laoreet non.

Suspendisse potenti. Phasellus sodales suscipit molestie. Curabitur id accumsan urna, at tincidunt turpis. In turpis nunc, hendrerit eu dui vel, auctor efficitur metus. Nulla vel malesuada augue. Pellentesque tincidunt, mauris ac varius accumsan, nulla dolor convallis est, vitae...

CSS

html, body {
  height: 100vh;
  width: 100vw;
  overflow: hidden;
}

body {
  padding: 10px;
  font-size: clamp(20px, -5vw + 96px, 60px);
}

p {
  margin: 20px 0;
}