Cara - Teks Responsif
Pelajari cara membuat tipografi responsif dengan CSS.
Halo Dunia
Ubah ukuran jendela browser untuk melihat bagaimana skala ukuran font.
Ukuran Font Responsif
Ukuran teks dapat diatur dengan vw
satuan, yang berarti "lebar viewport".
Dengan begitu ukuran teks akan mengikuti ukuran jendela browser:
Contoh
<h1 style="font-size:8vw;">Hello World</h1>
<p
style="font-size:2vw;">Resize the browser window to see how the font size
scales.</p>
Viewport adalah ukuran jendela browser. 1vw = 1% dari lebar viewport. Jika viewport lebarnya 50cm, 1vw adalah 0,5cm.
Ubah Ukuran Font Dengan Kueri Media
Anda juga dapat menggunakan kueri media untuk mengubah ukuran font elemen pada ukuran layar tertentu:
Ukuran Font Variabel.
Contoh
/* If the screen size is 601px wide or
more, set the font-size of <div> to 80px */
@media screen and (min-width:
601px) {
div.example {
font-size: 80px;
}
}
/* If the screen size is 600px wide or less,
set the font-size of <div> to 30px */
@media screen and (max-width: 600px) {
div.example {
font-size: 30px;
}
}
Tip: Buka Tutorial Font CSS kami untuk mempelajari lebih lanjut tentang font.
Untuk mempelajari lebih lanjut tentang kueri media, baca Tutorial Kueri Media CSS kami .