菜單問題和顯示屏尺寸

我在我的網站上有一個垂直菜單，我想讓水平縮小網頁時該如何實現？菜單問題和顯示屏尺寸

我這裏離開現場：

我使用WordPress的創造這個網站是否有幫助

菜單至今的唯一的事情是這樣的：

#menu_esquerda{ 
float: left; 

} 

#menu-o-menu{ 
list-style: none; 
margin-top: 20px; 
} 

#menu-o-menu a{ 
color: white; 
text-decoration: none; 
font-family: Lato, Arial; 
} 

#menu-o-menu li{ 
padding-bottom: 10px; 
}

來源

2014-04-28 Angus

嘗試使用顯示：在瀏覽器中內嵌收縮 – 4dgaurav

使用media queries將css定位到特定設備。

你的情況，假設你想在菜單的水平，當你調整窗口的大小和窗口大小小於980px，聲明如下聲明中被應用於所有與寬度的裝置之下980px樣式

@media screen and (max-width: 980px) { 
    // write the css here 
}

使菜單水平試試這個

@media screen and (max-width: 980px) { 
    #lateral{ 
    float:none; 
    width:100%; 
    } 
    #desc_fantas p{ 
    height:auto; // you have declared 100px height for this initially, i just changed it to reduce the height when the menu is horizontal. Change it as you need. 
    } 
    #menu-o-menu{ 
    text-align:center; 
    } 
    #menu-o-menu li{ 
    display:inline-block; 
    } 
}

來源

2014-04-28 09:18:28 James

這個伎倆！感謝：D – Angus

使用條件。在一定的寬度下，CSS會改變並將菜單轉換爲水平。像這樣的東西。此代碼與您的網站無關。這取決於你做什麼！

@media screen and (min-width: 600px) { 

#header ul { 
    display: block; 
    margin-right: 1.02048%; /* 10/980 */ 
} 
#header form { 
    display: none; 
} 
#footer p { 
    display: block; 
    line-height: 30px; 
    color: #4e4e4e; 
    text-align: left; 
    float: left; 
    width: 16.3265%; /* 160/980 */ 
    min-width: 120px; 
    margin-left: 1.0204%; /* 10/980 */ 
} 

} 

@media screen and (min-width: 1000px) { 

#header form { 
    display: block; 
} 
#header ul a { 
    display: block; 
    float: left; 
    width: 74px; 
} 

#header div > a.mobile { 
    display: none; 
} 
}

來源

2014-04-28 08:28:02 ProfileTwist

您使用了max-width和max-height。

在這種情況下，您可以改善其處理方式，而不是在小窗口中瀏覽器的寬度和最大寬度。

來源

2014-04-28 08:30:22

我沒有使用最大寬度... – Angus

http://jsfiddle.net/WonSeokHan/9nH7b/3/ –

你有一個div＃橫向有寬度=「300px」，這是限制你的整個側欄區域。所以，你只有很多空間可以水平工作。

在您的li elems上設置display =「inline-block」的作品，但您需要大幅調整字體大小和邊距等以使其看起來不錯。

來源

2014-04-28 08:38:20 davidpm4

c你解釋得更好嗎？一個小提琴也許？ – Angus

菜單問題和顯示屏尺寸

回答

相關問題