html - 如何让固定的侧边栏在从智能手机查看时很好地显示

Question

我正在为我的简单网页使用 bootstrap 和一些自定义 CSS。我有一个固定的边栏，当用户滚动浏览 #content div 时，它会保持其位置。然而，当在智能手机上查看网页时(或浏览器的宽度变小)，侧边栏表现不稳定，而不是很好地占据网站的顶部。

我正在寻找的行为与 Twitter's bootstrap site 相同有。减小浏览器的宽度以了解我的意思。

我现在的结构是这样的:

<div class="span3" style="position:fixed">
    // sidebar stuff
</div>

<div class="span8 offset3">
    // content
</div>

Answer 1

您可以为此使用媒体查询。

A media query consists of a media type and zero or more expressions that check for the conditions of particular media features.

此媒体查询表示样式表可用于视口(viewport)(呈现文档的屏幕/纸张部分)宽度在 400 到 700 像素之间的设备:

@media screen and (min-width: 400px) and (max-width: 700px) { … }

来源:http://www.w3.org/TR/css3-mediaqueries/