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; }
.nav { background-color: #f2f2f2; padding: 20px; list-style: none; }
.nav li { display: inline-block; margin-right: 10px; }
.nav li a { text-decoration: none; color: #333; padding: 5px 10px; }
.nav li a:hover { background-color: #4CAF50; color: white; }
.content { padding: 20px; }
@media (max-width: 768px) {
.nav li { display: block; }
}
</style>
</head>
<body>
<ul class="nav">
<li><a href="#">主页</a></li>
<li><a href="#">产品</a></li>
<li><a href="#">关于</a></li>
<li><a href="#">联系</a></li>
</ul>
<div class="content">
<h1>响应式设计内容</h1>
<p>这里是内容区域，可以根据屏幕宽度的不同而改变布局。</p>
</div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
// 响应式导航菜单
$(window).on('resize load', function() {
if ($(window).width() <= 768) {
$('.nav').addClass('responsive'); // 添加响应式类
} else {
$('.nav').removeClass('responsive'); // 移除响应式类
}
});
</script>
</body>
</html>这个代码示例展示了如何使用jQuery来根据屏幕宽度的变化添加或移除一个“响应式”类。当屏幕宽度小于或等于768像素时，.nav 列表将变为块状显示，反之则为内联块状显示。这是一个典型的响应式设计实践，适用于各种Web项目。
评论已关闭