Cara Teks Responsive Pada Website

Reviewed by Sutiono S.Kom., M.Kom., M.T.I

by Hanifah Nurbaeti February 17, 2021

Di bawah ini kita akan mempelajari cara membuat tipografi atau teks yang responsif dengan CSS.

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
div.example {
  background-color: lightgrey;
  padding: 20px;
}

@media screen and (min-width: 601px) {
  div.example {
    font-size: 50px;
  }
}

@media screen and (max-width: 600px) {
  div.example {
    font-size: 25px;
  }
}
</style>
</head>
<body>

<div class="example"><h2>Hallo Semua! Apa Kabar?</h2>

<p>Ubah ukuran jendela browser untuk melihat bagaimana skala ukuran teks.</p>
  </div>

</body>
</html>

Ukuran Font Responsif

Ukuran teks dapat diatur dengan unit vw, yang berarti “viewport width” .

Dengan begitu, ukuran teks akan mengikuti ukuran jendela browser:

Contoh

<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<body>

<h1 style="font-size:10vw;">Responsive Text</h1>

<p style = "font-size: 5vw;"> Ubah ukuran jendela browser untuk melihat bagaimana skala ukuran teks. </p>

<p style = "font-size: 5vw;"> Gunakan unit "vw" saat mengubah ukuran teks. 10vw akan menyetel ukuran menjadi 10% dari lebar viewport. </p>

<p> Area pandang adalah ukuran jendela browser. 1vw = 1% dari lebar viewport. Jika viewport memiliki lebar 50cm, 1vw adalah 0,5cm. </p>

</body>
</html>

Area pandang adalah ukuran jendela browser. 1vw = 1% dari lebar viewport. Jika viewport memiliki lebar 50cm, 1vw adalah 0,5cm.

Ubah Ukuran Font Dengan Media Queries

Kita juga dapat menggunakan media queries untuk mengubah ukuran font elemen pada ukuran layar tertentu:

Tabmbahkan ini :

/* Jika ukuran layar lebar 601px atau lebih, setel ukuran font <div> menjadi 80px */
@media screen and (min-width: 601px) {
  div.example {
    font-size: 80px;
  }
}

/* Jika ukuran layar lebar 600px atau kurang, setel ukuran font <div> menjadi 30px*/
@media screen and (max-width: 600px) {
  div.example {
    font-size: 30px;
  }
}

Dan akan seperti ini hasilnya :

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
div.example {
  background-color: lightgrey;
  padding: 20px;
}

@media screen and (min-width: 601px) {
  div.example {
    font-size: 80px;
  }
}

@media screen and (max-width: 600px) {
  div.example {
    font-size: 30px;
  }
}
</style>
</head>
<body>

<h2>Ubah ukuran font elemen pada ukuran layar yang berbeda</h2>

<div class="example">Example DIV.</div>

<p> Saat lebar browser 600px atau kurang, setel ukuran font DIV ke 30px. Jika ukurannya 601 piksel atau lebih lebar, setel ukuran font menjadi 80 piksel. Ubah ukuran jendela browser untuk melihat efeknya.</p>

</body>
</html>