Selasa, 07 Juni 2016

Menampilkan elemen saat diakses smartphone


Maksud dari judul yang gak jelas diatas adalah menampilkan suatu elemen hanya pada saat blog atau website kita dikunjungi lewat smartphone, jadi pada saat dipc elemen tersebut tidak akan muncul.

Cara ini cukup mudah karena hanya bermodalkan css saja jadi tidak begitu rumit. Tujuan saya membuat ini untuk menampilkan elemen yang berbeda, jadi ketika diakses di pc elemen A akan muncul dan ketika diakses melalui smartphone Elemen B akan muncul dan si elemen A akan hilang.

Contoh Tampilan Browser atau PC


Tampilan PC

Contoh Tampilan Hp atau browser ukuran kecil


Tampilan HP

Pengaturan CSS


Untuk elemen yang ingin anda tampilkan dihp atau smartphone Pastikan pada css defaultnya atau css yang bukan media query beri nilai display:none kemudian pada css Media Querynya beri nilai display: inline agar saat web/blog diakses lewat smartphone elemen yang ingin anda tampilkan bisa tampil dan elemen yang tampil di pc akan hilang, Untuk lebih jelas segera klik tombol contoh dan lihat source kode atau sumber kode. SILAHKAN PERKECIL DAN PERBESAR WINDOW BROWSER ANDA PADA HALAMAN CONTOH
CONTOH