div{
width: 200px;
height: 200px;
background-color: blanchedalmond;
}
/* 实现div在屏幕不同大小的情况下 显示不同的颜色 */
/* 媒体查询 */
/*
max-width 最大宽度
min-width 最小宽度
*/
/* 500 - 700 包括500 和 700 像素的时候*/
/* @media screen and (max-width:700px) and (min-width:500px) {
div{
background-color: chartreuse;
}
} */
/* min-width:800px 屏幕大小 大于等于800px的时候显示如下的样式 */
@media screen and (min-width:800px) {
div{
background-color: red;
}
}
/* max-width:700px 屏幕大小 小于等于700px的时候显示如下样式 */
@media screen and (max-width:700px) {
div{
background-color: yellow;
}
}
