CSS的@media——媒体查询
程序员文章站
2022-05-11 10:00:24
...
CSS的@media与@media screen可以运用到网页自适应中。
@media与@media screen的区别
@media与@media screen在效果上是没区别的。但实际上是在于设备上的区别，@media screen中的CSS样式在打印机设备是无效的，而@media的CSS样式是可以运用在打印机设备的。
Demo教程:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
//设备宽度在500px内执行 (说白了就是 width<=500px执行这个@media的CSS样式)
@media screen and (max-width: 500px){
p{
background-color: aqua;
}
}
//设备宽度在600px外执行 (说白了就是 width>=600px执行这个@media的CSS样式)
@media screen and (min-width: 600px){
p{
background-color: red;
}
}
//设备宽度在700px至900px内执行 (说白了就是 700px<=width<=900px内执行这个@media的CSS样式)
@media screen and (min-width: 700px) and (max-width:900px){
p{
background-color: yellow;
}
}
</style>
</head>
<body>
<div>
<p>HELLO</p>
<p>THIS IS INDEX PAGE</p>
<p>NOW TEST @MEDIA</p>
</div>
</body>
</html>
@media screen and () 中的screen是有其他属性的
| screen | 用于有屏幕的设备 |
|---|---|
| speech | 用于发声设备 |
| all | 用于所有设备 |
| 用于打印机设备 |
@media screen and (max-width)中的max-width也是可以有其他属性的
| max-width | 设备最大宽度(<=width) 执行 |
|---|---|
| min-width | 设备最小宽度(>=width)执行 |
| max-height | 设备最大高度(<=height) 执行 |
| min-height | 设备最小高度(>=height)执行 |
除了width、height，还有max-color与min-color,当然远远不止这几个，还有许多，小编就列出了常用的。
有什么问题欢迎大家补充！