Exemple de page Web réactive

Sep 13 2020

Je fais le devoir sur un cours HTML-CSS Coursera. La mission est de donner une simple page responsive, qui peut être trouvée ici .

Je pense que j'ai trouvé une solution, mais j'ai fini par avoir environ 1 100 lignes pour la feuille de style, donc je suppose qu'il existe des moyens d'obtenir la mise en page souhaitée de manière plus intuitive et plus simple. Je veux un peu de retour sur ce que je peux améliorer ici.

* {
    font-family: "Comic Sans MS", cursive, sans-serif;
    box-sizing: border-box;
}

h1{
    text-align: center;
}


.sign_fs{
    position: relative;
    width: 50%;
    min-width: fit-content;
    padding: 5px 10px 5px 10px;
    border: 5px solid black;
    float: right;
    font-size: 20px;
    text-align: center;
    margin-top: -2px;
    margin-right: -2px;
}

#chicken {
    background-color: pink;
}

#beef {
    background-color: slateblue;
}

#sushi{
    background-color: skyblue;
}

@media (min-width: 992px) {
    .text_fs {
        font-size: 15px;
        clear: both;
        margin: 1%;
        padding: 1%;
    }

    .div_fs {
        background-color: grey;
        border: 2px solid black;
        width: 31.2%;
        margin: 1%;
        float: left;
    }

}

@media(max-width: 992px) and (min-width:768px) {
    .text_fs {
        font-size: 15px;
        clear: both;
        margin: 1%;
        padding: 1%;
    }

    .div_tablet_top {
        background-color: grey;
        border: 2px solid black;
        width: 48%;
        margin: 1%;
        float: left;
    }

    .div_tablet_bot {
        background-color: grey;
        border: 2px solid black;
        width: 98%;
        margin: 1%;
        float: left;
    }

    #sushi{
        width: 20%;
    }
}

@media (max-width: 768px) {
    section {
        margin: 10px;
        padding-top: 0px;
    }

    .div_mobile{
        background-color: grey;
        border: 2px solid black;
        margin: 1%;
        margin-top: 20px;
        padding: 10px;

    }
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Module 2 solution</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <h1>Our Menu</h1>
    <section>
        <div class="div_fs div_tablet_top div_mobile">
            <div class="sign_fs" id="chicken">Chicken</div>
            <div class="text_fs" >
                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
            </div>
        </div>
        <div class="div_fs div_tablet_top div_mobile">
            <div class="sign_fs" id="beef">Beef</div>
            <div class="text_fs" >
                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
            </div>
        </div>        
        <div class="div_fs div_tablet_bot div_mobile">
            <div class="sign_fs" id="sushi">Sushi</div>
            <div class="text_fs">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
            </div>
        </div>
    </section>
</body>
</html>

Réponses

5 SᴀᴍOnᴇᴌᴀ Sep 18 2020 at 04:28

Simplifier la mise en page générale

Bien que je n'ai pas parcouru les cours, 1 vidéos ont regardé le programme. Je vois que la tâche suivante implique l'utilisation du framework Bootstrap. Étant donné que cette affectation ne nécessite aucun cadre à utiliser, une option à envisager est flexbox . Il a été conçu pour éliminer le besoin d'éléments flottants. Une chose importante à considérer est la compatibilité du navigateur . 1 à partir d'une recherche rapide ne voit aucune exigence concernant la compatibilité du navigateur dans le module 2 de codage ASSIGNMENT, mais c'est quelque chose à considérer dans d'autres projets.

Simplifier les règles actuelles

Voici quelques suggestions pour simplifier les règles actuelles dans la feuille de style, sans introduire de styles flex.

simplifier la frontière

Le jeu de règles pour .sign_fscontient cette règle de bordure:

 padding: 5px 10px 5px 10px;

Cela peut être simplifié pour

padding: 5px 10px

car "Lorsque deux valeurs sont spécifiées, la première bordure s'applique en haut et en bas, la seconde à gauche et à droite ." ¹

dont les styles peuvent être combinés

Dans @media(max-width: 992px) and (min-width:768px) { les ensembles de règles pour .div_tablet_topet .div_tablet_botsont presque identiques à l'exception des widthrègles, toutes les autres règles peuvent donc être abstraites dans un ensemble de règles commun:

.div_tablet_top,
.div_table_bottom {
    background-color: grey;
    border: 2px solid black;
    margin: 1%;
    float: left;
}

Nom de classe excédentaire

Le nom de la classe div_fset div_mobilesont partagés par tous les <div>éléments qui sont des descendants directs de l' <section>élément. Pour cette raison, ces noms de classe pourraient être supprimés et les sélecteurs pourraient simplement utiliser un combinateur enfant ;section > div