CSS3_响应式布局
1、媒体样式
在不同媒体上显示不同的样式。
常用阈值：
- 小于768px：小屏幕；
- 768px-992px：中等屏幕；
- 992px-1200px：大屏幕；
- 大于1200px：超大屏幕。
<!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、媒体特性
根据媒体视口的大小和媒体宽度进行样式的变化。
- width：检测视口宽度；
- max-width：检测视口最大宽度；
- min-width：检测视口最小宽度；
- height：检测视口高度;
- max-height：检测视口最大高度；
- min-height：检测视口最小宽度；
- device-width：检测屏幕的宽度；
- max-device-width：检测屏幕的最大宽度；
- min-device-width：检测屏幕的最小宽度；
- orientation：检测视口的旋转方向
- portrait：视口处于纵向，高度大于宽度；
- landscape：视口处于横向，宽度大于高度。
<!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;
}
/* 视口宽度小于700px的时候背景设置为黄色 */
@media (max-width:700px) {
div {
background-color: yellow;
}
}
/* 视口宽度大于900px的时候背景设置为蓝色 */
@media (min-width:900px) {
div {
background-color: blue;
}
}
/* 视口宽度为500px的时候背景设置为红色 */
@media (width:500px) {
div {
background-color: red;
}
}
/* 只有设备宽度为2560px(因为2560缩放了1.25倍)时,才会生效 */
@media (device-width:2048px) {
div {
background-color: black;
}
}
</style>
</head>
<body>
<div>
<p>示例文本</p>
</div>
</body>
</html>
3、运算符
可以通过运算符将媒体特性联系在一起：
- and：并且；
- , 或者 or：或；
- not：否定；
- only：肯定。
<!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>
