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”，它将在打印文件时使用。

CSS3屏幕分辨率不起作用

1 个答案: