你是否需要为@media查询启动才能工作

Question

您好我尝试使用媒体查询，一切似乎都没问题，我实际上是从另一个在堆栈溢出时标记好的线程中复制它，但是当我查看响应式布局时＃39; Firefox中的web开发面板（我尝试的每个屏幕尺寸），我看到没有变化！

有人说过将一些祖先元素添加到css中。谁能帮我这个？

Answer 1

全部是关于specificity和cascading/inheritance。

如果你在bootstrap.CSS之后放置你的file.CSS并使用相同的选择器作为bootstrap使用然后不用担心，你很高兴，因为级联效果会照顾你。 这是建议的事情。您也可以使用更具体的选择器覆盖它。

如果您没有在引导程序之后放置文件.CSS，那么始终需要比bootstrap.CSS的选择器更具体。 不是一件好事。

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

Answer 2

@media screen（max-width：767px）{} @media screen（min-width：768px）{}

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

-webkit- -moz- -女士- 等等。使其在不同的浏览器中工作。

Answer 3

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

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

Answer 4

您不需要为@media查询启动工作。您必须在html文档的头部包含元标记。

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

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

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

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