2013-01-24 69 views
3

我不明白爲什麼Twitter Bootstrap正在考慮從768到979而不是從768到1024(iPad)的平板電腦尺寸。問題是,如果客戶請求平板電腦的自定義設計,該平板電腦設計將無法在橫向模式下在iPad上顯示。Twitter Bootstrap平板電腦尺寸1024不是979的響應式佈局

另外,如果我有一個帶側邊欄(span9 + span3)的內容,如果側邊欄是「隱藏式平板電腦」,內容將不會擴展,實際上它將具有相同的大小,並且我必須覆蓋bootstraps span dimmensions達到理想的佈局。

我做錯了什麼?

回答

3

1)我認爲這裏的想法是,如果有人要求超過980像素的頁面,它更可能來自桌面計算機,而不是來自iPad。你也可以讓你的網頁iPad和網頁友好的寬度:)。

如果你不得不爲landscape ipad和web設計不同的設計,那麼當屏幕介於980和1024px之間時,一個選項會寫一堆自定義css。

@media (min-width 980px) and (max-width: 1024px) { 
    //my custom css for ipad landscape 
} 

2)您的權利這樣做。所有.hidden-tablet並設置display: none;

@media (min-width: 768px) and (max-width: 979px) { 
    // ... some other code 

    .hidden-tablet { 
    display: none !important; 
    } 
} 

它沒有做任何其他類型的調整,所以你這就是與媒體查詢做。

+0

好的,但如果我使用介於980和1024像素之間的媒體查詢,併爲橫向上的ipad製作一些自定義CSS樣式,我將不得不重新制作768和980像素之間的分辨率,然後引導程序重新計算跨度。例如:在桌面尺寸(> 979px)上,span9將爲870px,在ipad版本(768 - > 979)上爲700。 –

+0

就像您的樣式和媒體查詢範圍不必完全對應於引導程序使用的預定義媒體查詢範圍。如果你想爲某些ipad範圍使用某種風格,只需進行媒體查詢,如@media(min-width:768px)和(max-width:1024px){}。在其他項目中,我不得不這樣做。甚至像@ @media(max-width:659px)這樣的隨機 – hajpoj

相關問題