CSS媒体查询作为浏览器resize？

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

Answer 1

您不需要JS for 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：

您还可以在主样式表中使用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。 一旦你了解了如何最好地使用它们，你会发现它们非常宝贵！