Paano gumawa: Responsive text

Responsive font size

Ang laki ng teksto ay maaaring gamitin vw Ang setting ng yunit, ang kahulugan nito ay "lapad ng viewport".

Gayunpaman, ang laki ng teksto ay sumusunod sa laki ng window ng browser:

<h1 style="font-size:8vw;">Hello World</h1>
<p style="font-size:2vw;">Ayusin ang laki ng window ng browser, tingnan kung paano nababago ang laki ng font.</p>

亲自试一试

Puna:Ang viewport ay laki ng window ng browser.1vw = 1% ng lapad ng viewport. Kung ang lapad ng viewport ay 50 sentimetro, 1vw Para sa 0.5 sentimetro.

Baguhin ang laki ng font gamit ang media query

Maaari ka ring gamitin ang media query upang baguhin ang laki ng font ng mga elemento sa tiyak na laki ng screen:

Tingnan ang epekto

/* Kung ang lapad ng screen ay 601px o mas malaki, itakda ang font-size ng <div> na 80px */
@media screen and (min-width: 601px) {
  div.example {
    font-size: 80px;
  }
}
/* Kung ang lapad ng screen ay 600px o mas maliit, itakda ang font-size ng <div> na 30px */
@media screen and (max-width: 600px) {
  div.example {
    font-size: 30px;
  }
}

亲自试一试

相关页面

教程：CSS 字体

教程：CSS 媒体查询