html - 从智能手机查看时如何使固定侧边栏显示得很好

Question

我正在为我的简单网页使用引导程序和一些自定义 css。我有一个固定的侧边栏，它在用户滚动#contentdiv 时保持其位置。但是，当在智能手机上查看网页时（或者浏览器的宽度变小），侧边栏会变得很奇怪，而不是很好地占据网站的顶部。

我正在寻找的行为与Twitter 的引导站点相同。减小浏览器的宽度以了解我的意思。

我目前的结构是这样的：

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

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

score 1 · Accepted Answer

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

媒体查询由媒体类型和零个或多个检查特定媒体功能条件的表达式组成。

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

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

1 回答 1