Responsive dalam Web merupakan keadaan dimana tampilan suatu halaman bisa menyesuaikan perangkat yang dipakai sehingga lebih enak dilihat. Dalam kasus kali ini saya ingin membahas bagaimana cara membuat responsive font yang dipakai. Jadi tampilan font yang dipakai tentu akan sangat penting juga dapat menampilkan sesuai perangkat yang dipakai.Baiklah langsung saja saya akan jelaskan dalam pembahasan kali ini yang akan dipakai untuk mengatur font dengan properti font-size dan menggunakan satuan ukuran css yaitu viewport. Kenapa harus menggunakan viewport karena cara yang terbaik untuk membuat element responsif. Satuan css viewport ada vh=view height dan vw=view width.
Sekarang kita implementasi kedalam code,coba sahabat buat file html seperti dibawah ini:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Membuat Responsive Font dengan viewp ort CSS</title>
<style>
h1{
font-size: 4vw;
color:#2c3e50;
}
h3{
font-size: 4vw;
color:#e67e22;
}
p{
font-size: 4vw;
color:#795753;
}
</style>
</head>
<body>
<h1>Belajar pertama di Dumet School</h1>
<h3>Belajar materi Web Master</h3>
<p>Materi pertama yang dipelajari adala HTML CSS</p>
</body>
</html>
Dalam penggunaan satuan viewport ini bergantung pada induk elemennya. Apabila induk elemen mempunyai ukuran 400px x 400px maka nilai 1vh adalah 400 * 1/100 = 4px dan jika 100vh artinya adalah height yang harus ditentukan 100% dari height induknya.
Sekarang simpan file html diatas kemudian coba jalankan pada browser sahabat, dan jika benar berikut tampilannya.
Demikian pembahasan kali ini semoga bermanfaat dan sampai jumpa kembali dengan pembahasan lainnya .
terima kasih