Hallo teman-teman, balik lagi pada tutorial dumet school, pada tutorial kali ini kita akan belajar tentang bagaimana Cara Menggunakan Properties Max-width Pada @Media Query CSS fungsi dari media query sendiri adalah untuk menentukan keadaan suatu element html pada saat ukuran yang telah kita tentukan.

Nah biasanya media query ini digunakan untuk membuat halaman yang responsive tanpa menggunakan framework CSS seperti bootstrap dan teman-temannya.
Oke mungkin kita langsung saja praktek, teman-teman silahkan buat sebuah file html dan ketikan script berikut :

Saya membuat sebuah element h1 didalam body ini hanya untuk contoh saja, nanti konsepnya kita akan membuat element yang satu ini menghilang pada ukuran tertentu.

Jika sudah silahkan teman-teman ketikan script CSS berikut :

Nah script di atas saya membuat ukuran max width dengan media query itu berarti membutuhkan layar  diatas width 700px untuk menampilkan element h1 tersebut karena didalamnya saya membuat pengaturan h1 display none, jadi dengan pengaturan seperti ini element h1 tidak akan tampil ketika di kondisi layar dibawah 700px.

Jika di-save maka hasilnya akan seperti berikut :

C

re

Oke cukup sekian tutorial kali ini, semoga bermanfaat, terimakasih.