javascript - 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>