logo duaruang

News

What's New
down

03 Januari 2015Cara membuat website responsive

Responsive merupakan desain website yang memiliki layout sesuai dengan layar browser, sebagai contoh ketika website dibuka menggunakan smartphone, maka tampilan website akan menyesuaikan dengan layar di smartphone.

saat ini saya akan mengajarkan bagaimana cara membuat website responsive. Pertama saya membuat file HTML 5.0 menggunakan aplikasi adobe dreamweaver. lalu download css framework seperti bootstrap yang saya gunakan. setelah itu koneksikan css framework tersebut kedalam tag pada HTML. ketika sudah dikoneksikan jangan lupa tambahakan tag sebagai pengenal device. selanjutnya buat file css dengan nama style.css dan jangan lupa dikoneksikan lagi dengan HTML yang sudah dibuat. lalu kita masuk di file style.css disana kita memiliki otoritas untuk medesain sesuai dengan keinginan kita. untuk mendukung website dapat dibuka melalui smartphone, tablet ataupun pc. tambahkan ukuran media width didalam style.css dengan konfigurasi sebagai berikut;

  • @media (min-width:320px) { /* smartphones, iPhone, portrait 480x320 phones */}  
  • @media (min-width:481px) { /* portrait e-readers (Nook/Kindle), smaller tablets @ 600 or @ 640 wide. */}  
  • @media (min-width:641px) { /* portrait tablets, portrait iPad, landscape e-readers, landscape 800x480 or 854x480 phones */  }
  • @media (min-width:961px) { /* tablet, landscape iPad, lo-res laptops ands desktops */ }
  • @media (min-width:1025px) { /* big landscape tablets, laptops, and desktops */ }
  • @media (min-width:1281px) { /* hi-res laptops and desktops */ }