Dalam mengembangkan aplikasi berbasis web, kita pasti mempertimbangkan tampilan di berbagai media. Kita pasti mempertimbangkan tampilan dalam notebook, tampilan dalam tablet maupun tampilan dalam smartphone.
Untuk membuat tampilan yang baik dalam berbagai media ini, kita dapat menentukan tampilan yang tepat untuk setiap resolusi media-media tersebut. Untuk tools yang lengkap kita dapat menggunakan Bootstrap yang dapat didownload di http://getbootstrap.com/ . Dengan menggunakan Bootstrap kita dapat membuat tampilan yang responsive untuk berbagai media.
Meskipun demikian kita mungkin memiliki kebutuhan untuk style-style tertentu sesuai kebutuhan kita. Sebagai contoh dalam membuat aplikasi Yii 1 kita akan memberikan margin 10px untuk image view, edit, dan delete pada media dengan width < 600 supaya pemakai aplikasi tidak salah mengklik action saat mengakses aplikasi menggunakan smartphone.
Untuk kebutuhan mengaplikasikan CSS pada resolusi tertentu, kita dapat mengaplikasi CSS3 media query seperti contoh di bawah ini:
@media only screen and (max-device-width: 600px)
{
.button-column a img
{
margin: 10px;
}
}
Informasi lebih lanjut silahkan mengunjungi http://www.w3schools.com/cssref/css3_pr_mediaquery.asp .
Kunjungi www.proweb.co.id untuk menambah wawasan anda.