作为浏览器的CSS媒体查询大小？ [英] CSS Media Queries as Browser Resizes?

问题描述

我认为CSS媒体查询不工作，因为用户调整浏览器的大小？用户必须刷新页面才能使媒体查询生效吗？如何更新媒体查询可能与JS？目前我使用JS来检测窗口大小resize add addClass（）

I think CSS media queries does not work as user resizes the browser? The user will have to refresh the page for the media query to take effect? How can I update the media query perhaps with JS? currently I use JS to detect window size on resize add addClass()

推荐答案

p>您不需要JS让MediaQueries工作或检测屏幕大小/视图端口。此外，您不需要为MediaQuery的结果刷新浏览器。

You don't need JS for MediaQueries to work or to detect the screen size/view port. Also, you do not need to refresh your browser for the result of a MediaQuery to take place.

有关详细信息，请参阅此文章，以及如何查看使用MediaQueries：

Take a look at this article for detailed information and 'How to' for using MediaQueries:

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

可能最简单的方法是在HTML的头部提供单独的MediaQueries ：

Probably the easiest way to achieve this is to supply separate MediaQueries in the head of your HTML:

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

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

You can also use MediaQueries within your main stylesheet:

@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。一旦你了解如何最好地使用它们，你会发现他们是无价的！

I would highly recommended taking the time to read through the above article to get a better understanding of MediaQueries. Once you understand how to best use them, you will find them invaluable!

这篇关于作为浏览器的CSS媒体查询大小？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！