Tutorial Dasar CSS: Responsif dan Media Queries

Pada tutorial ini kita akan belajar dasar CSS tentang Responsif dan Media Queries. Responsif dalam desain web mengacu pada kemampuan sebuah laman web untuk menyesuaikan tampilannya dengan berbagai ukuran layar dan perangkat, mulai dari layar komputer desktop hingga smartphone. Dalam era di mana berbagai perangkat digunakan untuk mengakses konten web, responsivitas sangat penting untuk memberikan pengalaman pengguna yang optimal.

Media Queries adalah alat penting dalam CSS yang memungkinkan kita untuk menerapkan aturan style yang berbeda tergantung pada karakteristik layar, seperti lebar layar dan orientasi perangkat (potret atau lanskap). Dengan media queries, kita dapat merancang tampilan yang berubah secara dinamis sesuai dengan ukuran layar, sehingga konten tetap mudah dibaca dan navigasi tetap intuitif di berbagai perangkat.

Penggunaan Media Queries

Media Queries memungkinkan kita untuk mengaplikasikan style CSS yang berbeda berdasarkan kondisi yang ditentukan. Ini memungkinkan Anda untuk membuat tampilan yang responsif pada berbagai jenis perangkat dan ukuran layar. Untuk menggunakan media queries, Anda perlu menggunakan aturan @media di dalam file CSS Anda.

Contoh penggunaan media queries dalam CSS:

/* Style umum yang untuk semua ukuran layar */
body {
    font-size: 16px;
}

/* Style khusus untuk layar dengan lebar maksimum 768px */
@media (max-width: 768px) {
    body {
        font-size: 14px;
    }
}

/* Style umum yang untuk semua ukuran layar */

body {

font-size: 16px;

}

/* Style khusus untuk layar dengan lebar maksimum 768px */

@media (max-width: 768px) {

body {

font-size: 14px;

}

Pada contoh di atas, media queries digunakan untuk menentukan ukuran font pada body untuk semua ukuran layar adalah 16px. Kemudian untuk layar dengan ukuran lebar maksimum 768, maka secara otomatis font pada body akan berubah ukurannya menjadi 16px.

Penggunaan Layout Responsif

Membuat layout responsif melibatkan perancangan tata letak yang dapat menyesuaikan diri dengan ukuran layar yang berbeda. Beberapa pendekatan umum untuk mencapai hal ini adalah:

Fluid Grid: Membuat grid yang dapat merespons perubahan ukuran layar. Kita dapat menggunakan persentase daripada nilai tetap untuk mengatur lebar kolom, sehingga kolom akan merespons perubahan ukuran layar.
Flexible Images: Menggunakan CSS untuk mengontrol ukuran gambar agar dapat beradaptasi dengan lebar layar. Ini biasanya dilakukan dengan menggunakan nilai maksimum lebar gambar sebesar 100%.
Media Queries: Menggunakan media queries untuk mengatur tata letak dan gaya berdasarkan ukuran layar. Misalnya, kita dapat mengubah posisi elemen atau ukuran font pada layar yang kecil.

Mengatur Tampilan pada Perangkat Berbeda

Ketika merancang tampilan responsif, penting untuk mempertimbangkan perangkat yang berbeda, seperti desktop, tablet, dan smartphone. Beberapa langkah yang dapat Anda lakukan:

Mobile-First Approach: Mulailah dengan merancang tampilan untuk perangkat dengan layar kecil terlebih dahulu, kemudian tingkatkan tampilan untuk layar yang lebih besar. Ini memastikan tampilan sederhana dan fungsional pada semua perangkat.
Breakpoints: Identifikasi titik-titik di mana tampilan perlu diubah. Ini sering kali berkaitan dengan perubahan besar dalam ukuran layar, seperti dari smartphone ke tablet atau dari tablet ke desktop. Gunakan media queries untuk mengatur perubahan gaya pada breakpoint tertentu.
Testing: Selalu uji tampilan responsif Anda pada berbagai perangkat dan ukuran layar untuk memastikan bahwa tampilan bekerja dengan baik di semua situasi.

Contoh Penerapan Responsif dan Media Queries

Untuk mempraktekkan penerapan responsif dan media queries, ikuti beberapa langkah berikut:

Buat file dengan nama latihan_css_005.html kemudian isi dengan kode html berikut:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Contoh Halaman Web dengan Box Model dan Layouting</title>
    <link rel="stylesheet" href="assets/css/style_responsif.css">
</head>
<body>
    <header>
        <h1>Contoh Halaman Web dengan Box Model dan Layouting</h1>
    </header>
    <nav>
        <a href="#">Beranda</a>
        <a href="#">Tentang Kami</a>
        <a href="#">Layanan</a>
        <a href="#">Kontak</a>
    </nav>
    <div class="container">
        <div class="main-content">
            <h2>Selamat Datang di KelasRingan.Com</h2>
            <img class="image" src="assets/img/gambar.jpg" alt="Gambar Contoh">
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Amet, enim sunt. Voluptatem 
                praesentium minima dicta, et ipsa perspiciatis similique nulla soluta voluptate 
                quas repudiandae aperiam deserunt, temporibus laudantium qui molestias fugit sed 
                placeat quasi! Ex, delectus omnis iure porro impedit accusamus rem veritatis nemo 
                esse accusantium aliquid tenetur assumenda vero asperiores! Impedit sequi 
                voluptates velit? Facilis ut molestias dicta perferendis!</p>
            <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Et, distinctio numquam 
                corrupti, exercitationem, voluptas illo harum impedit aut modi ad pariatur beatae 
                rem qui reprehenderit a veniam iusto nihil maxime velit nemo quidem. Sapiente porro 
                ducimus non, voluptatem voluptates explicabo incidunt. Provident temporibus 
                possimus nesciunt, deserunt quae vitae unde eligendi ex fugit odit esse suscipit 
                quod, quas in minima. Ipsam dolore dolorem tenetur id repellendus minus omnis 
                explicabo voluptate, odit fugit numquam aliquid minima molestias exercitationem? 
                Minus alias doloremque modi.</p>
        </div>
        <div class="sidebar">
            <h3>Sidebar</h3>
            <p>Ini adalah sidebar dengan konten tambahan.</p>
        </div>
    </div>
    <footer>
        <p>Copyright &copy; 2023 KelasRingan.Com</p>
    </footer>
</body>
</html>

<!DOCTYPE html>

<head>

<title>Contoh Halaman Web dengan Box Model dan Layouting</title>

</head>

<body>

<h1>Contoh Halaman Web dengan Box Model dan Layouting</h1>

</header>

<nav>

<a href="#">Beranda</a>

<a href="#">Tentang Kami</a>

<a href="#">Layanan</a>

<a href="#">Kontak</a>

</nav>

<h2>Selamat Datang di KelasRingan.Com</h2>

<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Amet, enim sunt. Voluptatem

praesentium minima dicta, et ipsa perspiciatis similique nulla soluta voluptate

quas repudiandae aperiam deserunt, temporibus laudantium qui molestias fugit sed

placeat quasi! Ex, delectus omnis iure porro impedit accusamus rem veritatis nemo

esse accusantium aliquid tenetur assumenda vero asperiores! Impedit sequi

voluptates velit? Facilis ut molestias dicta perferendis!</p>

<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Et, distinctio numquam

corrupti, exercitationem, voluptas illo harum impedit aut modi ad pariatur beatae

rem qui reprehenderit a veniam iusto nihil maxime velit nemo quidem. Sapiente porro

ducimus non, voluptatem voluptates explicabo incidunt. Provident temporibus

possimus nesciunt, deserunt quae vitae unde eligendi ex fugit odit esse suscipit

quod, quas in minima. Ipsam dolore dolorem tenetur id repellendus minus omnis

explicabo voluptate, odit fugit numquam aliquid minima molestias exercitationem?

Minus alias doloremque modi.</p>

</div>

<h3>Sidebar</h3>

<p>Ini adalah sidebar dengan konten tambahan.</p>

</div>

</footer>

</body>

</html>

Selanjutnya buat file assets/css/style_responsif.css dan masukkan kode css berikut ini:

body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f2f2f2;
}

header {
    background-color: #333;
    color: white;
    text-align: center;
    padding: 10px;
}

nav {
    background-color: #444;
    color: white;
    text-align: center;
    padding: 10px;
}

nav a {
    text-decoration: none;
    color: white;
    margin: 0 10px;
}

.container {
    max-width: 1200px;
    margin: 20px auto;
    padding: 20px;
    background-color: white;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
    display: flex;
}

.main-content {
    flex: 70%;
    padding: 20px;
    background-color: #f9f9f9;
}

.sidebar {
    flex: 30%;
    padding: 20px;
    background-color: #e6e6e6;
}

.image {
    float: left;
    margin-right: 20px;
    max-width: 300px;
}

.image img {
    max-width: 100%;
    height: auto;
}

footer {
    clear: both;
    text-align: center;
    padding: 10px;
    background-color: #444;
    color: white;
}

/* Media Queries untuk tampilan responsif pada layar kecil */
@media (max-width: 768px) {
    .container {
        flex-direction: column;
    }
    
    .sidebar {
        flex: 100%; /* Menggunakan 100% lebar pada layar kecil */
        margin-top: 20px;
    }

    .image {
        float: none;
        margin: 0 auto 20px;
        max-width:100%;
    }
}

body {

font-family: Arial, sans-serif;

margin: 0;

padding: 0;

background-color: #f2f2f2;

}

header {

background-color: #333;

color: white;

text-align: center;

padding: 10px;

}

nav {

background-color: #444;

color: white;

text-align: center;

padding: 10px;

}

nav a {

text-decoration: none;

color: white;

margin: 0 10px;

}

.container {

max-width: 1200px;

margin: 20px auto;

padding: 20px;

background-color: white;

box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);

display: flex;

}

.main-content {

flex: 70%;

padding: 20px;

background-color: #f9f9f9;

}

.sidebar {

flex: 30%;

padding: 20px;

background-color: #e6e6e6;

}

.image {

float: left;

margin-right: 20px;

max-width: 300px;

}

.image img {

max-width: 100%;

height: auto;

}

footer {

clear: both;

text-align: center;

padding: 10px;

background-color: #444;

color: white;

}

/* Media Queries untuk tampilan responsif pada layar kecil */

@media (max-width: 768px) {

.container {

flex-direction: column;

}

.sidebar {

flex: 100%; /* Menggunakan 100% lebar pada layar kecil */

margin-top: 20px;

}

.image {

float: none;

margin: 0 auto 20px;

max-width:100%;

}

Hasil jika dijalankan pada layar lebar/desktop dan pada layar yang kecil (max lebar 768px)

Baik, pada tutorial ini, kita telah mempelajari tentang Responsif dan Media Queries dalam desain web. Responsif memungkinkan tampilan yang optimal di berbagai perangkat, sementara media queries memberi kita kendali untuk mengatur gaya berdasarkan ukuran layar. Dengan memahami dan menerapkan konsep ini, kita dapat menciptakan tampilan yang menarik dan fungsional di semua perangkat yang digunakan pengguna untuk mengakses laman web kita. Dengan pendekatan yang baik, kita akan memiliki situs web yang responsif dan siap menghadapi tantangan dari berbagai ukuran layar.

Untuk mendapatkan daftar Tutorial CSS dari Dasar, silahkan mengunjungi Index Tutorial CSS dari Dasar: Belajar CSS Dari Dasar.

Penggunaan Media Queries

Penggunaan Layout Responsif

Mengatur Tampilan pada Perangkat Berbeda

Contoh Penerapan Responsif dan Media Queries

Artikel Terkait

Tinggalkan Komentar Batalkan Balasan