jQuery 响应式 Web 设计

// 确保DOM完全加载完成
$(document).ready(function() {
    // 监听窗口大小变化
    $(window).resize(function() {
        // 如果窗口宽度小于600px
        if ($(window).width() < 600) {
            // 隐藏左侧菜单
            $('#left-menu').hide();
            // 调整主内容区的宽度
            $('#content').css('width', '100%');
        } else {
            // 显示左侧菜单
            $('#left-menu').show();
            // 调整主内容区的宽度
            $('#content').css('width', 'calc(100% - 220px)');
        }
    });
 
    // 初始化时立即触发resize事件
    $(window).trigger('resize');
});

这段代码使用jQuery来处理响应式设计中的窗口大小变化。它监听窗口的resize事件，并根据窗口的宽度来显示或隐藏左侧菜单，并调整主内容区的宽度。代码中使用了calc()函数来动态计算宽度，这是CSS3中的一个功能，可以用来执行简单的数学运算。