根据不同的dpr显示不同颜色的背景

问题遇到的现象和发生背景

我想根据不同的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的改变来改变盒子颜色