CSS3_响应式布局
1、媒体样式
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>查询媒体类型</title>
<style>
h1 {
width: 300px;
height: 300px;
line-height: 300px;
background-image: linear-gradient(30deg, red, yellow, green);
margin: 0 auto;
text-align: center;
font-size: 30px;
color: white;
text-shadow: 0 0 10px black;
}
@media print {
h1 {
background: transparent;
}
}
@media screen {
h1 {
font-family: "Forte";
}
}
@media all {
h1 {
font-family: "Forte";
}
}
</style>
</head>
<body>
<h1>测试文本</h1>
</body>
</html>
2、媒体特性
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>媒体类型</title>
<style>
div {
background-color: aqua;
height: 200px;
line-height: 200px;
text-align: center;
font-size: 50px;
}
@media (max-width:700px) {
div {
background-color: yellow;
}
}
@media (min-width:900px) {
div {
background-color: blue;
}
}
@media (width:500px) {
div {
background-color: red;
}
}
@media (device-width:2048px) {
div {
background-color: black;
}
}
</style>
</head>
<body>
<div>
<p>示例文本</p>
</div>
</body>
</html>
3、运算符
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>运算符</title>
<style>
div {
height: 300px;
background-color: antiquewhite;
}
@media (min-width:600px) and (max-width:800px) {
div {
background-color: aqua;
}
}
</style>
</head>
<body>
<div>
</div>
</body>
</html>