僅設置桌面佈局的最小寬度

Question

我正嘗試使用Twitter引導創建響應式設計。一切進展順利，但我無法弄清楚如何爲桌面用戶設置最小寬度。

當用戶在桌面上時，我不希望他們能夠將瀏覽器縮小到他們看到用於手機的響應功能（例如導航欄移動按鈕）的地步。當瀏覽器太小時，我寧願只有一個水平滾動條。如何在不影響移動設備佈局的情況下獲得此功能？

Answer 1

您可以通過媒體查詢解決此問題。唯一的問題是，你必須爲此設置一個固定的width，在這種情況下min-width似乎不起作用（在Firefox和Chrome中測試）。如果這是對你罰款，你可以試試下面的例子：

// Should be something > 1024 
@media only screen and (min-device-width: 1300px) { 
    body { 
     width: 1300px; 
    } 
} 

Answer 2

複製這種logicvault.com有自己的網站工作，你將需要更改引導CSS的方式，使您只有一個媒體查詢其踢在480px。

下面是他們設置的媒體查詢：

@media only screen and (max-width: 480px){ 
    // styles here 
} 

Answer 3

我能夠通過使用弗雷德裏克的意見來實現這一功能：

// Should be something > 1024 
@media only screen and (min-device-width: 1024px) { 
    body { 
     min-width: 1025px; 
    } 
} 

不過，我也需要調整引導響應文件，以便這些樣式僅適用於觸摸設備。我最終在我的頁面上添加了Modernizr並尋找觸摸類。

E.g.改變：

@media (min-width: 768px) and (max-width: 979px) { 
    // Styles are here 
} 

到：

@media (device-min-width: 768px) and (device-max-width: 979px) { 

    .touch { 
     // Styles go here 
    }