自適應設計在同一樣式不同的分辨率

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)