一、直接写在媒体查询里
@media 媒体类型and (媒体特性){你的样式}
.d1{
200px;
height:600px;
background:#000;
}
/* 超小屏幕 手机> */
@media screen and (max-768px){
.d1{
background:skyblue;
}
}
/* 小屏幕 平板 */
@media screen and (min-768px) and (max-992px){
.d1{
background:#999;
}
}
/* 中等屏幕 桌面显示器 */
@media screen and (min-992px) and (max-1200px){
.d1{
background:blue;
}
}
/* 大屏幕 大桌面显示器> */
@media screen and (min-1200px){
.d1{
background:pink;
}
}
二、链接css
<link rel="stylesheet" href="css/phoneStyle.css" media="screen and (max-768px)">
<link rel="stylesheet" href="css/ipaStyle.css" media="screen and (min-768px) and (max-992px)">
<link rel="stylesheet" href="css/smallPcStyle.css" media="screen and (min-992px) and (max-1200px)">
<link rel="stylesheet" href="css/bigPcStyle.css" media="screen and (mim-1200px)">