gpt4 book ai didi

html - CSS3 媒体查询未加载

转载 作者:太空宇宙 更新时间:2023-11-04 11:33:48 25 4
gpt4 key购买 nike

我知道这是一个重复的问题,但我的情况不同。我正在构建一个响应式网站,并希望使用 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"><br/>
<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。

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

最佳答案

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

关于html - CSS3 媒体查询未加载,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31880612/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com