寬度調整移動，以適應屏幕

我做了一個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; }

來源

2016-08-24 Oliver

可以寫媒體查詢或使用引導程序。我寧願你去引導。你只需要包含不同的類。例如，對於大型桌面使用class col-lg，移動設備使用col-x等。您可以在此處詳細瞭解它：http://getbootstrap.com/css/ –

最好將完整代碼作爲** Stack Snippet **在你的問題中以更好地觀察問題 – vivekkupadhyay

你要尋找的是設備特定的樣式表：

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

來源

2016-08-24 08:59:26

這正是我所期待的。作品完美無瑕。非常感謝！ – Oliver

很高興我可以幫助:) –

你必須改變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％的寬度。

來源

2016-08-24 09:47:15 Webdesigner15

這不起作用，div的寬度調整爲內容，使其小於825px;在桌面上。 – Oliver

@奧利弗我做了一些改變，併爲此做了一個小提琴： https://jsfiddle.net/yovanverma/vLfqtn4j/ 我希望爲你工作 – Webdesigner15

寬度調整移動，以適應屏幕

回答

相關問題