HTML: Membuat Elemen Tidak Responsive Menjadi Responsive

Mengapa untuk tampilan sebuah website harus responsive? jawabannya tiada lain karena sekarang penikmat dunia maya tidak melulu menggunakan PC atau laptop, tapi sudah merambah ke perangkat smartphone.

Karena dimensi atau ukuran layar dari masing-masing perangkat yang digunakan, hadir lah istilah responsive untuk dunia persilatan dalam membuat website. Dimana dengan layout responsive, maka website Antum bisa dibuka melalui perangkat apa saja tanpa harus di zoom dahulu seperti hp jadul dahulu kala (udah jadul, pakai juga dahulu kala tuh, xixixi).

Bagi yang senang utak-atik layout website dan berkecimpung dalam dunia multimedia dimana websitenya sering menampilkan dari web lain atau juga mencantumkan video-video, mungkin tidak ada salahnya mencoba plugin javascript yang satu ini. Ukurannya kecil dan keyen.

Namanya Reframe.js. Reframe.js akan membuang atribut lebar (width) dan tinggi (heigh) pada elemen dan kemudian akan dihitung secara sistematis disesuaikan pada dimensi layar perangkat pengunjung website. Reframe.js lebih ditujukan kepada untuk mencantumkan iframe atau video.

Reframe.js terinspirasi pada FitVids. Reframe.js memiliki fungsi sama seperti FitVids tetapi yang berbeda adalah Reframe.js tidak bergantung atau tidak membutuhkan jQuery. Karena itulah, Reframe.js menjadi sangat kecil ukurannya dan menjadi lebih powerful.

Setup

  1. Tambahkan reframe.js di header atau footer atau di baris yang Antum inginkan.
  2. Tambahkan reframe.css di header.
  3. Buat script untuk memanggil elemen yang ingin dijadikan responsive.

Contoh

Default

reframe('selector');

Semua elemen di reframe kecuali

reframe('selector:not([not this selector])');

Sok lah di cobian atuh.

Artikel terkait:   Responsive Design Testing Tool

Isi Komentar

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *

This site uses Akismet to reduce spam. Learn how your comment data is processed.