您是否需要引导程序才能使@media 查询正常工作答案

【问题标题】：Do you need bootstrap for @media query to work您是否需要引导程序才能使@media 查询正常工作
【发布时间】：2017-10-04 12:10:46
【问题描述】：

您好，我尝试使用媒体查询，一切正常，实际上我从另一个线程复制了它，该线程在堆栈溢出时标记为好，但是当我在 Firefox 中查看“响应式布局”Web 开发面板时（在每个屏幕尺寸上我尝试），我没有看到任何变化！

有人说过要在 css 中添加祖先元素。谁能帮我这个？

【问题讨论】：

媒体查询中有哪些 CSS，您使用的实际媒体查询是什么？我们需要知道当屏幕尺寸达到某个点时应该发生什么。很容易在您的媒体查询中意外输入拼写错误，从而使其无法正常工作......
好的，谢谢。首先，我尝试调整帖子缩略图的大小：@media screen and (max-width: 320 px) { .post-thumbnail{ width:125px; } }

【解决方案1】：

@media 查询不需要引导程序即可工作。您的 html 文档的头部必须有元标记。

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<meta> 视口元素向浏览器提供有关如何控制页面尺寸和缩放的说明。

width=device-width 部分将页面宽度设置为跟随设备的屏幕宽度（取决于设备）。

initial-scale=1.0 部分设置浏览器首次加载页面时的初始缩放级别。

【讨论】：

【解决方案2】：

尝试在您的 html 代码的头部添加此元标记

<meta name="viewport" content="width=device-width, initial-scale=1.0">

【讨论】：

【解决方案3】：

都是关于specificity 和cascading/inheritance。

如果你把你的 file.CSS 放在 bootstrap.CSS 之后，并使用与 bootstrap 相同的选择器，那么不用担心，你很好，因为级联效果会照顾你。 这是推荐的做法。您还可以使用更具体的选择器覆盖它。

如果您不将 file.CSS 放在 bootstrap 之后，那么您总是需要比 bootstrap.CSS 的选择器更具体。 不是一件好事。

你可以计算你的选择器的特异性here

【讨论】：

【解决方案4】：

@media 屏幕（最大宽度：767px）{} @media screen (min-width:768px)｛｝

您不必每次都重复此操作。只需总结此媒体查询中的所有内容。

-webkit- -moz- -小姐- 等等..让它在不同的浏览器中工作。

【讨论】：