Question

我似乎无法让我的媒体查询实际显示..我试图最终得到它，以便我的文本将根据浏览器大小重新调整大小，但我只是想尝试运行看看它是否会起作用。

我试图让它在浏览器调整宽度为1200px时页面背景变为红色。这是我的css：

@media screen and (min-width: 500px) and (max-width: 1200px) {
   .main {
     background-color: red;
         }
    }

这是我的样式表链接：

<link rel="stylesheet" media="media screen and (min-width: 500px) and (max-width: 1200px)" href="tek_bigscreen.css">

我还有另一个样式表，其中没有媒体查询链接到页面：

<link rel="stylesheet"  type="text/css" href="tekstyle.css">

知道为什么媒体查询不起作用？此外，任何有关如何正确调整文本大小的见解将不胜感激。谢谢！

Answer 1

我不完全确定为什么你的背景不会变红。但我发现正确调整文本大小的最佳方法是使用ems。

类似的东西：

body {
    font-size:100%;
}
h1 {
    font-size:2em;
}

@media only screen and (min-width:500px) and (max-width:1200px) {
    body {
        font-size:15px
    }
}

font-size:100%将使1em等于浏览器的默认字体大小，通常为16px，当您减小body标签上的字体大小时，在体内ems中设置的所有内容都将按比例缩小。

编辑：此外，这只是一个建议，因为这是我的方式，而不是将媒体查询放在链接标记中。只需将所有媒体查询保留在CSS文件中，并使用此poly-fill使其与旧IE一起使用。

Answer 2

如果样式表本身中有@media，则无需在样式表链接中包含media属性。实际上，它可能会导致错误 - 我不确定。也许尝试将代码放入常规样式表中，看看会发生什么，或者只是将颜色声明放在没有@media包装器的第一个样式表中。

css3媒体查询无法正常工作 - 调整大小时的背景颜色更改

2 个答案: