CSS媒体查询作为浏览器调整大小？

Question

我认为CSS媒体查询不起作用,因为用户调整浏览器的大小？用户必须刷新页面才能使媒体查询生效？如何使用JS更新媒体查询？目前我使用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:

<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.一旦你了解了如何最好地使用它们,你会发现它们非常宝贵!