jQuery 响应式 Web 设计
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery 响应式设计示例</title>
<style>
body { font-family: Arial, sans-serif; }
.container { margin: 20px; }
.box { width: 100px; height: 100px; }
</style>
</head>
<body>
<div class="container">
<div class="box" style="background-color: blue;"></div>
</div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(window).on('resize', function() {
if ($('.container').width() > 300) {
$('.box').css('background-color', 'green');
} else {
$('.box').css('background-color', 'red');
}
}).resize(); // 触发resize事件以初始化颜色设置
</script>
</body>
</html>这个代码示例展示了如何使用jQuery来进行响应式设计。当.container的宽度大于300px时，.box的背景颜色变为绿色，否则变为红色。代码中的.resize()在文档加载完成后立即触发，以确保颜色的初始设置。
评论已关闭