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。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

我建议你使用css媒体查询而不是javascript，因为css比javascript更快一旦您的设备宽度为768px，将调用其中的所有css，如果存在，将覆盖任何其他css 有关详细信息，请查看以下链接 Css Media Queries

Answer 3

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

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

.my-class { width: 400px; }

@media(min-width: 768px){

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

OR

您可以始终拥有2个课程，但只有一个课程会根据屏幕尺寸生效。这样你就不会覆盖属性（这有点难看，但是，这只是我）

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

Answer 4

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

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

CSS媒体查询如何工作

4 个答案: