media媒体查询

什么是媒体查询

为不同尺寸的屏幕设定不同的CSS样式

#div0{
width: 100px;
height: 200px;
}
@media screen and (min-device-width:1000px) and (max-device-width:1200px) {
#div0{
background-color: red;
}
}
@media screen and (min-device-width:1500px) and (max-device-width:2000px) {
#div0{
background-color: orange;
}
}

device-width:设置屏幕的宽度
device-height:设置屏幕的高度

媒体查询其他引入方式

styel标签 写在style中，有条件的执行某个内部样式表

 <style media="(mid-device-width:300px) and (max-device-width:399px)">
#div0 div{
width: 50%;
}
</style>

link引入 写在link标签中，有条件的引入外部样式表

 <link rel="stylesheet" href="D:\学习\Vue\day5\css-1.css">
<link rel="stylesheet" href="D:\学习\Vue\day5\css-2.css" 
media="(min-device-width:400px)">
<link rel="stylesheet" href="D:\学习\Vue\day5\css-3.css" 
media="(min-device-width:300px) and (max-device-width:399px)">

CSS1

#div0{
width: 100%;
height: 500px;
}
#div0 div{
float: left;
height: 100px;
}
#div0 div:nth-child(1){
background-color: blue;
}
#div0 div:nth-child(2){
background-color: aqua;
}
#div0 div:nth-child(3){
background-color: salmon;
}

CSS2

#div0 div{
width: 33.3%;
}

CSS3

#div0 div{
width: 50%;
}