Home >Web Front-end >JS Tutorial >How to create a responsive website using HTML, CSS, and jQuery
How to create a responsive website using HTML, CSS, and jQuery
- 王林Original
- 2023-10-24 12:53:071263browse
How to create a responsive website using HTML, CSS and jQuery
In today's mobile Internet era, more and more people use mobile phones and tablets to browse websites. Therefore, developing responsive websites has become a necessary skill. This article will introduce how to use HTML, CSS, and jQuery to create a responsive website that adapts to the screen sizes of different devices.
Step 1: Create the HTML structure
First, we need to create the HTML structure of the website. The following is a simple example:
<!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>In the above example, we use HTML5 semantic tags to build the website structure. <header></header> tag defines the header of the website, <nav></nav> tag defines the navigation bar, <h1></h1>, <h2> </h2> and <p></p> tags are used for titles and content.
Step 2: Add CSS styles
Next, we need to add CSS styles to the website to ensure good display on different devices. Here is a simple example:
/* 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;
}In the above CSS code, we set the default value of the global style and then add styles for the header, navigation, content and bottom.
Step 3: Use jQuery to create a responsive layout
Now, we can use jQuery to implement the responsive layout of the website. The following is a simple example:
// 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');
});
});The above code implements the following functions:
- Listen to the window size change event, and when the window width is less than 768px, add the mobile class for navigation, Adjust the navigation style;
- Listen to the navigation click event, and switch the display and hiding of the navigation menu when the navigation is clicked.
Step 4: Add responsive CSS styles
Finally, we need to add some responsive CSS styles to adapt to different screen sizes. Here is a simple example:
/* 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;
}
}In the above CSS code, we use media queries to define different styles for different screen sizes. When the window width is less than 767px, the navigation menu is hidden, and the menu is displayed when the navigation is clicked; when the window width is between 768px and 1023px, the padding value of the header becomes 10px; when the window width is greater than or equal to 1024px, the padding value of the header Revert to 20px.
At this point, we have completed the process of creating a responsive website using HTML, CSS and jQuery. Through the above steps, you can expand and modify the code according to your specific needs to adapt to different scenarios and design requirements. I wish you success in your development!
The above is the detailed content of How to create a responsive website using HTML, CSS, and jQuery. For more information, please follow other related articles on the PHP Chinese website!