Cách thực hiện - Văn bản phản hồi
Tìm hiểu cách tạo kiểu chữ đáp ứng bằng CSS.
Chào thế giới
Thay đổi kích thước cửa sổ trình duyệt để xem kích thước phông chữ có tỷ lệ như thế nào.
Kích thước phông chữ đáp ứng
Kích thước văn bản có thể được đặt bằng đơn vị vw
, có nghĩa là "chiều rộng khung nhìn".
Bằng cách đó, kích thước văn bản sẽ tuân theo kích thước của cửa sổ trình duyệt:
Ví dụ
<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>
Hãy tự mình thử »Viewport là kích thước cửa sổ trình duyệt. 1vw = 1% chiều rộng khung nhìn. Nếu khung nhìn rộng 50cm thì 1vw là 0,5cm.
Thay đổi kích thước phông chữ bằng truy vấn phương tiện
Bạn cũng có thể sử dụng truy vấn phương tiện để thay đổi kích thước phông chữ của một thành phần trên các kích thước màn hình cụ thể:
Kích thước phông chữ thay đổi.
Ví dụ
/* 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;
}
}
Hãy tự mình thử »Mẹo: Hãy truy cập Hướng dẫn về phông chữ CSS của chúng tôi để tìm hiểu thêm về phông chữ.
Để tìm hiểu thêm về truy vấn phương tiện, hãy đọc Hướng dẫn truy vấn phương tiện CSS của chúng tôi.