Halo teman – teman, selamat datang kembali di website tips dan trik Dumet School. Pada kesempatan kali ini kita akan belajar tentang Memanfaatkan Fungsi @media Pada Bootstrap, sebelum kita jauh melangkah kita bahas terlebih dahulu. Apa itu fungsi @media pada css..??
Ya, fungsi @media pada css lebih mengarah kepada perubahasn setiap tampilan browser. Yang artinya, kita bisa bebas menentukan pengaturan tampilan website supaya menjadi responsive. Pada umumnya dengan menggunakan framework bootstrap ekan menjadikan tampilan website kita menjadi responsive namun untuk lebih detilnya kita juga harus bisa custom sendiri agar tampilan yang di hasilkan lebih sempurna. Contoh kecil nya adalah margin dan padding, pada tampilan desktop padding mempunyai nilai 20px namun pada tampilan tertentu padding secara default 20px pengaruh dari tampilan desktop dan pada saat tampilan tablet maupun mobile hasilnya berbeda. Dan kita harus mensetting di semua tampilan, tips kali ini saya harap bisa memudahkan teman – teman dalam set di semua tampilan denga fungsi @media.
Lanjut pada tips tentang Memanfaatkan Fungsi @media Pada Bootstrap, di bawah ini saya mempunyai contoh sebuah website dengan tampilan desktop
Pada saat tampilan tablet ukurannya margin nya berbeda
Bisa teman – teman lihat pada gambar di atas ini. hasil nya berbeda dengan tampilan desktop dan tablet karena pada saat tampilan desktop saya memberikan margin-top sebanyak 30 px dan pada saat tampilan tablet margin tetap memiliki margin-top 30px all hasil berpengaruh di tampilan tablet. Nah untuk mensetting teman – teman perlu menggunkan fungsi @media dengan cara
Menentukan tampilan dari beberapa ukuran, contoh disini saya mereset margin-top agar terlihat rapi
@media (min-width: 768px) and (max-width: 1024px){
#searchform{margin-top: 5px}
}
Dengan begitu pada saat tampilan tablet margin-top saya setting menjadi 5px, sehingga akan mendapatkan hasil yang maksiimal
Trik ini perlu di miliki oleh seorang web design, agar menghasilkan tampilan website yang bagus.
Baik, sekian pada artikel kali ini tentang Memanfaatkan Fungsi @media Pada Bootstrap kita berjumpa kembali pada artikel yang akan datang. Tips kali ini teman – teman coba sendiri supaya lebih paham untuk pemanfaatan fungsi @media pada bootstrap. Terimakasih dan sampai jumpa.
Semoga bermanfaat