根据显示器分辨率调整字体大小

Question

我是初学者，我很难调整字体大小。当显示分辨率更改时，文本超出div限制。我想，而不是超出div的限制，文本会根据布局的其余部分改变分辨率。

截图

HTML：

base.Method()

CSS：

<div class="sec" id="se">

    <div class="title">
    </div>
    <img class="img" src="img/i.jpg">
    <div class="secleft">
        <div class="txt">
        <p>LOREM IPSUM DOLOR SIT AMET, CONSECTETUR ADIPISCING ELIT..</p>
        <p>LOREM IPSUM DOLOR SIT AMET, CONSECTETUR ADIPISCING ELIT..</p>
        <p>LOREM IPSUM DOLOR SIT AMET, CONSECTETUR ADIPISCING ELIT..</p>
        <p>LOREM IPSUM DOLOR SIT AMET, CONSECTETUR ADIPISCING ELIT..</p>
        </div>

    </div>
    <div class="secright">
    </div>
</div>

Answer 1

这就是CSS媒体查询的用途。

https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries

您可以使用@media (max-width: 750px) {css here..}

它的作用是根据屏幕的宽度应用不同的CSS。因此，您可以在此块中应用不同的字体大小，然后仅在屏幕宽度小于750像素时使用。 Note 750只是一个例子，可以设置为你喜欢的任何东西。

示例：

body {
    font-size: 3em;
    }

@media (max-width: 750px) {
    body {
    font-size: 1em;
    }
}

Answer 2

单位em与其父亲相对。使用媒体查询定义多个断点并更改父级的字体大小，并且它的子级将相对于其父级缩小。

例如：https://jsfiddle.net/jpa1fab8/

正如您可以看到相对于其容器的字体大小更改。 拖动JSFiddle中的分隔符以使容器变小

所以：将font-size定义为em并使用@media根据某些font-size更改breakpoints。这些是Bootstrap CSS使用的断点：https://v4-alpha.getbootstrap.com/layout/overview/

Answer 3

使用以下css设置字体大小：

font-size: 1vw;