<p>如何使用HTML、CSS和jQuery创建响应式网站
<p>在如今的移动互联网时代，越来越多的人使用手机和平板电脑浏览网站。因此，开发响应式网站已经成为一种必要的技能。本文将介绍如何使用HTML、CSS和jQuery来创建一个响应式网站，以适应不同设备的屏幕尺寸。
<p>第一步：创建HTML结构
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>响应式网站</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<h1>网站标题</h1>
<nav>
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">关于</a></li>
<li><a href="#">服务</a></li>
<li><a href="#">联系我们</a></li>
</ul>
</nav>
</header>
<div class="content">
<h2>欢迎来到我们的网站</h2>
<p>这是一个响应式网站的示例。</p>
</div>
<footer>
<p>版权所有 © 2021</p>
</footer>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="script.js"></script>
</body>
</html><header>标签定义网站的头部，<nav>标签定义导航栏，<h1>、<h2>和<p>标签用于标题和内容。<p>第二步：添加CSS样式/* style.css */
/* 全局样式 */
body {
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
}
/* 头部样式 */
header {
background-color: #333;
color: #fff;
padding: 20px;
}
header h1 {
margin: 0;
font-size: 24px;
}
nav ul {
margin: 0;
padding: 0;
list-style: none;
}
nav ul li {
display: inline-block;
margin-right: 20px;
}
nav ul li a {
color: #fff;
text-decoration: none;
}
/* 内容样式 */
.content {
padding: 20px;
}
/* 底部样式 */
footer {
background-color: #333;
color: #fff;
padding: 20px;
text-align: center;
}// script.js
$(document).ready(function() {
// 监听窗口尺寸变化事件
$(window).resize(function() {
// 判断窗口宽度
if( $(window).width() < 768 ) {
// 当窗口宽度小于768px时，调整导航样式
$('nav ul').addClass('mobile');
} else {
$('nav ul').removeClass('mobile');
}
});
// 导航点击事件
$('nav').on('click', function() {
$('nav ul').toggleClass('open');
});
});/* style.css */
/* 移动设备样式 */
@media (max-width: 767px) {
nav ul {
display: none;
}
nav ul.open {
display: block;
}
nav ul.mobile {
display: block;
}
nav ul.mobile li {
display: block;
margin-bottom: 10px;
}
}
/* 平板设备样式 */
@media (min-width: 768px) and (max-width: 1023px) {
header {
padding: 10px;
}
}
/* 桌面设备样式 */
@media (min-width: 1024px) {
header {
padding: 20px;
}
}以上是如何使用HTML、CSS和jQuery创建响应式网站的详细内容。更多信息请关注PHP中文网其他相关文章！
