0

我在我的 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/设计没有变化。我也清除了缓存。

谢谢。

4

1 回答 1

0

这是浏览器窗口。这是一篇关于如何做到这一点的好文章。

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

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

于 2013-02-06T18:38:52.033 回答