CSS RWD - Media Queries
Selamat datang, para pengembang web yang sedang mencari ilmu! Hari ini, kita akan melompat ke dunia yang menarik Desain Web Responsif (RWD) dan fokuskan pada salah satu alat paling kuatnya: Media Queries. Bayangkan Anda membuat sebuah lukisan yang indah, tapi harus terlihat bagus baik di kartu pos kecil maupun papan iklan besar. Itu persis apa yang kita lakukan dengan website, dan media queries adalah kuas magis kita!
apa itu Media Queries?
Media queries adalah seperti kameleon di dunia CSS. Mereka memungkinkan website Anda untuk menyesuaikan dan mengubah penampilannya berdasarkan perangkat yang digunakan untuk melihatnya. Apakah itu smartphone, tablet, atau komputer desktop, 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, catkan latar belakang menjadi biru muda!" Itu seperti memberikan website Anda penampilan yang dingin dan segar di layar yang lebih kecil.
CSS RWD Media Query - Properti width
Properti width adalah teman terbaik kita saat membuat desain responsif. Ini memungkinkan kita untuk menentukan gaya yang berbeda berdasarkan lebar layar perangkat.
Mari lihat contoh yang lebih lengkap:
/* Gaya default untuk layar yang lebih 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:
- Secara default, kontainer kita 80% lebar dengan margin di sisi-sisi.
- Ketika layar menyusut ke 768px atau kurang, kita meningkatkan lebar menjadi 95%.
- Pada layar yang sangat kecil (480px atau kurang), kita membuat kontainer penuh lebar.
Itu seperti website Anda melakukan yoga, meransel dan meregangkan untuk memasak layar mana saja!
CSS RWD Media Query - Beberapa Breakpoint
Sekarang, mari bicarakan tentang breakpoints. Ini adalah titik di mana tata letak website Anda akan berubah untuk memberikan pengalaman pengguna yang terbaik. Pensekannya sebagai "titik patah" di mana desain Anda perlu beradaptasi.
Ini adalah 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 menyesuaikan ukuran font berdasarkan ukuran layar:
- Pada layar besar (1200px dan keatas), kita menaikkan ukuran font menjadi 18px.
- Untuk layar sedang (antara 992px dan 1199px), kita gunakan ukuran font 17px.
- Pada layar kecil (991px dan kebawah), kita menjauhkan sedikit ukuran font ke 15px.
Itu seperti memiliki pakaian responsif yang selalu pas, tanpa peduli berapa banyak Anda makan!
CSS RWD Media Query - Menggunakan Orientasi
Tahukah Anda bahwa website Anda dapat mengetahui jika perangkat dipegang secara vertikal atau horizontal? Benar, dan kita dapat menggunakan informasi ini untuk membuat desain yang lebih ditujukan.
Ini adalah cara kita 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 penuh lebar dan menghapus floatnya.
- Dalam mode landscape, kita membuat tata letak sejajar dengan sidebar menduduki 25% lebar.
Itu seperti website Anda melakukan akrobatik, melompat 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 ekstra 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 dapat membuat desain yang sepenuhnya responsif yang menyesuaikan dengan berbagai ukuran layar dan orientasi. Kita menyesuaikan ukuran font, lebar kontainer, dan bahkan tata letak berdasarkan karakteristik perangkat.
Kesimpulan
Selamat! Anda baru saja 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 tanpa peduli bentuknya.
Saat Anda berlatih dan mencoba media queries, Anda akan mengembangkan intuisi untuk membuat desain yang bekerja mulus di semua perangkat. Terus eksplorasi, terus kode, dan terutama, bersenang-senang! Website Anda akan berterima kasih dengan terlihat indah di mana saja mereka pergi.
| Metode | Deskripsi |
|---|---|
@media screen |
Menargetkan semua jenis layar |
max-width |
Menentukan kondisi lebar maksimum |
min-width |
Menentukan kondisi 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