twitter-bootstrap - 如何使用@media 媒体查询定位特定的屏幕尺寸？

Question

我是响应式设计的新手，我现在正在玩 twitter bootstrap responsive.css。我的项目遇到了一些麻烦。

问题是，我的左栏不会塌陷(如果这是正确的术语)，也不会堆积起来。我想要的是，左列应移到 span8 列下方并调整其宽度。它现在所做的是，左列的宽度减小并挤压其中的所有内容。我的目标是 768x1024 媒体屏幕的移动屏幕尺寸。

我对布局的基本标记是，左侧为 span8，右侧为 span4。 span4 是我的其他 block 所在的位置。

<div class="row">
<div class="span8">
    some block with contents
</div>

<div classs="span4">
    <div class="sideBlock"><!--fluid width was set-->
        <img src="http://placehold.it/298x77">
    </div>
</div>

我的主要问题是，我们如何使用媒体查询(使用 twitter Bootstrap )定位特定的屏幕尺寸。然后定制它以满足我们的需求？

Answer 1

由于您使用的是 Bootstrap，因此请使用默认变量来定位特定的屏幕尺寸:

// Extra small screen / phone
$screen-xs:                  480px !default;

// Small screen / tablet
$screen-sm:                  768px !default;

// Medium screen / desktop
$screen-md:                  992px !default;

// Large screen / wide desktop
$screen-lg:                  1200px !default;

例子:

@media (min-width: $screen-sm) and (max-width: $screen-md) {
    /*
     * styles go here
     */
}