HTML/CSS 媒体查询答案

【问题标题】：HTML/CSS Media QueryHTML/CSS 媒体查询
【发布时间】：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？

标签： html css

【解决方案1】：

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

【讨论】：

【解决方案2】：

并写下这个类型：-

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

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

【讨论】：