Question

我有一个容器：

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

和css：

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

#container h1 {
    font-size: XXXXXX;
}

“XXXXXX”＆lt; - 我希望字体大小基于页面/容器的宽度。

问题：是否可以根据页面的宽度设置h1的字体大小？在css3？我确信它可以使用JS来完成，但是如果可能的话就要避免这样做。

Answer 1

我不认为它在CSS中是可能的，但这对你来说可能很有趣：

http://fittextjs.com/

Answer 2

依赖于您的布局的其他选项是使用vw单位：

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

如果您的#container宽度设置为视口的百分比，则font-size将适应其宽度：

<强> DEMO

CSS：

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

vw单元的浏览器支持是IE9 +，有关详细信息，请参阅canIuse。

Answer 3

不是你说的那样。但是，你可以做相反的事情。如果您在ems中声明基本字体大小，则页面宽度取决于字体大小，然后使用em值作为布局。然后，如果增加文本的大小，宽度会增加。

Answer 4

我不明白为什么使用媒体标签无法实现这一点。根据您想要的粒度，您可以执行以下操作：

@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; }
}

请参阅JSFiddle here了解演示。

Answer 5

我的解决方案创建一个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

font-size可以是css / css3中容器大小的百分比吗？

5 个答案: