CSS 媒体查询是如何工作的

Question

我需要知道 CSS 媒体查询是如何工作的。 我的意思是，如果我使用@media(min-width: 768px)，每次调整窗口大小时都会调用这个函数吗？

因为我想知道是否可以使用 Javascript $(window).bind('resize orientationchange') 或者它是否会占用更多资源。

用于在 div 中添加或删除类，例如： http://jsfiddle.net/xbh28o08/

我的目标是在 HTML 中输入一个数据属性，该属性确定导航栏何时必须折叠（例如数据断点“768”）。我会得到这个断点来自动制作一个响应式导航栏，而无需更改任何 CSS。我的想法是用 Javascript 来做，但根据你的回答，这似乎不是一个好主意

var widthScreen = $(window).width();


if (widthScreen > 768)
    $('nav').addClass('large');
else
    $('nav').addClass('small');


$(window).bind('resize orientationchange', function() {
    widthScreen = $(window).width();

    if (widthScreen > 768){
        $('nav').addClass('large');
        $('nav').removeClass('small');
    }
    else{
        $('nav').removeClass('large');
        $('nav').addClass('small');
    }
});

Answer 1

回答您的第一个问题：是的，每次调整窗口大小时都会调用媒体查询。

不需要用javascript添加类，我给你提供了一个例子：

它完全一样，但不需要js。最好避免在不需要时使用 javascript。

nav{
  background: green;
}

@media(min-width: 768px){
    
    nav{
        background: red;
    }
}

<nav>
	<ul>
		<li>Link 1</li>
		<li>Link 2</li>
	</ul>
</nav>

Answer 2

我建议你使用 css 媒体查询而不是 javascript，因为 css 比 javascript 快 只要您的设备宽度为 768px，所有的 css 都会被调用并覆盖任何其他（如果存在） 有关更多信息，您可以查看下面的链接 Css Media Queries

Answer 3

只要满足其中的条件（例如，媒体屏幕和 768 像素的最大宽度），CSS 媒体查询就会应用，否则就会被忽略。它适用于窗口大小，并将在调整大小时更新。您可以通过缩小浏览器在本网站上进行测试。

不建议使用这种用例（使用窗口调整大小事件），因为它会在 每个 调整大小事件时触发。不仅在调整大小完成时，而且在开始和结束之间的每个滴答声中。我知道的唯一用例是添加/删除类，这既不推荐，也是彻头彻尾的 CPU 猪。

Answer 4

媒体查询仅在媒体查询中提到特定点（宽度或高度）时触发，而 javascript 调整大小将在调整大小期间每个像素更改时触发。而且，JS 是 IMO 资源密集型的，而 CSS 不是而且速度更快。有一个read here

因此，在您的情况下，不要删除和添加类，而是拥有一个类并根据媒体查询中的屏幕大小覆盖它的属性。比如：

.my-class { width: 400px; }

@media(min-width: 768px){

    .my-class { width: 200px; }
}

或

您可以一直拥有 2 个类，但根据屏幕大小，只有一个会生效。这样你就不会覆盖属性（这有点难看，但是，这只是我）

// screen <= 767
@media(max-width: 767px){
    .nav-small {
        width: 320px;    
    }
}
// screen >= 768
@media(min-width: 768px){
    .nav-large {
        width: 100%;
    }
}