Melihat dan Mengedit halaman responsive (Developer Tools) - Code Pelajar

Melihat & Mengedit Sebuah halaman Responsive Menggunakan Developers Tools - Setelah kemarin saya menjelaskan Melihat & mengedit Source HTML menggunakan developers Tools, sekarang saya akan menunjukkan bagaimana caranya melihat/mengecek/membuat sebuah halaman web responsive.

Coba kalian ganti dulu agar panel developers tools bisa melayang(undock into separate window), di bagian kanan atas ada sebuah button berbentuk 3 titik yang berderet kebawah, untuk kustomisasi developers tools.

Pertama, masuk ke laman Web kalian, dan buka developers toolsnya. Sesudah itu di pojok kiri atas ada icon seperti handphone dan tablet, itu adalah sebuah toggle device toolbar yang berfungsi untuk melihat/mengecek sebuah halaman apakah responsive atau tidak.

ketika kalian sudah berhasil mengaktifkan mode responsive menggunakan developers tools, maka kalian akan melihat gambar seperti di atas. Untuk kustomisasi ukuran layar Google sudah menyediakan beberapa ukuran untuk layar handphone seperti Galaxy S5, Pixel 2, Iphone X dll. dan kalian juga bisa langsung kustomisasi ukuran layar yang kalian inginkan. Lalu pertanyaan sekarang adalah bagaimana membuat sebuah halaman menjadi responsive ?

Membuat halaman menjadi responsive

  1. Untuk membuat sebuah halaman menjadi responsive, yang pertama kalian harus pasang adalah meta tag ini
  2. <meta name="viewport" content="width=device-width, initial-scale=1">
    Menggunakan nilai meta viewport width=device-width menginstruksikan laman untuk mencocokkan lebar layar dalam piksel yang tidak tergantung perangkat. Hal ini memungkinkan laman untuk meng-ubah posisi/geometri materi agar sesuai dengan ukuran layar yang berbeda, apakah di-render pada telepon seluler kecil atau monitor desktop yang besar. - (developers Google)
  3. Untuk sebuah halaman responsive, kalian harus menentukan dulu Breakpoint yang ingin kalian gunakan.
  4. Breakpoint, seperti namanya ialah titik potong dimana titik potong ini akan menentukan tampilan di setiap breakpoint(ukuran laman web yang sudah di tentukan titik potong-Nya).
  5. Umumnya para developers lokal menentukan ukuran breakpoint
  6. @media screen and (min-width:769px) and (max-width:1024px){
    ...ISI..CSS...
    }
    
    @media screen and (min-width:641px) and (max-width:769px){
    ...ISI..CSS...
    }
    
    @media screen and (max-width:640px){
    ...ISI..CSS...
    }
    Jika dijabarkan akan dibaca seperti ini, dari ukuran layar 1024px akan merender halaman sampai dengan ukuran 768px, dari ukuran 768px akan merender halaman sampai dengan ukuran 641px, yang terakhir max-widht: 640px berarti dari ukuran layar 640px akan terus menyesuaikan sampai ke ukuran terkecil.

Lumayan panjang kita membahas tentang responsive ini, semoga manfaat ya sob, jika masih ada yang belum paham silahkan tanyakan di kolom komentar. Jika tidak langsung saja diskusi di group Facebook Code Pelajar.

Table Of Content


    Contact Form

    Kirim