<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>媒介查询</title>
<!--浏览器宽度小于等于500px的时候，才会执行main.css文件上-->
<link rel="stylesheet" type="text/css" media="screen and (max-width:700px)" href="css/main.css"/>
<style type="text/css">
*{
margin:0;
padding: 0;
}
.one{
width: 500px;
height: 300px;
background-color: red;
}
/*所能检测到的最小宽度！！！*/
@media only screen and (min-width: 600px) {
body {
background-color: green;
}
}
/*所能可检测到的最大像素！！！*/
@media only screen and (max-width:1200px){
.one{
background-color: gray;
}
}
/*所能检测到的区间值 例如700px-1000px*/
@media only screen and (min-width: 700px) and (max-width:1000px){
.one{
background-color: yellow;
}
}
</style>
</head>
<body>
<!--媒介查询 就是通过检测浏览器的宽高的变化来实现网页布局的 变换
格式：
@media 监听的设备类型 and (设置检测临界值){
需要更改的样式代码
}
常见的坚挺的设备类型：
1、only screen 针对手机，电脑，平板
2、print 针对打印机
3、speech 读音设备
4、all 所有设备
-->
<div class="one">
one
</div>
</body>
</html>
