CSS Media Query

Daftar isi:

@media Query

Apa itu media query ?
Media query adalah sebuah teknik atau metode pengaturan gaya atau CSS.

Yaitu untuk menyesuaikan tampilan suatu halaman website agar tetap tertata rapi & tersesuai di berbagai ukuran layar perangkat.

Penyesuaian tersebut memerlukan gaya atau style yang berbeda dengan cara memilah CSS menggunakan media query

Terlebih lagi kebanyakan website saat ini yang mayoritas penggunanya adalah pengguna perangkat mobile / smartphone yang mana ukuran layar perangkat mobile ini sangat berfariasi sehingga sangat penting untuk mengubah-suaikan gaya tampilan halaman web nya.

Ukuran layar media Media Query :

Perangkat layar lebar misal smarttv atau laptop

@media (max-width: 3000px)
@media (max-width: 1366px)

Perangkat layar menengah seperti tablet atau ponsel dengan mode landscape.

@media (max-width: 1024px)
@media (max-width: 992px)
@media (max-width: 880px)
@media (max-width: 768px)
@media (max-width: 600px)

Perangkat mobile layar kecil atau dalam mode potrait.

@media (max-width: 480px)
@media (max-width: 320px)
@media (max-width: 240px)

Batasan lebar ukuran layar media.

Membuat media query dalam CSS dan batasannya berdasarkan lebar layar.

(min-width:--)(max-width:--)

<html>
<head>
<style>
/* ==== CSS UTAMA DISINI =====*/
body {
........
}
/* ==== RESPONSIVE DENGAN MEDIA QUERIES =====*/
@media (min-width: 3000px){ /* CSS styles */}
@media (min-width: 1024px) and (max-width: 1366px){ /* CSS styles */}
@media (min-width: 993px) and (max-width: 1024px){ /* CSS styles */}
@media (min-width: 881px) and (max-width: 992px){ /* CSS styles */}
@media (min-width: 769px) and (max-width: 880px){ /* CSS styles */}
@media (min-width: 601px) and (max-width: 768px){ /* CSS styles */}
@media (min-width: 481px) and (max-width: 600px){ /* CSS styles */}
@media (min-width: 321px) and (max-width: 480px){ /* CSS styles */}
@media (min-width: 241px) and (max-width: 320px){ /* CSS styles */}
@media (max-width: 240px){ /* CSS styles */}

</style> 

      </head> 
<body> 
.... 

      </body> 
</html>

Tips membuat css media query

Penulisan :

Berdasarkan pengalaman membuat css media queri di template Blogger, penulisannya bisa dengan beberapa frase berbeda namun tetap memberi pengaruh pada tampilan.
Dalam template HTML Blogger sering didapati penulisan seperti ini :
@media (max-width:--px)

atau ditambah screen seperti ini :
@media screen (max-width:--px)

Sedangkan dari referensi di situs lainnya ada juga yang penulisannya sangat spesifik seperti ini :
@media only screen and (max-width:--px)

Untuk penulisan batas min-width dan max-width
@media (min-width:--px)(max-width:--px)
atau
@media screen (min-width:--px) and (max-width:--px)
atau bisa juga secara lengkap :
@media only screen and (min-width:--px) and (max-width:--px)

Contoh :

Misalkan batas lebar maksimal layar terkecil dibuat mulai dari 600px, penulisannya:
@media (max-width: 600px){ /*-- kode css --*/ } ,
maka elemen yang "dipanggil" dalam css media query ini akan mencakup ukuran lebar layar mulai dari 0px hingga 600px.

ilustrasi>

`@media 0px - 600px`
Judul Blog
Post body Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque tincidunt purus et tortor interdum bibendum. In dictum nec odio eu malesuada. Fusce mattis bibendum efficitur. Nunc quis posuere arcu. Etiam in tempus nulla. Quisque ac sollicitudin sapien, gravida volutpat lorem. Integer augue lorem, gravida a congue sit amet, scelerisque condimentum metus..
Bilah sisi kiri menu menu
Bilah sisi kanan menu menu
Hakcipta@2022

Oleh sebab pengaturan css ini hanya sampai batas maksimal max-width: 600px tersebut,
Maka sisa layar diatas 600px ^{(mulai 601px keatas)} tidak akan terpengaruh.
Sehingga jika dibutuhkan maka harus membuat css media query lanjutannya untuk mengatur lebar layar yang tersisa mulai 601px keatas.

Penulisan css media query lanjutan

Penulisannya sebagai berikut :

@media screen (min-width: 601px){
/*-- kode css --*/
}

Ditulis mulai minimal dari 601px. Dan css lanjutan ini secara otomatis memberi pengaruh hingga batas maksimal (max-width) layar terlebarnya.

Batas layar terlebar (max-width) secara otomatis tersetting meski tidak dituliskan cssnya.
Hal ini tergantung dari perangkat yang digunakan untuk membuka halaman tersebut.
Misal dibuka dengan tablet 7" maka batas maksimal lebar layarnya sekitar 1024px atau
jika dibuka dengan laptop ukuran 11.6" maka batas maksimal lebar layarnya sekitar 1366px, dst.

Penulisan css media query batas akhir

(max-width:--px)

Misal menentukan batas maksimal lebar layar hanya hingga 1366px (ukuran layar laptop 11.6")
Penulisan :
@media screen (max-width: 1366px){ /*-- kode css --*/ }
Perlu diperhatikan bahwa penulisan diatas akan mencakup nilai lebar layar mulai dari 0px.
Jika elemen yang ingin diatur