在手機上調整寬度以適合屏幕

Question

我為導航欄創建了一個dropdown菜單，但問題是該div的width為825px ，並且必須采用這種方式才能在台式機上正確顯示，但是問題是我無法使其在移動設備上正確顯示。 我正在尋找一種在移動時自動減小寬度的方法。 謝謝！

/*dropdown button the container div needed to position the dropdown content*/
.ddmenu { 
    position: relative; 
    display: inline-block; 
}

/* Dropdown Content (Hidden by Default) */ 
.ddmenu-content {
    display: none;
    position: absolute;
    left: -132px;
    top: 26px;
    background-color: #212125;
    width: 825px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); 
}

/* Links inside the dropdown */
.ddmenu-content a {
    color: white;
    padding: 12px 16px;
    text-decoration: none;
    display: block; 
}

/* Change color of dropdown links on hover */
.ddmenu-content a:hover {background-color: #0174DF}

/* Show the dropdown menu on hover */
.ddmenu:hover .ddmenu-content { display: block; }

/* Change the background color of the dropdown button when the dropdown content is shown */ 
.ddmenu:hover .dropbtn { background-color: #0215cb; }

Answer 1

您正在尋找的是特定於設備的樣式表：

<link rel='stylesheet' media='screen and (max-device-width: 480px)' href='mobile.css' type='text/css'>

Answer 2

您必須更改width: 825px; 到width: 100%; 並添加max-width: 825px;

/* Dropdown Content (Hidden by Default) */ 
.ddmenu-content { 
    display: none; 
    position: absolute; 
    left: -132px; 
    top: 26px; 
    background-color: #212125; 
    width: 825px; 
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

這樣，您可以將最大寬度設置為825px； 這將是在桌面上，當您減小屏幕尺寸時，其寬度將為100％