引导下拉菜单，权当屏幕太小

Question

我有一个下拉菜单，使用

类=下拉菜单

下拉菜单中使用正确的网站上额外的空间。如果我缩小屏幕（或使用移动设备），则右侧网站上可能没有空间。在这种情况下，我可以使用

类=下拉菜单，右

它采用左侧部位的空间来代替。 我的问题是，有没有办法检测屏幕的大小，并基于上述两个选项之一呈现一个HTML模板？ 感谢 卡尔

Answer 1

解决方案使用媒体查询仅CSS

注：全屏运行的代码，并尽量减少屏幕

@media (min-width: 768px) { 
 
    .one { 
 
    width: 30px; 
 
    height: 30px; 
 
    background-color: red 
 
    } 
 
} 
 
@media (max-width: 768px) { 
 
    .two { 
 
    width: 30px; 
 
    height: 30px; 
 
    background-color: yellow 
 
    } 
 
}

<div class="one two "></div>

看Ť他的回答：https://stackoverflow.com/a/33209805/4696809在全屏这个答案运行片断可以看到菜单，如果你减少窗口大小的菜单将消失，按钮就会出现即使我改变中心部分也取决于窗口大小

使用jQuery

注意：全屏运行代码，并尝试减少屏幕，并看到控制台 和div.if你减少屏幕宽度div颜色将改变。

$(document).ready(function() { 
 
    $(window).resize(function() { 
 
    var width = $(window).width() 
 
    console.log($(window).width()) 
 
    if (width > 786) { 
 
     console.log("BIg") 
 
     $('.first').removeClass('new') 
 
    } else if (width < 786) { 
 
     console.log("small") 
 
     $('.first').addClass('new') 
 
    } 
 
    }); 
 
});

.first { 
 
    width: 30px; 
 
    height: 30px; 
 
    background-color: red; 
 
} 
 
.new{ 
 
    background-color: yellow; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="first"></div>