<!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>
<!-- 1.使用link标签进行媒体查询 条件判断 -->
<link rel="stylesheet" media="(min-width:1200px)" href="./div.css">
<style>
/* @keyframes move {
from{
margin-left: 0;
}
to{
margin-left: 200px;
}
}
@media (max-width:800px) {
div{
width: 100px;
height: 100px;
background-color: pink;
animation: move 2s linear;
}
} */
/* and 表示前后都要满足才生效 */
/* @media screen and (min-width:801px) and (max-width:1199px) {
div{
font-size: 28px;
color: yellow;
}
body{
background-color: royalblue;
}
} */
/* ,分隔 满足前后任意一个生效 */
/* @media screen, (min-width:1801px) {
div{
font-size: 28px;
color: yellow;
}
body{
background-color: royalblue;
}
} */
/* not 对条件取反操作 */
@media not (max-width:800px) {
div{
font-size: 58px;
color: red;
}
}
/* print 打印时媒体查询生效 only只满足当前条件 媒体查询生效 */
@media only print {
.title{
display: none;
}
}
</style>
</head>
<body>
<div class="title">我是标题标签</div>
<div>我是一个div</div>
</body>
</html>
