我可以使用laravel-if-else条件来检查css媒体查询条件并在其中使用@include函数吗

Question

我目前正在处理一个项目，它真的很乱。我想添加一个@include函数，但如果只想添加大于991px的device max的话。我不能直接在css中使用它，因为所有内容都加载到一个页面上。所以我想在设备之前和之后使用@include功能进行检查。

例如

如果设备宽度>991像素@包括(我想使用的内容(其他的什么也没发生

所以如果可以的话，请帮助我，伙计们。更多细节，这里是我的代码块

<div class=mobilesubcatscontainer>
@include('search.inc.sidebar.categories.calonmobile')
<div class="listingtab" id="listingtab">
<!-- some content -->
</div>
</div>

请注意，我需要以某种方式检查代码块中的include函数。。。

谢谢！

Answer 1

首先，您不能用php直接检测设备宽度。

因此，我们需要从Javascript获得帮助。第一步，我们需要创建设备宽度变化时的检测功能。然后我们用get方法调用我们的视图。

Javascript；

$(window).resize(function() {
if(document.documentElement.clientWidth < 991) {
$.get( "{{route('calonmobile')}}", function( data ) {
$(".mobilesubcatscontainer").prepend(data);    
});
}
});

Route.php；

Route::get('/calonmobile', function () {
return view('search.inc.sidebar.categories.calonmobile');
});