Contoh halaman web yang responsif

Sep 13 2020

Saya sedang mengerjakan tugas pada kursus HTML-CSS Coursera. Tugasnya adalah memberikan halaman responsif sederhana, yang dapat ditemukan di sini .

1 think 1 datang dengan solusi, tetapi akhirnya memiliki sekitar 1.100 baris untuk stylesheet, jadi saya kira ada beberapa cara untuk mencapai tata letak yang diinginkan dengan cara yang lebih intuitif dan mudah. Saya ingin sedikit umpan balik tentang apa yang dapat saya tingkatkan di sini.

* {
    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>

Jawaban

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

Menyederhanakan tata letak keseluruhan

Sementara 1 belum melalui video kurir, 1 memang melihat silabus. 1 lihat bahwa tugas berikutnya memang melibatkan penggunaan kerangka Bootstrap. Karena tugas ini tidak memerlukan kerangka kerja untuk digunakan, salah satu opsi untuk dipertimbangkan adalah flexbox . Ini dirancang untuk menghilangkan kebutuhan akan elemen mengambang. Satu hal penting yang harus diperhatikan adalah kompatibilitas browser . 1 dari pencarian sepintas tidak melihat persyaratan apa pun tentang kompatibilitas browser di Modul 2 pengkodean ASSIGNMENT tetapi itu adalah sesuatu yang perlu dipertimbangkan dalam proyek lain.

Menyederhanakan aturan saat ini

Berikut beberapa saran untuk menyederhanakan aturan saat ini di stylesheet, tanpa memperkenalkan gaya fleksibel.

menyederhanakan perbatasan

Set aturan untuk .sign_fsberisi aturan perbatasan ini:

 padding: 5px 10px 5px 10px;

Ini dapat disederhanakan menjadi

padding: 5px 10px

karena "Jika dua nilai ditentukan, batas pertama diterapkan ke atas dan bawah, yang kedua di kiri dan kanan ." ¹

yang gayanya bisa digabungkan

Di @media(max-width: 992px) and (min-width:768px) { dalam kumpulan aturan untuk .div_tablet_topdan .div_tablet_bothampir identik kecuali untuk widthaturan - aturan tersebut, sehingga semua aturan lainnya dapat disarikan ke kumpulan aturan umum:

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

Kelebihan Nama Kelas

Nama kelas div_fsdan div_mobiledigunakan bersama oleh semua <div>elemen yang merupakan keturunan langsung dari <section>elemen tersebut. Karena itu, nama kelas tersebut dapat dihapus dan penyeleksi hanya dapat menggunakan kombinator anak ;section > div