使用fontSize或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

哪一种更有效？有一种解决方案更容易被接受/普遍吗？

就性能而言，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 2

如果您不担心跨浏览器兼容性问题，因为媒体查询是CSS3，这是IE7、IE8等老浏览器的不支持。那么，我建议您使用CSS而不是javascript。

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

简而言之，我总是喜欢CSS而不是Javascript :)

Answer 3

视情况而定，使用响应性设计将允许您做更多的工作，不仅仅是改变字体大小。

大众的单位是一个很好的选择，如果你可以。请参阅这篇文章