CSS media screen

Sebelumnya saya belum pernah sharing yang berhubungan dengan mobile system namun kini saya sadar bahwa mobile juga membutuhkan metode khusus untuk bagaimana cara agar elemen pada website terlihat proporsional dan dapat di render secara proper.

Berkaitan dengan mobile tentu anda pernah membaca atau mendengar yang nama nya media query ? ya media query adalah kode css yang bersifat khusus yang hanya tampil pada ukuran jendela tertentu yaitu apabila kita memiliki perangkat handphone dengan layar 800x400 maka pada media query akan tampil hanya pada ukuran tersebut dengan menyisipkan max-width.

untuk penulisan ada beberapa tipe yaitu device-width , max-device-width , min-device-width , min-width , max-width , orientation dan penambahan and dan only serta screen.

pada pennulisan @media secara Global maka anda tidak perlu menggunakan only.
sebagai contoh :

@media (max-width:800px){...}

atau

@media screen and (max-width:800px){...}

Media query di atas akan berjalan apabila layar cocok dengan ukuran media query seperti yang telah di tentukan. Sebaliknya jika tidak maka akan kembali seperi normal dan begitu pun seterus nya apabila layar mencapai lebih dari 800 maka kode akan tetap di terapkan. Jadi anda tidak perlu menggunakan !important flag lagi jika menggunakan media query kecuali jika css default menggunakan nya.

anda juga dapat memberi tahu layar minimal pada browser dengan menambahkan min-width.

@media screen and (min-width:300px) and (max-width:800px){...}

kode di atas menjelaskan ada nya penambahan and sangat penting untuk pada setiap tanda kurung, apabila salah maka tidak berjalan dengan semestinya.
contoh penulisan yang salah :

@media screen and(min-width:300px)and(max-width:800px){...}

jika anda menambahkan only maka browser jadul akan menyembunyikan kode tersebut biasa nya berlaku pada iPad dan Android.
contoh :

@media only screen and (max-width:800px){...}

untuk cara penulisan yang hanya tampil pada smartphone anda dapat menggunakan device-width , orientation , min-device-width dan max-device-width berfungsi pada iPad untuk Android saya kurang yakin dan pastikan only juga anda tulis.
untuk layar 200px.

@media only screen and (device-width:600px){...}

untuk layar minimal 200px.

@media only screen and (min-device-width:200px){...}

untuk layar maksimal 800px.

@media only screen and (max-device-width:800px){...}

atau juga bisa denga memulai dari layar minimal sampai ke layar maksimal.

@media only screen and (min-device-width:200px) and (max-device-width:800px){...}

gunakan ukuran yang pas misal antara 680px atau 992px.
untuk memberitahu browser jika kode css berfungsi pada orientasi tertentu maka anda dapat menulis orientation:potrait dan orientation:landscape.
contoh pada layar kecil (Potrait) :

@media only screen and (min-device-width:200px) and (max-device-width:800px) and (orientation:potrait){...}

dan contoh pada layar penuh (Landscape) :

@media only screen and (min-device-width:200px) and (max-device-width:800px) and (orientation:landscape){...}

Namun ada beberapa hal yang perlu di perhatikan yaitu di beberapa browser versi jadul seperti IE-5 - IE-8 tidak dapat membaca @media.

Media query juga dapat di implementasikan pada tag link berguna bagi sobat yang menggunakan style dengan cdn external atau Biasa nya pada platform wordpress atau yang bertaraf self host sering menggunakan metode ini. berikut contoh penulisan media query pada link :

<link href="style.css" rel="stylesheet" type="text/css" media="only screen and (min-width: 0px) and (max-width: 800px)" >

mungkin itu saja yang dapat saya bagikan atas apa yang sudah saya pelajari dan selalu utamakan bertanya apabila ada poin yang jika anda rasa kurang dapat dipahami.
dan artikel hari ini saya cukupkan.

Go to Link