Question

我知道这是一个重复的问题，但我的情况有所不同。我正在构建一个响应式网站，并希望使用css3媒体查询为不同的设备使用不同的css规则。所以我制作了三个文件style-lg.css，style-md.css，style-sm.css。他们被安排为 <link rel="stylesheet" href="style-lg.css"> <link rel="stylesheet" href="style-md.css"> <link rel="stylesheet" href="style-sm.css">
问题是所有规则都是从style-lg加载的。这是我到目前为止检查的内容 <meta name="viewport" content="width=device-width"/>

以下是三个文件中的媒体查询：

@media screen and min-width: 1200px{...}
@media screen and (min-width: 992px) and (max-width: 1199px){...}
@media screen and (min-width: 769px) and (max-width: 991px){...}

我已经检查了stackoverflow中几乎所有关于此的链接，但无法找到为什么查询在我的工作中不起作用。

例如：

<span class="f-15 f-18 f-22">Text</span>

其中f-15，f-18和f-22是字体。但是当我更改浏览器窗口的大小时，bootstrap将col-lg更改为col-md并进一步减小窗口大小，col-md为col-sm但是我的类仍然是f-22。

有人能解释一下我的代码中有什么问题吗？提前谢谢。

Answer 1

在<head></head>部分添加此<link rel="stylesheet" media="screen and (min-device-width: 800px)" href="yourfilehere.css" />

Answer 2

如果没有指向您的实际网页的链接，则很难排除故障，但您可以尝试以下建议。

验证您的CSS以确保没有问题，尤其是媒体查询的格式设置：http://jigsaw.w3.org/css-validator/
即使你已经创建了3个单独的css文件，它们都将被加载（除非你使用一些JS或其他光滑的技术），并且因为它们都加载了通常的css瀑布，并且将应用特异性规则。因此，请确保以正确的顺序加载规则
您提到当您期望媒体查询指定其他内容时，f22类仍将应用于字体。使用Web检查器检查元素并找出原因
从您提供的媒体查询断点，您没有考虑视口宽度小于769px。要么显式设置这些样式，要么确保Bootstrap默认值是你想要的

祝你好运！

CSS3媒体查询无法加载

2 个答案: