时间戳

首页 > 解决方案 > 最大宽度检测/功能的最佳语法 JavaScript

javascript - 最大宽度检测/功能的最佳语法 JavaScript

问题描述

今天我有一个关于 Js 最佳语法的问题：

这是通常的版本

function resize() {
    if ($(window).width() < 960) {
        $('. slect span').click(function () {
            $('.home-footer').toggleClass('open-in-mob');
        });
    } else {
        $('.home-footer').removeClass('open-in-mob');
        $('. slect span').click(function () {
            $('.home-footer').toggleClass('open-in-mob');
        });
    }
}
$(document).ready(function () {
    $(window).resize(resize);
    resize();
});

这里是另一个有效的版本，但是，我有你的意见：

if (matchMedia('only screen and (max-width:959px)').matches) {
    $(".slect span").click(function(event) {
        $(this).parents(".home-footer").addClass("open-in-mob");
    });
}

如果您认为其他语法更好，请分享:)谢谢

标签： javascriptjquery

解决方案

通过使用 CSS 媒体查询，这可能会更容易/简化。将 JS 添加到混合中以控制页面布局应该作为最后的手段。DOM重排的次数越多，页面速度就越慢。

CSS 示例：

@media (max-width: 960px) {
    // Your code here
}

https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries

推荐阅读