Giới thiệu Media Query trong CSS

Có một lệnh đặc biệt @media, cho phép thực thi các đoạn mã khác nhau tùy thuộc vào chiều rộng màn hình.

Trong ví dụ tiếp theo, một đoạn mã nào đó sẽ hoạt động nếu chiều rộng màn hình từ 300px đến 1200px:

@media (min-width: 300px) and (max-width: 1200px) {
	/* một đoạn mã nào đó */
}

Trong ví dụ tiếp theo, một đoạn mã nào đó sẽ hoạt động nếu chiều rộng màn hình lớn hơn 300px:

@media (min-width: 300px) {
	/* một đoạn mã nào đó */
}

Trong ví dụ tiếp theo, một đoạn mã nào đó sẽ hoạt động nếu chiều rộng màn hình nhỏ hơn 1200px:

@media (max-width: 1200px) {
	/* một đoạn mã nào đó */
}

Hãy viết một đoạn mã nào đó trong media query của chúng ta. Chẳng hạn, ở một kích thước màn hình nhất định, chúng ta sẽ tô màu đỏ cho các đoạn văn:

@media (min-width: 300px) and (max-width: 1200px) {
	p {
		color: red;
	}
}

@media (min-width: 300px) and (max-width: 1200px) {
	p {
		color: red;
	}
}

Và bây giờ, hãy tô màu các đoạn văn thành các màu khác nhau tùy thuộc vào chiều rộng màn hình:

@media (max-width: 300px) {
	p {
		color: red;
	}
}
@media (min-width: 300px) and (max-width: 900px) {
	p {
		color: green;
	}
}
@media (min-width: 900px) and (max-width: 1200px) {
	p {
		color: blue;
	}
}
@media (min-width: 1200px) {
	p {
		color: orange;
	}
}

Hãy để đoạn mã sau đây được áp dụng trên màn hình có chiều rộng từ 0 đến 800px:

p {
	font-size: 20px;
}

Và hãy để đoạn mã sau đây được áp dụng trên màn hình có chiều rộng từ 800px trở lên:

p {
	font-size: 30px;
}

Hãy để đoạn mã sau đây được áp dụng trên màn hình có chiều rộng từ 0 đến 500px:

p {
	font-size: 15px;
}

Hãy để đoạn mã sau đây được áp dụng trên màn hình có chiều rộng từ 500px đến 900px:

p {
	font-size: 20px;
}

Hãy để đoạn mã sau đây được áp dụng trên màn hình có chiều rộng từ 900px trở lên:

p {
	font-size: 30px;
}