引導下拉菜單，權當屏幕太小

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>