Maison > Article > interface Web > Comment créer un site Web réactif en utilisant HTML, CSS et jQuery

Comment créer un site Web réactif en utilisant HTML, CSS et jQuery

王林original: 2023-10-24 12:53:071195parcourir

À l'ère actuelle de l'Internet mobile, de plus en plus de personnes utilisent des téléphones mobiles et des tablettes pour parcourir des sites Web. Par conséquent, développer des sites Web réactifs est devenu une compétence nécessaire. Cet article explique comment utiliser HTML, CSS et jQuery pour créer un site Web réactif qui s'adapte aux tailles d'écran de différents appareils.

Première étape : créer une structure HTML
Tout d'abord, nous devons créer la structure HTML du site Web. Voici un exemple simple :

<!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>

Dans l'exemple ci-dessus, nous utilisons les balises sémantiques HTML5 pour construire la structure du site Web. <header></header>标签定义网站的头部，<nav></nav>标签定义导航栏，<h1></h1>、<h2></h2>和<p></p> Les balises sont utilisées pour les titres et le contenu.

Étape 2 : Ajouter des styles CSS
Ensuite, nous devons ajouter des styles CSS au site Web pour garantir un bon affichage sur différents appareils. Voici un exemple simple :

/* 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;
}

Dans le code CSS ci-dessus, nous définissons la valeur par défaut du style global, puis ajoutons des styles pour l'en-tête, la navigation, le contenu et le bas.

Étape 3 : Utilisez jQuery pour créer une mise en page réactive
Maintenant, nous pouvons utiliser jQuery pour implémenter une mise en page réactive pour le site Web. Voici un exemple simple :

// 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');
    });
});

Le code ci-dessus implémente les fonctions suivantes :

Écoutez les événements de changement de taille de fenêtre, lorsque la largeur de la fenêtre est inférieure à 768 pixels, ajoutez une classe mobile à la navigation et ajustez le style de navigation ;
Écoutez les événements de clic de navigation, change l'affichage et le masquage du menu de navigation lorsque vous cliquez sur la navigation.

Étape 4 : Ajouter des styles CSS réactifs
Enfin, nous devons ajouter des styles CSS réactifs pour nous adapter aux différentes tailles d'écran. Voici un exemple simple :

/* 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;
    }
}

Dans le code CSS ci-dessus, nous utilisons des requêtes multimédias pour définir différents styles pour différentes tailles d'écran. Lorsque la largeur de la fenêtre est inférieure à 767 px, le menu de navigation est masqué et le menu s'affiche lorsque l'on clique sur la navigation ; lorsque la largeur de la fenêtre est comprise entre 768 px et 1 023 px, la valeur de remplissage de l'en-tête devient 10 px ; supérieure ou égale à 1024px, la valeur de remplissage de l'en-tête revient à 20px.

À ce stade, nous avons terminé le processus de création d'un site Web réactif en utilisant HTML, CSS et jQuery. Grâce aux étapes ci-dessus, vous pouvez développer et modifier le code en fonction de vos besoins spécifiques pour vous adapter à différents scénarios et exigences de conception. Je vous souhaite du succès dans votre développement!

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

html5 jquery css html 事件 padding

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Comment utiliser le framework Layui pour développer une application prenant en charge la prévisualisation en ligne des documents WordArticle suivant：Comment utiliser le framework Layui pour développer une application prenant en charge la prévisualisation en ligne des documents Word

Articles Liés

Voir plus