Halo teman-teman kembali lagi bersama saya Gim!

Pada kesempatan kali ni saya akan membahas seputar ukuran tampilan agar responsive dilayar hp, terdapat perbedaan style ukuran layar website. Pernah saat membuat website ternyata ukuran dilayar laptop/pc itu sesuai tetapi sewaktu kita membuka website kita di hp, ukurannya tidak menyesuaikan?nahh simak artikel dibawah ini Membuat Ukuran Website Responsive di layar Hp.

Pembahasan

Penggunaan CSS diperlukan untuk merubah atau juga untuk mendesain sebuah web, seperti:

1. Menentukan Font yang akan digunakan baik dari ukuran, warna
2. Menentukan Background dengan warna ataupun gambar
3. Merubah/menentukan letak posisi text, gambar, table dll

Tidak hanya itu saja, Css juga bisa merubah dan menentukan ukuran website yang kita inginkan.

Caranya yaitu sebagai berikut:

Pada file css kita buat dulu tag seperti ini

/* Media */

/* Laptop */

/* Mobile */

Untuk menandakan bahwa tag berikut merupakan bagian ukuran layar laptop dan Hp/mobile.

Pada tag Laptop kita masukan seperti ini:

/* Laptop */
@media (max-width: 1366px) {
  html {
    font-size: 75%;
  }
}

Fungsi @media sebagai perubahan tampilan browser, yang digunakan untuk merubah tampilan website sesuai dengan yang akan kita ubah.

Fungsi (max-width: 1366px) adalah sebagai ukuran maximal website pada layar kita. Saya menetapkan untuk layar laptop yaitu 1366px.

Fungsi font-size: 75% digunakan untuk menetapkan ukuran font sebesar 75%

Selanjutnya kita masukan tag /* Mobile */ atau hp

/* Mobile */
@media (max-width: 450px) {
  html {
    font-size: 55%;
  }
}

Fungsi @media sebagai perubahan tampilan browser, yang digunakan untuk merubah tampilan website sesuai dengan yang akan kita ubah.

Fungsi (max-width: 450px) adalah sebagai ukuran maximal website pada layar hp kita. Saya menetapkan untuk layar mobile/hp yaitu 450px. Kenapa ukuran max nya lebih kecil? karna kita menyesuaikan dengan ukuran Mobile.

Fungsi font-size: 55% digunakan untuk menetapkan ukuran font sebesar 55%

Contoh tampilan website sederhana yang saya buat dengan ukuran layar yang saya tetapkan, seperti ini

Tampilan Laptop

Tampailan Mobile 

Itulah cara Membuat Ukuran Website Responsive di layar Hp. Jika kurang jelas bisa hubungi admin dikolom komentar dibawah ini. Mohon maaf jika ada kekurangan.

Jangan lupa kunjungi artikel kami yang lain di gimxsec7.blogspot.com

Terima Kasih!