Ditulis oleh: Ditulis pada: 8/15/2019
Penggunaan Media Query Pada HTML - Ini bisa berfungsi untuk mengatur element pada HTML agar tampil pada query atau lebar layar tertentu sehingga elemen yang ditampilkan bisa sesuai dengan perangkat yang digunakan.
Penggunaan media query pada HTML ini berguna untuk menampilkan elemen yang memiliki ukuran yang sudah ditentukan sehingga elemen bisa ditampilkan di setiap layar dengan ukuran yang disesuaikan.
Salah satunya untuk iklan Adsense untuk AMP. Adsense memberikan kode iklan untuk AMP seperti berikut ini:
<amp-ad width="100vw" height=320
type="adsense"
data-ad-client="ca-pub-xxxxxxxxxxxxxx"
data-ad-slot="xxxxxxxx"
data-auto-format="rspv"
data-full-width>
<div overflow></div>
</amp-ad>Jika kode tersebut langsung diterapkan di blog, maka ketika blog diakses dengan perangkat desktop, iklan tampil blank dan menampilkan ruang kosong yang cukup besar dan merusak layout blog.
Itu karena pada kode tersebut menggunakan width="100vw" sehingga lebar tersebut akan sesuai dengan lebar layar (satuan vw = view width).
Itu karena memang kode iklan Adsense untuk AMP disediakan untuk perangkat mobile sehingga iklan tampil full pada lebar layar ponsel, sehingga tidak cocok untuk desktop.
Nah, agar iklan AMP juga bisa ditampilkan di desktop, maka kita bisa menggunakan media query pada kode HTML amp-ad.
Kita bisa menggunakan 2 kode iklan AMP dengan media query, satu iklan ditampilkan untuk lebar desktop dan satu lagi ditampilkan untuk lebar mobile.
<amp-ad data-ad-client='ca-pub-xxxxxxxxxxxxxx' data-ad-slot='xxxxxxxx' height='100' layout='fixed-height' media='(min-width: 737px)' type='adsense'>
</amp-ad>
<amp-ad data-ad-client='ca-pub-xxxxxxxxxxxxxx' data-ad-slot='xxxxxxxx' data-auto-format='rspv' data-full-width='' height='320' media='(max-width: 736px)' type='adsense' width='100vw'>
<div overflow=''/>
</amp-ad>Kode yang atas akan tampil pada layar dengan lebar minimal sampai 737px. Kemudia kode yang bawahnya akan tampil pada layar dengan lebar maksimal 736px.
Kode yang tampil pada layar dengan lebar minimal sampai 737px ini menggunakan ukuran responsive mengikuti layout blog dengan tinggi tetap. Tapi bisa juga dengan iklan yang ditentukan ukurannya, misal: 300x250 atau 336x280.
Media query ini bisa juga digunakan pada element lainnya seperti pada amp-iframe, amp-addthis, dan lainnya.
Media ini juga bisa menggunakan minimal dan maksimal width yang digabungkan sehingga hanya tampil pada lebar tertentu saja.
<amp-iframe src='.........' frameborder='0' height='340' layout='fixed-height' media='(max-width:1024px) and (min-width:801px)' sandbox='allow-scripts allow-same-origin allow-modals allow-popups' scrolling='no'>
</amp-iframe>amp-iframe di atas akan tampil pada lebar layar 1024px sampai 801px. Jika Anda pengguna Kompi Flexibel AMP v4, maka akan menemukan kode amp-iframe untuk related post lebih dari satu karena disesuaikan dengan tampilan dan lebar device-nya.
Penggunaan media query pada HTML seperti ini lebih tepat daripada menggunakan tag conditional karena tidak tergantung pada parameter URL namun pada lebar yang ditentukan.
Berikut saya buatkan video penjelasan untuk penggunaan media query pada html secara audio visual agar bisa lebih dimengerti.
Semoga bermanfaat.