一、通俗的理解
1.当用户使用不同尺寸的屏幕查看，呈现的样式不同，并且各自的样式比较复杂，那么就可以把不同尺寸样式单独写一个文件，然后使用
<link rel="stylesheet" href="">进行引入
二、示例
例如：当屏幕小于800px，一行只显示一个盒子，屏幕大于等于800px，一行显示两个盒子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>媒体查询-引入资源</title>
<link rel="stylesheet" href="./css/small.css" media="screen and (max-width: 799px)">
<link rel="stylesheet" href="./css/large.css" media="screen and (min-width: 800px)">
</head>
<body>
<div></div>
<div></div>
</body>
</html>
样式
#small.css
div{
width: 100%;
height: 200px;
}
div:nth-child(1){
background-color: coral;
}
div:nth-child(2){
background-color: skyblue;
}
#large.css
div {
float: left;
width: 50%;
height: 200px;
}
div:nth-child(1) {
background-color: coral;
}
div:nth-child(2) {
background-color: skyblue;
}
三、效果
