如何使用@media媒体查询定位特定的屏幕大小？

Question

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

麻烦的是,我的左栏不会崩溃(如果这是正确的术语),或者不会叠加.我想要的是,左列应移动到span8列下方并调整其宽度.它现在做的是,左列的宽度减小并挤压其内部的所有内容.我的目标是768x1024媒体屏幕的移动屏幕尺寸.

布局的基本标记是,左边是span8,右边是span4.span4是我的其他块.

<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
     */
}  

Answer 2

我终于得到了这个,通过阅读博客中的文章和已经回答的堆栈溢出问题,以及您对此问题的评论发表的文章.

基于移动设备的常见断点和视口,即用于大型destkops的1200px宽视口,我必须在媒体查询中插入自己的样式.

IE浏览器, @media (min-width) {mystyle here}

@media (min-width: 1200px) {
      .myContainer {
           width: 960px;
           margin: 0 auto;

      }
      .myleftBlock-should-collapse {
           float: none;
           width: 100%;
      }

 }

由于我使用的是Twitter Bootstrap Responsive.css文件,因此我需要为某些视口自定义媒体查询,以便它符合我的设计需求.

好吧,因为我正在设计固定宽度960px,我将自定义并重新计算我的.container和span类的宽度.我将从我的基本宽度960px转换像素到百分比基数.

因此,无论我想要折叠的块或元素,隐藏或显示在某些视口中,都应在媒体查询中进行相应的样式设置.

而且......我学到了关于响应式设计的新东西.屏幕大小与Viewport不同.