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

我建议您good blog Mediaqueries进一步阅读。

Answer 2

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

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

2 个答案: