Question

我有JSFiddle

body
{
    background: rgb(111,111,111);
}

#Banner
{
    width: 100%; /*1200px*/
    height: 800px;
    background: url("http://www.firstdayfwb.com/images/header.jpg") no-repeat 55%;
    background-size: contain;
}

#Mission
{
    padding-top: 750px;
    width: 50%;
    margin-left: auto;
    margin-right: auto;
    font-size: 250%;
    font-weight: bold;
    text-align: center;
}


<body>

        <div id="Menu">

        </div>

        <div id="Banner">

            <h1 id="Mission">Creating a Church Unchurched People Love to Attend</h1>

        </div>






    </body>

我试图让我的H1（id任务）的字体大小响应，并根据它的容器大小改变它的大小。我尝试了很多东西，改变百分比是我最接近的;但是，它仍然没有像我希望的那样工作。

有关如何根据容器的大小（当浏览器窗口调整大小时）修改字体大小的任何想法？

Answer 1

不幸的是，不，这就是css媒体查询有点短暂的地方。您无法仅使用CSS检测和更改基于容器大小的字体，仅检测屏幕大小。您必须使用JavaScript（例如fittext）才能实现您的目标。

字体大小不响应

1 个答案: