css - 同一样式表中不同分辨率的响应式设计

Question

我正在尝试使用 Stylish 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 动态缩放元素的正确想法？

Answer 1

你只是错过了一些小东西。

@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;
    }
}

我建议你写一篇关于Mediaqueries的好博客以 供进一步阅读。

Answer 2

尝试@media screen and (min-width: 1920px) and (max-width: 2559px)