Responsive Layout Mengunakan Zoom Transform

Membuat Tampilan Responsive Dengan Mudah

Bagaimana sih cara membuat tampilan website atau blog kita bisa responsive agar terlihat bagus pada saat dibuka di mobile/hp.?

Banyak pertanyaan seperti diatas bagi yang belum pernah memakai grid sistem namun ada cara lain agar tampilan website atau blog kita bisa maxsimal di semua dekstop atau disemua mobile,
Cara nya mengunakan Zoom css yang codenya ditulis "Transform : scale()"
Ya dengan kode tersebut kita mampu mengecilkan atau membesarkan container - container yang kita mau,
Jadi dengan perinsip itu bisakah kita membuat tampilan website kita membesar dan mengecil secara otomatis jika layar desktop di besar kan atau dikecilkan. dengan begitu tampilan kita akan tetap sama di semua keadaan desktop dan mobile.
Jawabanya tidak mustahil dengan bantuan css media query atau juga dengan javascript.



Yups Langsung saja
Pertama jika website anda belum mempunyai jQuery bisa langsung didownload

http://jquery.com/download/

Atau

Langsung pasang kode ini diatas code </head> atau diatas code </body> ,  website atau blog anda

<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>

Lalu diatas code </head> , anda tambahkan code script ini

<script>
var lebarDesktop = 1366;
var responsiveFunction;
  var lebarAwall = $( window ).width();
  jQuery( document ).ready(function($) {
    responsiveFunction = function(Id) {
        responsive(Id,lebarDesktop);
        $( window ).resize(function() {
            responsive(Id,lebarDesktop);
        });
        function responsive(Id,lebarAwal){
            var lebarAkhir = $( window ).width();
            var lebarHasil = lebarAkhir/lebarAwal*1;
            var lebarScale = lebarHasil.toFixed(3);
            $( Id ).css({
              'transform-origin' : '0 top 0',
              '-webkit-transform' : 'scale('+lebarScale+')',
              '-moz-transform'    : 'scale('+lebarScale+')',
              '-ms-transform'     : 'scale('+lebarScale+')',
              '-o-transform'      : 'scale('+lebarScale+')',
              'transform'         : 'scale('+lebarScale+')',
              'width'              :  lebarAwal
           });
        }
    }
  });
</script>

Note :  untuk "var lebarDesktop = 1366;" kamu bisa ubah sesuai keinginanmu, atau sesuaikan dengan lebar desktop yang digunakan.

Dan untuk mengunakannya. gunakan script ini

<script>
jQuery( document ).ready(function($) {
        responsiveFunction('body');
      });
</script>

tempatkan script ini bebas dimana pun kamu suka tapi jangan diatas script pertama.

Catatan : Maksud "responsiveFunction('body');" body adalah nama tag yang saya inginkan untuk digunakan, namun jika kamu ingin yang lain bisa kamu ganti dengan id atau class yang mana kamu ingin gunakan.

Yoshhh Untuk DEMO nya bisa anda lihat sendiri dengan cara kecilkan atau besarkan layar desktop browser kamu.!!!
Selamat Mencoba