Question

我试图查看是否有一种很好的方法可以在我的网站页面上填充几段文字，以使其适合一页而不会溢出，我想不使用它媒体查询。

在台式机上，字体大小应该很大，而在移动设备上，字体大小应该足够小，以使文本结尾后的空白最少，而无需滚动。

一种选择是使用vw作为大小调整单位。但是，我网站的用户很可能会以“纵向”模式看到它，并且最终在底部显示很多空白。

要理解我的意思，请考虑以下html。如果您调整浏览器相对于屏幕的大小，则应按比例显示相同的空白。但是，如果您进一步减小宽度，则空白会增加。

<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>

我想我需要根据可用区域来调整基本字体大小（如果以后要使用em的话）。如果以像素为单位声明某个字体大小，则无论方向如何，字体大小都会填满整个页面。只是不确定如何获得。

Answer 1

此页面回答了我的需要...

https://css-tricks.com/books/volume-i/scale-typography-screen-size/

body {
  font-size: calc([minimum size] + ([maximum size] - [minimum size]) * ((100vw - [minimum viewport width]) / ([maximum viewport width] - [minimum viewport width])));
}

自适应CSS：使文本适合所有尺寸和方向

1 个答案: