Kích thước phông chữ đáp ứng trong CSS

Bạn đã biết rằng đơn vị rem được tính tương đối so với kích thước phông chữ của phần tử gốc, mặc định bằng 16px:

html {
	font-size: 16px; /* giá trị mặc định */
}

Đặc điểm này được sử dụng để thay đổi hàng loạt kích thước phông chữ khi chiều rộng màn hình thay đổi. Hãy xem cách thực hiện điều đó.

Giả sử các thẻ của chúng ta có kích thước sau:

h1 {
	font-size: 1.5rem; /* tương ứng 24px */
}
p {
	font-size: 1rem; /* tương ứng 16px */
	margin: 2rem;    /* tương ứng 32px */
}

Hãy làm sao để khi chiều rộng màn hình thay đổi, các kích thước được thiết lập bằng rem sẽ thay đổi một cách đáp ứng. Để làm điều này, chúng ta sẽ sử dụng truy vấn phương tiện (media query) để thay đổi kích thước phông chữ của phần tử gốc:

@media (max-width: 600px) {
	html {
		font-size: 16px;
	}
}
@media (min-width: 600px) and (max-width: 1200px) {
	html {
		font-size: 18px;
	}
}
@media (min-width: 1200px) {
	html {
		font-size: 20px;
	}
}

Cho đoạn mã sau:

@media (max-width: 300px) {
	h1 {
		font-size: 32px;
	}
	h2 {
		font-size: 24px;
	}
	p {
		font-size: 16px;
	}
}
@media (min-width: 300px) and (max-width: 900px) {
	h1 {
		font-size: 36px;
	}
	h2 {
		font-size: 27px;
	}
	p {
		font-size: 18px;
	}
}
@media (min-width: 900px) {
	h1 {
		font-size: 40px;
	}
	h2 {
		font-size: 30px;
	}
	p {
		font-size: 20px;
	}
}

Hãy đơn giản hóa đoạn mã đã cho bằng cách sử dụng kỹ thuật được mô tả trong bài học.