2

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

我试图让它在浏览器宽度调整为 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">

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

4

2 回答 2

3

我不完全确定为什么你的背景没有变红。但是我发现正确调整文本大小的最佳方法是使用 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 标签上的字体大小时，body 内 ems 中设置的所有内容都会按比例缩小。

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

于 2013-04-30T05:02:37.863 回答
2

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

于 2013-04-30T05:07:05.310 回答