jquery - 浏览器调整大小时的 CSS 媒体查询？

Question

我认为 CSS 媒体查询在用户调整浏览器大小时不起作用？用户必须刷新页面才能使媒体查询生效？我如何使用 JS 更新媒体查询？目前我使用 JS 在调整大小添加时检测窗口大小addClass()

Answer 1

您不需要 JS 来让 MediaQueries 工作或检测屏幕大小/视口。此外，您无需刷新浏览器即可获得 MediaQuery 的结果。

查看这篇文章以获取详细信息和使用 MediaQueries 的“如何”：

http://www.smashingmagazine.com/2010/07/19/how-to-use-css3-media-queries-to-create-a-mobile-version-of-your-website/

实现这一点的最简单方法可能是在 HTML 的头部提供单独的 MediaQueries：

<link rel="stylesheet" type="text/css" media="only screen and (min-width: 480px)" href="/css/small-device.css" />

您还可以在主样式表中使用 MediaQueries：

@media screen and (max-width: 350px) {  /* -- If the view port is less than 350px wide (portrait on phone) then display the following styles -- */
   .content{
       padding:6px;
   }
}

我强烈建议您花时间阅读上述文章，以更好地了解 MediaQueries。一旦您了解如何最好地使用它们，您就会发现它们非常宝贵！