使用jQuery或css动态更改css fontSize

Question

我有一个跨度需要在调整窗口大小时更改其字体大小值。我使用jquery代码执行此操作：

$(window).on('resize', function () {
    y = $(window).height();
    x = $(window).width();

    if (y > 500) {
        $('#testing').css("fontSize", "50px");
    } else if (y < 500) {
        $('#testing').css("fontSize", "10px");
    }

});

也可能与css代码相同：

 @media screen and (max-height: 500px)
 {
    #testing{
        font-size: 10px;
    }
}

实际上更有效率？一种解决方案更容易接受/普遍吗？有一个更好的方法吗？还有哪种方式在移动设备上更容易接受？在移动设备上有更好的方法吗？

Answer 1

如果您不担心跨浏览器兼容性问题，因为媒体查询是CSS3，对于旧浏览器（如IE7，IE8）not supported，那么我建议您使用CSS而不是javascript。< / p>

另一方面，除了更好地处理跨浏览器兼容性问题外，如果无法通过CSS实现任务，那么您应该使用javascript代替。

简而言之，我总是喜欢CSS而不是Javascript：）

Answer 2

哪个实际上更有效？一种解决方案更可接受/普遍吗？

性能方面，CSS更好。使用媒体查询比在每个调整大小（多次调用）上处理函数要快。当然，你可以插入一个油门，并在窗口没有按照所述时间流逝调整大小时调用一次，但即便如此，媒体查询也会更快。

此外，Javascript窗口宽度可能不会与CSS媒体查询相同。滚动条可以更改值，其他东西也可能会影响宽度。你必须使用一个函数来检查实际宽度，这会消耗更多的果汁。它看起来像那样：

function viewport() {
        //Get the current view port
        var e = window, a = 'inner';
        if (!('innerWidth' in window )) {
            a = 'client';
            e = document.documentElement || document.body;
        }
        return { width : e[ a+'Width' ] , height : e[ a+'Height' ] };
}

媒体查询的缺点是支持，旧IE中不支持它。但当然有一些图书馆可以解决这个问题。

有更好的方法吗？

不是真的，媒体查询快速而有效。

还有哪种方式在移动设备上更容易接受？在移动设备上有更好的方法吗？

大多数移动浏览器都支持媒体查询。你应该总是在移动设备上使用媒体查询，这是它们存在的主要原因。

---

自我羞辱促销以及为什么Javascript媒体查询可能有用

有一种情况是javascript可以用作媒体查询。如果要更改动态依赖的字体大小和具有比率的屏幕大小，这将非常有用。使用媒体查询执行此操作将是漫长而痛苦的，因为您必须根据平滑性进行20~30次媒体查询。

因为这个原因，我根据屏幕创建了一个更改字体大小的插件。

https://github.com/kagagnon/Responsive-Font

Answer 3

取决于使用响应式设计，您可以做的不仅仅是更改字体大小。

如果可以，vw单位是一个不错的选择。见this article

Answer 4

根据我的意见，您必须更喜欢JQuery，因为原因是：library fully support大部分devices和auto < em>按照环境需要自行配置！您不必考虑浏览器只需要用一行代码jquery以自己的方式执行它。就style或device而言，您应用browser！