自适应设计在同一样式不同的分辨率

Question

我试图创建使用时尚的镀铬扩展我最喜爱的视频网站之一的小雀斑和一点媒体查询魔法：

@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一个good blog进一步阅读。

Answer 2

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