html - 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/

例如术语“屏幕”与输出(媒体)相关，而不是实际的屏幕硬件。例如，它可以替换为“print”，并在打印文件时使用。