2012-10-05 35 views
1

我的網站的CSS目前由Twitter Bootstrap照顧,它看起來/在高分辨率,如我的1920x1200顯示器之一,偉大的作品。但是,只要我使用智能手機等較小的設備,甚至是高分辨率的iPad 3,我都會注意到我的電腦屏幕上並沒有出現各種各樣的怪癖。我當然可以通過水平調整瀏覽器窗口的大小來模擬它們。Twitter的Boostrap可以變得更加適合移動設備嗎?

怪癖通常是某種形式的隨機調整大小(圖片將在標題文本之前調整大小),最終所有東西都會變成一個大列,這對任何瀏覽該網站的人來說都是無用的和難以理解的。

如何讓網站在小屏幕上看起來完全一樣?看看apple.comnest.com,你會注意到它們在你用來訪問它們的任何設備上都是相同的。

我知道這是Bootstrap試圖提高響應速度/流暢度,但我覺得這樣,除非我花費大量精力調整不同水平分辨率的行爲,我更好地向用戶顯示任何相同版本屏幕。有什麼我可以在Bootstrap中關閉,這將防止跨度的智能堆疊,並將保持在任何地方相同的形狀?

非常感謝!

回答

2

Bootstrap在單個文件中支持少量的媒體查詢,以幫助您使項目更適合不同的設備和屏幕分辨率。以下是包含的內容:

Label Layout width   Column width  Gutter width 
Large display 1200px and up 70px    30px 
Default   980px and up  60px    20px 
Portrait tablets 768px and above 42px    20px 
Phones to tablets 767px and below Fluid columns,no fixed widths 
Phones   480px and below Fluid columns,no fixed widths 

/* Large desktop */ 
@media (min-width: 1200px) { ... } 

/* Portrait tablet to landscape and desktop */ 
@media (min-width: 768px) and (max-width: 979px) { ... } 

/* Landscape phone to portrait tablet */ 
@media (max-width: 767px) { ... } 

/* Landscape phones and down */ 
@media (max-width: 480px) { ... } 
+0

好點。原來我使用的主題在包中有一個「responsive.css」文件,它正在做上面列出的內容:它將檢查瀏覽器的像素寬度並相應地調整每個類的值。不使用.css可以防止我看到的所有魔法! –

相關問題