Может ли размер шрифта быть% от размера контейнера в css / css3? - PullRequest
Новая
       7

Может ли размер шрифта быть% от размера контейнера в css / css3?

6 голосов
/ 26 января 2012

У меня есть контейнер: 

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

и css: 

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

#container h1 {
    font-size: XXXXXX;
}

"XXXXXX" <- где я хочу, чтобы размер шрифта основывался на ширине страницы / контейнера. </p>

ВОПРОС: возможно ли иметь размер шрифта h1 в зависимости от ширины страницы? в css3? Я уверен, что это можно сделать с помощью JS, но я хотел бы избежать этого, если это возможно.

Ответы [ 5 ]

4 голосов
/ 19 июля 2014

Другим вариантом, зависящим от вашего макета, является использование vw единиц:

vw: 1/100 ширины области просмотра. ( источник MDN )

Если ваша #container ширина установлена ​​в процентах от области просмотра, размер шрифта будет адаптироваться к его ширине:

DEMO

CSS: 

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

Поддержка браузеров для vw устройств - IE9 +, для получения дополнительной информации см. canIuse .

4 голосов
/ 26 января 2012

Я не думаю, что это возможно в CSS, но это может быть вам интересно:

http://fittextjs.com/

3 голосов
/ 26 января 2012

Не так, как вы говорите. Вы можете, однако, сделать наоборот. Ширина страницы зависит от размера шрифта. Если вы объявляете базовый размер шрифта в ems, то используйте значения em для макета. Тогда ширина увеличится, если вы увеличите размер текста.

2 голосов
/ 10 марта 2014

Я не понимаю, почему этого нельзя сделать с помощью медиа-тегов.В зависимости от того, насколько гранулярным вы хотели это сделать, вы можете сделать что-то вроде этого: 

@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 здесь для демонстрации.

0 голосов
/ 20 апреля 2017

Мое решение создает переменную CSS, которая выражает высоту контейнера относительно области просмотра, в единицах «vh», эта переменная может затем использоваться с функцией «calc» CSS3 для вычисления высоты шрифта в процентах от высоты контейнера.

размер контейнера измеряется каждый раз при изменении размера области просмотра (окна) 

<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

...