Artikel Pengenalan Wulin.com (www.vevb.com): Desain Web Responsif.
Dengan popularitas 3G, semakin banyak orang menggunakan ponsel mereka untuk menjelajahi internet.
Perangkat seluler melampaui perangkat desktop dan menjadi terminal yang paling umum untuk mengakses Internet. Jadi, perancang web harus menghadapi masalah yang sulit: bagaimana mereka bisa menyajikan halaman web yang sama pada perangkat dengan ukuran yang berbeda?
Layar ponsel relatif kecil, biasanya di bawah 600 piksel; Lebar layar PC umumnya di atas 1.000 piksel (saat ini lebar arus utama adalah 1.366 × 768), dan beberapa bahkan mencapai 2.000 piksel. Tidak mudah untuk memiliki hasil yang memuaskan pada layar dengan ukuran yang berbeda.
Solusi untuk banyak situs web adalah menyediakan halaman web yang berbeda untuk perangkat yang berbeda, seperti menyediakan versi seluler, atau versi iPhone/iPad. Ini memastikan efeknya, tetapi cukup merepotkan. Itu membutuhkan pemeliharaan beberapa versi. Selain itu, jika sebuah situs web memiliki banyak portal, itu akan sangat meningkatkan kompleksitas desain arsitektur.
Oleh karena itu, beberapa orang telah lama membayangkan apakah dapat dirancang pada satu waktu dan umumnya berlaku untuk halaman web yang sama secara otomatis beradaptasi dengan layar dengan ukuran yang berbeda, dan secara otomatis menyesuaikan tata letak sesuai dengan lebar layar?
1. Konsep desain web adaptif
Pada 2010, Ethan Marcotte mengusulkan istilah desain web responsif, yang mengacu pada desain web yang secara otomatis dapat mengenali lebar layar dan membuat penyesuaian yang sesuai.
Dia membuat contoh potret enam protagonis dari petualangan Sherlock Holmes. Jika lebar layar lebih besar dari 1300 piksel, 6 gambar berada di baris berdampingan.
Jika lebar layar antara 600 piksel dan 1300 piksel, 6 gambar dibagi menjadi dua baris.
Jika lebar layar antara 400 piksel dan 600 piksel, bilah navigasi bergerak ke kepala halaman.
Jika lebar layar di bawah 400 piksel, 6 gambar dibagi menjadi tiga baris.
Mediaqueri.es memiliki lebih banyak contoh seperti ini di atas.
Ada juga widget uji di sini, yang dapat menampilkan efek uji layar dengan resolusi yang berbeda pada halaman web secara bersamaan. Saya sarankan menginstalnya.