2012-10-05 36 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可以防止我看到的所有魔法! –

相关问题