Question

此代码正常运作。

<style>
h1{ font-size:8.5vw;}
</style>
<h1>Heading</h1>

但是这段代码无效。

<style>
h1{ font-size:8.5px;}
</style>
<h1>Heading</h1>

问题：我想用这样的屏幕分辨率调整字体大小。 http://css-tricks.com/examples/ViewportTypography/ - ＆gt; （用鼠标检查最小化屏幕分辨率）。当我使用VW中的字体font-size:7.5vw;时，它可以正常使用。但是当我在PX font-size:40px;中使用font-size时，它不起作用。

Answer 1

一个可能的技巧是使用javascript来检测窗口的分辨率并设置所需元素的字体大小属性：

<script language="javascript">
    function autoResizeFont()
    {
        var value = function_of(window.innerWidth, window.innerHeight);
        document.getElementById('my_container').style.fontSize = value +'px';
    }
    window.onresize = autoResizeFont;
    autoResizeFont();
</script>

其中function_of是一个要实现的函数，它根据窗口大小计算字体大小的值。

使用JQuery的另一种解决方案：

<script language="javascript">
    $( document ).ready(function() {
        if ($(window).width() > THRESHOLD_VALUE) {
            $('*').removeClass('small-font').addClass('big-font');
        } else {
            $('*').removeClass('big-font').addClass('small-font');
        }
    });
</script>

此解决方案根据窗口的宽度是大于还是小于阈值来设置所有HTML元素的相应类。 small-font和big-font定义的示例可以是：

.small-font {font-size: 10px !important}
.big-font   {font-size: 14px !important}

使用屏幕分辨率调整字体大小而不使用@media查询

1 个答案: