问题遇到的现象和发生背景
我想根据不同的dpr显示不同颜色的背景
用代码块功能插入代码,请勿粘贴截图
#demo{
width: 200px;
height: 200px;
background-color: rgb(228, 148, 148);
}
@media screen and (-webkit-min-device-pixel-radio:2) {
/* .logo{
content:url(./imgs/logo@2x.png)
} */
#demo{
background-color: rgb(40, 215, 57);
}
}
@media screen and (-webkit-min-device-pixel-radio:3),(min-device-pixel-radio:3) {
/* .logo{
content:url(./imgs/logo@3x.png)
} */
#demo{
background-color: rgb(95, 150, 240);
}
}
<div id="demo"></div>
运行结果及报错内容
一直显示粉色背景盒子 也就是第一个,不会根据dpr的改变来改变盒子颜色
我想要达到的结果
根据dpr的改变来改变盒子颜色