以前也学过这个玩意,可惜没有真正弄懂,今天又学习了一篇
写个demo
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style type="text/css">
@media screen and (max-width: 530px) {
body {
background-color: pink;
}
}
@media screen and (min-width: 531px) and (max-width: 980px) {
body {
background-color: #bfa;
}
}
@media screen and (min-width: 981px) {
body {
background-color: red;
}
}
</style>
</head>
<body>
</body>
</html>
这里我要说的是:
and 前后必须有空格,不要写成 and() 这样会不作用!