DISKON TERBATAS! Masukkan kupon "skillbaru" saat checkout di kelas apa saja

Logo Koala Skodev mengetik

Skodev

Belajar coding dalam bahasa Indonesia

CARA MENGGUNAKAN MEDIA QUERY CSS

Panduan langkah-langkah tentang cara menggunakan media query CSS untuk membuat situs web yang responsif dan dapat beradaptasi dengan berbagai ukuran layar.

Daftar Isi:

Membuat Media Query
Memahami Media Features
Mengetest Media Query

Media Query adalah fitur penting dalam CSS yang memungkinkan konten web menyesuaikan tampilannya tergantung pada karakteristik peranti, seperti ukuran layar, resolusi atau orientasi. Dalam artikel ini, kita akan membahas bagaimana menggunakan media query CSS dengan cara yang efektif dan efisien.

Sebelum kita mulai, pastikan kamu sudah familiar dengan konsep dasar CSS dan memiliki pemahaman dasar tentang layout web.

Membuat Media Query

Media Query dapat dibuat dalam CSS dengan menggunakan perintah @media. Setelahnya, kamu harus mengisi kondisi tertentu, dan jika kondisi tersebut memenuhi syarat, CSS di dalam blok tersebut akan diterapkan.

Berikut adalah contoh media query yang akan menerapkan gaya CSS jika lebar viewport kurang dari atau sama dengan 600px:

@media only screen and (max-width: 600px) {
  body {
    background-color: lightblue;
  }
}

Memahami Media Features

Media features adalah karakteristik dari peranti output yang bisa kita gunakan dalam media query. Ada banyak media features yang bisa digunakan, beberapa di antaranya adalah:

width dan height

width dan height mengacu pada lebar dan tinggi dari viewport. Ini biasa digunakan untuk mengatur tampilan web di peranti dengan layar yang berbeda-beda.

Contoh penggunaannya:

@media (min-width: 720px) {
  .container {
    width: 700px;
  }
}

orientation

orientation digunakan untuk mendeteksi orientasi layar. Nilai dari orientation ini bisa landscape (layar lebar) atau portrait (layar tegak).

Contoh penggunaannya:

@media (orientation: portrait) {
  body {
    font-size: 1.2em;
  }
}

Jangan takut untuk bereksperimen dengan media features yang berbeda-beda sesuai kebutuhan desain dan fungsi web kamu.

Mengetest Media Query

Untuk menguji apakah media query kamu sudah bekerja atau belum, kamu bisa menggunakan browser modern yang sudah mendukung fitur pengembangan seperti Google Chrome atau Firefox. Kamu bisa merubah ukuran layar, orientasi, dan resolusi pada fitur pengembangan ini untuk melihat bagaimana web kamu merespon.

Pada dasarnya, memahami dan mengimplementasikan media query adalah langkah penting untuk membuat web yang responsif dan ramah pengguna. Dengan berlatih dan bereksperimen, kamu akan semakin mahir dalam menggunakan media query CSS.


Daftar newsletter skodev masukkan emailmu untuk dapat informasi menarik dari dunia koding