CSS/CSS3中，字体大小是否可以作为容器大小的百分比？

Question

CSS/CSS3中，字体大小是否可以作为容器大小的百分比？

7

我有一个容器：

<div id="container"><h1>LONG TITLE LINE</h1></div>

以及CSS：

#container {
    width: 50%;
    height: 50%;
}

#container h1 {
    font-size: XXXXXX;
}

"XXXXXX" <-- 我希望字体大小基于页面/容器的宽度。

问题：在CSS3中，是否可以根据页面宽度设置h1的字体大小？我相信可以使用JS完成此操作，但如果可能的话，我想避免使用它。

- circusdei

5个回答

4

我认为在CSS中不可能实现，但这可能对您有所帮助：

http://fittextjs.com/

- Jason Goldstein

哦，那很不错。看看它对性能的影响。 - circusdei

1

看起来不错-谢谢你的链接！现在进入背景图片 :/ - circusdei

3

你所说的不是这样。然而，你可以做相反的事情。如果你声明一个基础字体大小为 ems，则可以使页面宽度取决于字体大小，并在布局中使用 em 值。然后，如果你增加文本的大小，宽度将增加。

- Nate B

然后，您可以根据渲染页面的大小设置视口。 - circusdei

2

我认为可以使用媒体标签来实现这个功能。根据你想要的粒度，你可以像这样做：

@media only screen and (min-width: 1000px){
    #container h1 { font-size:42px; }
}
@media only screen and (max-width: 1000px){
    #container h1 { font-size:40px; }
}
@media only screen and (max-width: 900px){
    #container h1 { font-size:35px; }
}
@media only screen and (max-width: 800px){
    #container h1 { font-size:30px; }
}
@media only screen and (max-width: 700px){
    #container h1 { font-size:25px; }
}
@media only screen and (max-width: 600px){
    #container h1 { font-size:20px; }
}
@media only screen and (max-width: 500px){
    #container h1 { font-size:15px; }
}

See the JSFiddle here for a demo.

- adamdport

0

我的解决方案创建了一个CSS变量，该变量表示容器相对于视口的高度，以“vh”单位为单位，然后可以将此变量与CSS3的“calc”函数一起使用，以计算字体高度作为容器高度的百分比。

每次调整视口（窗口）大小时都会测量容器的大小。

<html>
        <head>
            <style>
                .container {
                    width:100%;
                    /*
                        any rules you like to set the dimensions of the container
                    */
                    top:40px;
                    height:30vh;

                    border:1px solid red;
                    white-space:nowrap;
                }
            </style>
            <script>
                    function setCSSVariableAccordingToElementHeightRelativeToViewPort(elementClassName, cssVariableName, immutableElement)
                    {
                        var element
                        /*
                            the "immutableElement" parameter is
                                true when the container is never recreated,
                                false if its generated dynamicaly
                        */
                        if(immutableElement === true) {
                            element = document.querySelector("." + elementClassName)
                        }                   

                        var onResize = function() {
                            if(immutableElement !== true) {
                                element = document.querySelector("." + elementClassName)
                            }

                            if(element != undefined) {
                                var elementHeight = element.offsetHeight
                                var elementVH = (elementHeight / window.innerHeight) * 100
                                element.style.setProperty(cssVariableName, elementVH + "vh")
                            }
                        }
                        onResize()
                        window.onresize = onResize
                    }
            </script>
        </head>
        <body>
            <div class="container">
                <span style="font-size:calc(var(--container-vh) * 0.25)">25%</span>
                <span style="font-size:calc(var(--container-vh) * 0.50)">50%</span>
                <span style="font-size:calc(var(--container-vh) * 1.00)">100%</span>
            </div>
        </body>

        <script>
            setCSSVariableAccordingToElementHeightRelativeToViewPort("container", "--container-vh", true)
        </script>
    </html>

JSFiddle

- Martijn Scheffer

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- web-tiki · Accepted Answer

另一种选择取决于您的布局是使用vw单位：

vw：视口宽度的1/100。（MDN来源）

如果您的#container宽度设置为视口百分比，则字体大小将适应其宽度：

演示

CSS：

#container h1 {
    font-size: 5vw;
}

vw单位的浏览器支持为IE9+，更多信息请参见canIuse。