Truy vấn phương tiện là một kỹ thuật CSS cho các quy tắc kiểu khác nhau cho các thiết bị có kích thước khác nhau như điện thoại di động, máy tính để bàn, v.v.
Sau đây là đoạn mã hiển thị các truy vấn phương tiện và thiết kế web đáp ứng trong CSS -
Ví dụ
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
color: white;
}
@media only screen and (max-width: 600px) {
body {
background: rgb(207, 60, 151);
}
}
@media only screen and (min-width: 600px) {
body {
background: rgb(0, 128, 107);
}
}
@media only screen and (min-width: 768px) {
body {
background: rgb(226, 136, 18);
}
}
@media only screen and (min-width: 992px) {
body {
background: rgb(108, 25, 185);
}
}
@media only screen and (min-width: 1200px) {
body {
background: rgb(13, 124, 63);
}
}
</style>
</head>
<body>
<h1>Media queries example</h1>
<h2>Resize the screen to see background color change on different breakpoints</h2>
</body>
</html> Đầu ra
Đoạn mã trên sẽ tạo ra kết quả sau -
