CSS3屏幕分辨率不工作

Question

我在我的html文件中使用了以下css代碼。

 <style> 
      body{ 
      background: black; 
      color: #fff; 
      font: normal 62.5%/1.5 tahoma, verdana, sans-sarif; 
     } 

     h1{font-size: 2em;} 
     p{font-size: 1.4em;} 

     <!-- styles for smartphones and very small screen resolution --> 
     @media only screen and (min-width: 320px) and (max-width: 400px) 
     { 
     body{background: blue;} 
     } 

     <!-- styles for screen resolution bigger than smartphones but smaller or equal to 1024px --> 
     @media only screen and (min-width: 401px) and (max-width: 1024px) 
     { 
      body{background: red;} 
     } 

     <!-- styles for screen resolutions for a very wide resolution --> 
     @media only screen and (min-width: 2000px) 
     { 
      body{background: green;} 
     } 
    </style> 

我看到代碼將根據屏幕分辨率工作。

這個CSS依賴於瀏覽器窗口的大小嗎？或我的系統的屏幕分辨率將在這裏計數？

我正在更改瀏覽器窗口的大小並重新加載文件，頁面的UI /設計中沒有更改。我也清除了緩存。

謝謝。

Answer 1

這是瀏覽器窗口。 這裏有一篇關於如何做的好文章。

http://css-tricks.com/css-media-queries/

例如「屏幕」項與輸出（媒體），而不是實際的屏幕硬件。 它可以被替換爲「打印」，例如它將在打印文件時使用。