Tentunya menyebalkan saat kita mendesain sebuah halaman web yang tampil oke pada suatu ukuran layar, namun saat dilihat di layar dengan ukuran lainnya tampilan desain kita tampak jelek karena ukuran teksnya atau gambarnya terlalu besar atau terlalu kecil.
Di sinilah ada yang namanya teknik responsive web design. Tapi yang akan saya jelaskan di tutorial ini berbeda dengan teknik yang sudah ada pada umumnya. Biasanya orang-orang dalam menangani masalah responsivitas ini mengandalkan css, yakni menggunakan media query untuk menentukan bentuk desain pada ukuran layar tertentu secara dinamis, tapi di sini saya akan menunjukkan caranya yang lain dengan menggunakan JavaScript, lebih tepatnya dengan menggunakan jQuery.
Hal pertama: ukuran layar referensi
Pertama-tama kita perlu ukuran layar yang akan kita jadikan patokan/referensi. Anggaplah referensi kita 1280 * 720 piksel. Kita catat ukuran itu.
var referenceWidth = 1280;
var referenceHeight = 720;
Untuk ukuran gambar
Kita perlu mendeklarasikan berapa kali berapa ukuran gambar yang sekarang ada.
var imageWidth = 400;
var imageHeight = 300;
Di contoh ini, gambar yang kita gunakan memiliki lebar 400 dan tinggi 300 piksel.
Karena kita tidak mau menggunakan ukuran 400 * 300 pada gambar tersebut untuk ditampilkan di semua ukuran layar, oleh karena itu kita akan menjadikan ukurannya dinamis. Dengan cara mengkalkulasi berapa ukuran baru gambar tersebut jika ditampilkan pada layar dengan ukuran tertentu. Jadi kita perlu mengetahui berapa ukuran barunya.
var newWidth = innerWidth * (imageWidth/referenceWidth);
var newHeight = newWidth * (imageHeight/imageWidth);
Nah setelah ukuran baru gambar tersebut didapat, maka kita apply/terapkan ukuran tersebut pada gambar.
Untuk ukuran teks
Hampir mirip juga, tapi untuk teks/font kita hanya perlu berurusan dengan ukuran fontnya. Jadi kita tentukan ukuran font asli sebagai referensi.
var fontSize = 16;
Di sini referensi ukuran font kita adalah 16 piksel untuk layar dengan ukuran yang kita jadikan referensi di atas yakni 1280 * 720. Lalu untuk ditampilkan pada ukuran layar lainnya, kita perlu mengkalkulasi ukuran baru si teks itu berapa.
var newFontSize = fontSize * (innerWidth/referenceWidth);
Nah newFontSize itu adalah ukuran baru font yang harus kita apply pada teks kita supaya ukurannya proporsional terhadap ukuran layar yang ada.
Lalu kita bisa gunakan jQuery untuk meng-apply ukuran baru teks dan gambar seiring dengan perubahan ukuran layar.
Script lengkapnya seperti ini:
<!DOCTYPE html>
<html>
<head>
<title>Proporsi Teks dan Gambar</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
</head>
<body>
<p id="teks" style="font-size: 25px;">Ini adalah mendoan</p>
<img src="mendoan.jpg" id="gambar">
<script>
//Ukuran layar referensi
var referenceWidth = 1280;
var referenceHeight = 720;
//Ukuran font referensi
var fontSize = 25;
//Ukuran gambar referensi
var imageWidth = 400;
var imageHeight = 300;
//Kalkulasi ukuran baru
function applyNewSize(){
//Ukuran baru Teks
var newFontSize = fontSize * (innerWidth/referenceWidth);
//Menerapkan ukuran baru
$("#teks").css({
"font-size" : newFontSize + "px"
});
//Ukuran baru Gambar
var newWidth = innerWidth * (imageWidth/referenceWidth);
var newHeight = newWidth * (imageHeight/imageWidth);
//Menerapkan ukuran baru
$("#gambar").css({
"width" : newWidth + "px",
"height" : newHeight + "px",
});
}
//Dijalankan tiap kali jendela berubah ukuran
$(window).resize(function(){
applyNewSize();
});
//Dijalankan awal kali browser ready
$(document).ready(function(){
applyNewSize();
});
</script>
</body>
</html>
