HTML/CSS 媒体查询

Posted 2023-03-06

【中文标题】HTML/CSS 媒体查询

【英文标题】：HTML/CSS Media Query

【发布时间】：2019-12-09 21:18:44

【问题描述】：

我已经正确引用了视口元标记和样式表链接，但我的媒体查询仍然不起作用。

所有 CSS 样式都适用，媒体查询样式除外。

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

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

    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.1/css/all.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

【问题讨论】：

如果您也发布 css 会有所帮助

在哪里写你的媒体查询。

嗨，理查德，欢迎来到 Stack Overflow。提出问题时可以应用一些准则，因此请务必查看它们。为了让我们开始帮助您解决您的问题，您能否提供给我们minimal reproducible example？

【参考方案1】：

如果您在 main.css 中编写了媒体查询，它不会覆盖引导程序和其余样式表的默认媒体查询，因为您需要在所有默认样式表之后调用您的 main.css。希望这会有所帮助:)

【参考方案2】：

并写下这个类型：-

对于最大宽度：- @media (max-width:767px) 代码在这里

对于最小宽度和最大宽度：- @media (min-width:768px) and (max-width:991px) code here