Css 针对同一样式表中不同分辨率的响应式设计

我正在尝试使用时尚的Chrome扩展和一点媒体查询魔术为我最喜欢的视频网站之一创建一个小补丁：

@media screen (min-width: 1920px, max-width: 2559px) {
    div#player div#player-api {
        width: 1280px;
        height: 720px;
    }
}

@media screen (min-width: 2560px) {
    div#player div#player-api {
        width: 1920px;
        height: 1080px;
    }
}

---

不幸的是，我似乎总是同时满足这两个条件，好像根本不需要媒体查询。上述CSS有效吗？我是否有根据浏览器大小使用CSS动态缩放元素的正确想法？

尝试

@媒体屏幕和（最小宽度：1920px）和（最大宽度：2559px）

尝试

@媒体屏幕和（最小宽度：1920px）和（最大宽度：2559px）

您只缺少一些小东西

@media screen and (min-width: 1920px)and (max-width: 2559px) {
    div#player div#player-api {
        width: 1280px;
        height: 720px;
    }
}

@media screen and (min-width: 2560px) {
    div#player div#player-api {
        width: 1920px;
        height: 1080px;
    }
}

---

我建议你继续读下去。

你只遗漏了一些小东西

@media screen and (min-width: 1920px)and (max-width: 2559px) {
    div#player div#player-api {
        width: 1280px;
        height: 720px;
    }
}

@media screen and (min-width: 2560px) {
    div#player div#player-api {
        width: 1920px;
        height: 1080px;
    }
}

我建议你继续读下去