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