Cara membuat: Teks responsif

Ukuran font responsif

Ukuran teks dapat digunakan vw pengaturan satuan, yang berarti 'lebar viewport'.

Dengan demikian, ukuran teks akan mengikuti ukuran jendela browser:

<h1 style="font-size:8vw;">Hello World</h1>
<p style="font-size:2vw;">Tolong ubah ukuran jendela browser, lihat bagaimana ukuran font berubah.</p>

Coba sendiri

Keterangan:viewport adalah ukuran jendela browser.1vw = 1% lebar viewport. Jika lebar viewport 50 sentimeter, maka 1vw dalam 0.5 sentimeter.

Ubah ukuran font menggunakan media query

Anda juga dapat menggunakan media query untuk mengubah ukuran font elemen di layar ukuran layar tertentu:

Lihat efek

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

Coba sendiri

Halaman yang berhubungan

Panduan:Font CSS

Panduan:Query media CSS