Cách thực hiện - Văn bản đáp ứng
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ữ thay đổi 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 một vw
đơn vị, 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:
Thí 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>
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, 1vw là 0,5cm.
Thay đổi kích thước phông chữ với truy vấn phương tiện
Bạn cũng có thể sử dụng các truy vấn phương tiện để thay đổi kích thước phông chữ của một phần tử trên các kích thước màn hình cụ thể:
Kích thước phông chữ thay đổi.
Thí 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;
}
}
Mẹo: Đi tới Hướng dẫn 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 .