Cách tạo: Văn bản tương ứng

Học cách sử dụng CSS để tạo bản in tương ứng.

Hello World

Thay đổi kích thước cửa sổ trình duyệt, để xem cỡ chữ được thu nhỏ như thế nào.

Xem hiệu ứng

Cỡ chữ tương ứng

Cỡ chữ có thể được sử dụng vw Đơn vị cài đặt, có nghĩa là “độ rộng khung nhìn”.

Vậy, cỡ chữ sẽ theo kích thước cửa sổ trình duyệt:

<h1 style="font-size:8vw;">Hello World</h1>
<p style="font-size:2vw;">Thay đổi kích thước cửa sổ trình duyệt, để xem cỡ chữ được thu nhỏ như thế nào.</p>

Thử ngay

Ghi chú:khung nhìn là kích thước của cửa sổ trình duyệt.1vw = 1% độ rộng khung nhìn. Nếu độ rộng khung nhìn là 50 cm, thì 1vw cho 0.5 cm.

Thay đổi cỡ chữ bằng truy vấn truyền thông

Bạn có thể sử dụng truy vấn truyền thông để thay đổi cỡ chữ của phần tử trên màn hình kích thước cụ thể:

Cỡ chữ có thể thay đổi.

Xem hiệu ứng

/* Nếu độ rộng màn hình là 601px hoặc lớn hơn, hãy đặt font-size của <div> thành 80px */
@media screen and (min-width: 601px) {
  div.example {
    font-size: 80px;
  }
}
/* Nếu độ rộng màn hình là 600px hoặc nhỏ hơn, hãy đặt font-size của <div> thành 30px */
@media screen and (max-width: 600px) {
  div.example {
    font-size: 30px;
  }
}

Thử ngay

Trang liên quan

Giáo trình:Font CSS

Giáo trình:Truy vấn CSS