CSS媒體查詢（引導）

Question

我使用下列媒體查詢我的網站

 @media (max-width: 976px) {} 

我發現，當我看到我的網站

http://46.32.253.11/ 

在iPad上3在橫向模式下，縱向模式下顯示的導航欄按鈕不起作用，我的導航欄分成兩行。

我是否需要添加另一個媒體查詢，或者我可以編輯現有的查詢嗎？如果是的話，我需要做出什麼樣的改變。

進出口真正的新媒體查詢，如果任何人有一個很好的資源，他們希望和大家分享，將是巨大

Answer 1

有這個CSS的技巧製品，它的標準設備分辨率的引導偷看：http://css-tricks.com/snippets/css/media-queries-for-standard-devices/

有下面列出的landscape和portrait特定媒體的查詢：

/* iPads (landscape) ----------- */ 
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) { 
    /* Styles */ 
} 

/* iPads (portrait) ----------- */ 
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) { 
    /* Styles */ 
} 

我想強調，雖然，從「移動第一」的方針，你SH不應該爲設備設計，而是爲了適合您的設計的分辨率斷點。嘗試從非常小的分辨率開始，例如320 x 480.從那裏，增加瀏覽器寬度，直到該設計「中斷」（即看起來像廢話），然後在該分辨率添加斷點。檢查瀏覽器寬度的簡便方法是在Chrome（或Firebug for Firefox）中打開您的開發者控制檯，然後輸入document.body.offsetWidth並敲擊回車。這將顯示瀏覽器寬度的像素量。不斷添加/重新安排事物，直到您在各種設備上獲得所需的體驗。

網絡正在向前發展。這意味着我們必須考慮智能手機一直到電視和投影儀。考慮到設計你的網站。

我希望這會有所幫助。