CSS RWD - Media Queries

Selamat datang, para pengembang web yang sedang berkembang! Hari ini, kita akan mendalami dunia yang menarik dari Reponsive Web Design (RWD) dan fokuskan pada salah satu alatnya yang paling kuat: Media Queries. Bayangkan Anda membuat sebuah lukisan yang indah, tapi harus terlihat bagus baik di kartu pos kecil maupun papan iklan besar. Itu tepatnya apa yang kita lakukan dengan website, dan media queries adalah kuas sihir kita!

Apa Itu Media Queries?

Media queries adalah seperti kameleon di dunia CSS. Mereka memungkinkan website Anda untuk beradaptasi dan mengubah penampilannya berdasarkan perangkat yang digunakan untuk melihatnya. Apakah itu smartphone, tablet, atau komputer destop, media queries membantu memastikan situs Anda terlihat fantastis di mana saja.

mari mulai dengan contoh dasar:

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

Dalam kode ini, kita mengatakan, "Hey browser, jika lebar layar adalah 600 pixel atau kurang, cat latar belakang menjadi biru muda!" Itu seperti memberikan website Anda penampilan yang dingin dan segar di layar kecil.

CSS RWD Media Query - Properti width

Properti width adalah teman terbaik kita saat membuat desain responsif. Itu memungkinkan kita untuk menetapkan gaya yang berbeda berdasarkan lebar layar perangkat.

mari lihat contoh yang lebih lengkap:

/* Gaya default untuk layar yang besar */
.container {
width: 80%;
margin: 0 auto;
}

/* Gaya untuk layar 768px dan lebih kecil */
@media screen and (max-width: 768px) {
.container {
width: 95%;
}
}

/* Gaya untuk layar 480px dan lebih kecil */
@media screen and (max-width: 480px) {
.container {
width: 100%;
}
}

Ini apa yang terjadi:

1. Secara default, kontainer kita 80% lebar dengan sedikit margin di sisi-sisi.
2. Ketika layar menyusut ke 768px atau kurang, kita meningkatkan lebar menjadi 95%.
3. Pada layar yang sangat kecil (480px atau kurang), kita membuat kontainer full-width.

Itu seperti website Anda melakukan yoga, melentur dan mengecilkan diri untuk memenuhi layar mana saja!

CSS RWD Media Query - Beberapa Breakpoint

Sekarang, mari bicarakan tentang breakpoints. Ini adalah titik tempat tata letak website Anda akan berubah untuk memberikan pengalaman pengguna yang terbaik. Picturlah mereka sebagai "titik patah" di mana desain Anda perlu beradaptasi.

mari lihat contoh menggunakan beberapa breakpoint:

/* Gaya dasar */
body {
font-size: 16px;
}

/* Layar besar */
@media screen and (min-width: 1200px) {
body {
font-size: 18px;
}
}

/* Layar sedang */
@media screen and (min-width: 992px) and (max-width: 1199px) {
body {
font-size: 17px;
}
}

/* Layar kecil */
@media screen and (max-width: 991px) {
body {
font-size: 15px;
}
}

Dalam contoh ini, kita mengatur ukuran font berdasarkan ukuran layar:

• Pada layar besar (1200px dan di atas), kita menaikkan ukuran font ke 18px.
• Untuk layar sedang (antara 992px dan 1199px), kita gunakan ukuran font 17px.
• Pada layar kecil (991px dan di bawah), kita secara kecil mengurangi ukuran font ke 15px.

Itu seperti memiliki lemari pakaian responsif yang selalu pas, tanpa menghiraukan berapa banyak Anda makan!

CSS RWD Media Query - Menggunakan Orientasi

Tahu Anda bahwa website Anda bisa mengenali jika perangkat dipegang secara vertikal atau horizontal? Benar, dan kita bisa menggunakan informasi ini untuk membuat desain yang lebih khusus.

mari lihat bagaimana kita bisa menggunakan fitur orientasi:

/* Gaya untuk orientasi potret */
@media screen and (orientation: portrait) {
.sidebar {
width: 100%;
float: none;
}
.main-content {
margin-left: 0;
}
}

/* Gaya untuk orientasi landscape */
@media screen and (orientation: landscape) {
.sidebar {
width: 25%;
float: left;
}
.main-content {
margin-left: 26%;
}
}

Dalam contoh ini:

• Ketika perangkat dalam mode potret (lebih tinggi daripada lebar), kita membuat sidebar full-width dan menghapus floatnya.
• Dalam mode landscape, kita membuat tata letak side-by-side dengan sidebar memakai 25% lebar.

Itu seperti website Anda melakukan akrobatik, berubah antara potret dan landscape dengan gaya!

Menggabungkan Semua

Sekarang kita telah menutupi dasar-dasar, mari lihat contoh yang lebih kompleks yang menggabungkan semua yang kita pelajari:

/* Gaya dasar */
body {
font-family: Arial, sans-serif;
line-height: 1.6;
color: #333;
}

.container {
width: 80%;
margin: 0 auto;
}

/* Layar besar */
@media screen and (min-width: 1200px) {
body {
font-size: 18px;
}
.container {
max-width: 1140px;
}
}

/* Layar sedang */
@media screen and (min-width: 992px) and (max-width: 1199px) {
body {
font-size: 17px;
}
.container {
max-width: 960px;
}
}

/* Layar kecil */
@media screen and (max-width: 991px) {
body {
font-size: 16px;
}
.container {
width: 95%;
}
}

/* Layar sangat kecil */
@media screen and (max-width: 576px) {
body {
font-size: 15px;
}
.container {
width: 100%;
padding: 0 15px;
}
}

/* Orientasi landscape */
@media screen and (orientation: landscape) and (max-height: 500px) {
.header {
position: static;
}
.main-content {
margin-top: 20px;
}
}

Contoh lengkap ini menunjukkan bagaimana kita bisa membuat desain yang sepenuhnya responsif yang menyesuaikan berbagai ukuran layar dan orientasi perangkat. Kita mengatur ukuran font, lebar kontainer, dan bahkan tata letak berdasarkan karakteristik perangkat.

Kesimpulan

Selamat! Anda telah mengambil langkah pertama ke dunia desain web responsif dengan media queries. Ingat, membuat website responsif adalah seperti menjadi seorang shapeshifter digital – konten Anda harus terlihat bagus tidak matterapakah bentuknya.

Saat Anda berlatih dan mencoba media queries, Anda akan mengembangkan kepekaan untuk membuat desain yang bekerja secara mulus di semua perangkat. Terus eksplorasi, terus coding, dan terutama, bersenang-senang! Website Anda akan berterima kasih dengan penampilan yang indah di mana saja mereka pergi.

Metode	Deskripsi
@media screen	Menargetkan semua jenis layar
max-width	Menetapkan syarat lebar maksimum
min-width	Menetapkan syarat lebar minimum
orientation: portrait	Menargetkan perangkat dalam mode potret
orientation: landscape	Menargetkan perangkat dalam mode landscape

Selamat coding, dan semoga website Anda selalu responsif!

Credits: Image by storyset