只有在触摸模拟开启的情况下，媒体对断点的查询才会有效。

Question

我在我的css中应用了一些媒体查询。只有在从我设计的设备上浏览网站时，或者在使用浏览器响应式设计模式时，触摸模拟被打开时，这些查询才会有效.如果我只是简单地拖动屏幕以减小其大小，网站似乎并不是响应式的。

任何想法为什么会发生？

这些是我使用的查询。

/* Smartphones (portrait and landscape) ----------- */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
  /* Style */
}

/* iPads (portrait and landscape) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
  /* Style */
}

/* Large screens ----------- */
@media only screen  and (min-width : 1824px) {
  /* Style */
}

这里你可以看到网站的GH回传。https:/bianchinicecilia.github.ioceciliabianchiniindex.html。

先谢谢你的帮助! :)

Answer 1

我想我可以帮助你。

你正在使用过时的媒体查询。你不需要使用-device，只需要使用min-width或max-width。我还注意到你的网站没有使用视口元标签。<meta name="viewport" content="width=device-width, initial-scale=1.0">. 这也是非常重要的!

最后，审查所有元标签，因为有些尺寸是冲突的。

媒体查询列表。https:/developer.mozilla.orgen-USdocsWebCSSMedia_QueriesUsing_media_queries。

关于视港:https:/developer.mozilla.orgen-USdocsWebCSSViewport_concepts。