Apa Itu Desain Responsif?

Termasuk bagian Menata dengan CSS dalam perjalanan HTML di Coddy. Pelajaran 61 dari 76.

Dalam desain web, desain responsif adalah pendekatan yang bertujuan membuat halaman web yang menyesuaikan diri dan memberikan pengalaman melihat yang optimal di berbagai perangkat, mulai dari monitor komputer desktop hingga ponsel. Situs web responsif secara otomatis menyesuaikan tata letak, konten, dan fungsinya berdasarkan ukuran layar, resolusi, dan orientasi perangkat yang digunakan untuk melihatnya. Tujuan desain responsif adalah memastikan pengguna dapat mengakses dan berinteraksi dengan situs web dengan mudah, terlepas dari perangkat yang mereka gunakan.

Desain responsif dicapai melalui kombinasi beberapa teknik, termasuk:

Grid dan tata letak yang fleksibel: Menggunakan grid CSS atau Flexbox untuk membuat tata letak yang dapat menyesuaikan diri dengan berbagai ukuran layar.

Gambar dan media yang fleksibel: Memastikan gambar dan media lainnya diskalakan secara proporsional dengan tata letak.

Kueri media: Menerapkan gaya CSS yang berbeda berdasarkan karakteristik perangkat, seperti lebar, tinggi, dan orientasi layar.

Semakin banyak orang menggunakan perangkat seluler untuk menjelajahi web, desain responsif menjadi penting agar situs web mudah digunakan. Desain ini memastikan situsmu terlihat bagus dan berfungsi dengan baik di perangkat apa pun, sehingga pengguna mendapatkan pengalaman yang lancar dan konsisten.

Tantangan

Mudah

Kamu diberi dokumen HTML dengan heading (<h1>), paragraf (<p>), dan dua gambar (<img>). Tugasmu adalah menambahkan CSS dasar agar elemen-elemen tersebut responsif dan menunjukkan dengan jelas perbedaan antara tinggi tetap dan tinggi otomatis. Ikuti langkah-langkah berikut:

Tulis aturan CSS yang menargetkan elemen <h1>. Atur font-size menjadi 5vw. Dengan demikian, ukuran font heading akan responsif terhadap lebar viewport.
Tulis aturan CSS yang menargetkan elemen <p>. Atur font-size menjadi 3vw. Dengan demikian, ukuran font paragraf akan responsif terhadap lebar viewport.
Tulis aturan CSS yang menargetkan class .fixed-height. Atur width menjadi 100% dan height menjadi 150px. Ini akan membuat gambar terdistorsi karena tinggi tetap dipaksakan.
Tulis aturan CSS yang menargetkan class .auto-height. Atur width menjadi 100% dan height menjadi auto. Dengan demikian, gambar akan diskalakan secara proporsional dengan tetap mempertahankan rasio aspek.
Tulis aturan CSS untuk container (.container) dengan mengatur width ke 300px, border ke 2px solid #ccc, margin ke 20px, dan padding ke 10px.

Coba sendiri

<html>
<head>
    <title>What is Responsive Design?</title>
    <style>
        /* Write CSS rules here */
    </style>
</head>
<body>
    <h1>Mount Everest: The World's Highest Peak</h1>
    <p>Mount Everest, standing at 8,848.86 meters (29,031.7 feet), is the tallest mountain on Earth. Located in the Himalayas on the border between Nepal and Tibet, it attracts climbers from around the world. Scaling Everest is a challenging journey due to its extreme weather, thin air, and rough terrain.</p>
    
    <div class="container">
        <h3>Fixed Height (Distorted)</h3>
        <img class="fixed-height" src="https://upload.wikimedia.org/wikipedia/commons/e/e7/Everest_North_Face_toward_Base_Camp_Tibet_Luca_Galuzzi_2006.jpg" alt="Distorted Image">
    </div>
    
    <div class="container">
        <h3>Auto Height (Preserved Aspect Ratio)</h3>
        <img class="auto-height" src="https://upload.wikimedia.org/wikipedia/commons/e/e7/Everest_North_Face_toward_Base_Camp_Tibet_Luca_Galuzzi_2006.jpg" alt="Proper Ratio Image">
    </div>
</body>
</html>