Biểu định kiểu phụ thuộc vào phương tiện chỉ là biểu định kiểu cơ bản nhưng chỉ áp dụng cho tài liệu html khi loại trung gian phù hợp với loại thiết bị mà tài liệu được hiển thị trên đó.
Chúng tôi có thể tạo các biểu định kiểu phụ thuộc vào phương tiện bằng các phương pháp sau -
- Sử dụng @media At-rules
- Sử dụng @import At-rules
- Sử dụng phần tử HTML với thuộc tính media
Ví dụ
Hãy xem một ví dụ để tạo các biểu định kiểu phụ thuộc vào phương tiện -
Tài liệu HTML
<!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" media="screen" href="screen.css"> <link rel="stylesheet" type="text/css" media="print" href="print.css"> </head> <body> <div></div> </body> </html>
Tài liệu CSS (screen.css)
div {
height: 50px;
width: 100px;
border-radius: 20%;
border: 2px solid blueviolet;
box-shadow: 22px 12px 3px 3px lightblue;
position: absolute;
left: 30%;
top: 20px;
} Tài liệu CSS (print.css)
div {
height: 50px;
width: 100px;
border-radius: 20%;
border: 2px solid #dc3545;
box-shadow: 22px 12px 3px 3px #dc3545;
position: absolute;
left: 30%;
top: 20px;
} Đầu ra
Điều này sẽ tạo ra kết quả sau -
Khi tài liệu được hiển thị trong kiểu trung gian màn hình -
Khi tài liệu được hiển thị trong một loại trung gian in -
Ví dụ
Hãy xem một ví dụ khác để tạo các biểu định kiểu phụ thuộc vào phương tiện -
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
p {
background-origin: content-box;
background-repeat: no-repeat;
background-size: cover;
box-shadow: 0 0 3px black;
padding: 20px;
background-origin: border-box;
}
@media screen and (max-width: 900px) {
p{
background: url("https://www.tutorialspoint.com/android/images/android.jpg");
color: #c303c3;
}
}
@media screen and (max-width: 500px) {
p {
color: black;
background: url("https://www.tutorialspoint.com/react_native/images/react-native.jpg");
}
}
</style>
</head>
<body>
<p>This is demo text. This is demo text. This is demo text. This is demo text.
This is demo text. This is demo text. This is demo text. This is demo text.
This is demo text. This is demo text. This is demo text. This is demo text.
This is demo text. This is demo text. This is demo text. This is demo text.
This is demo text. This is demo text. This is demo text. This is demo text. </p>
</body>
</html> Đầu ra
Điều này sẽ tạo ra kết quả sau -
Khi kích thước màn hình trên 500px -
Khi kích thước màn hình dưới 500px -
