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

我是新来的快速响应式设计，现在我正忙于使用twitter bootstrap responsive.css。我的项目遇到了一些麻烦。如何使用@media媒体查询定位特定的屏幕大小？

问题是，我的左列不会崩溃（如果这是正确的术语），或者不会叠加。我想要的是，左列将在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的引导）针对特定的屏幕尺寸。然后定制它以适应我们的需求？

来源

2012-08-12 Gary Lising

我终于这一次，通过读取从已回答了博客和堆栈溢出问题的文章，并从这个问题您的意见寄物品。

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

即@media (min-width) {mystyle here}

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

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

}

由于我使用Twitter的引导Responsive.css文件，我需要定制某些视传媒查询，以便它会适合我的设计需求。

好吧，因为我设计了960px的固定宽度，我将自定义并重新计算我的.container和span类的宽度。我将从960像素的基本宽度转换像素为基数。

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

还有...我学到了关于响应式设计的新东西。屏幕尺寸与视口不同。

来源

2012-08-13 05:01:12

为了受益于Bootstrap的响应部分，您需要使用row-fluid类（而不是row类）。阅读更多信息，请致电http://twitter.github.com/bootstrap/scaffolding.html#fluidGridSystem。

所以，你的基本布局应该是：

<div class="row-fluid"> 
    <div class="span4">...</div> 
    <div class="span8">...</div> 
</div>

来源

2012-08-12 13:15:14

，我发展AA固定宽度的响应式布局。它有940px的最大宽度，我想要的是应用我的风格与768到800px的视口。现在我正在掌握如何使用媒体查询。 – 2012-08-12 14:39:49

的引导网站上有一个用于引导的媒体查询。您可以将这些调整你的需求：http://twitter.github.com/bootstrap/scaffolding.html#responsive – 2012-08-12 14:56:38

由于您使用的引导，使用默认的变量来针对特定的屏幕尺寸：

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

来源

2014-07-23 21:45:06 Oriol

行流体自举类exapmles可以在这里找到 http://getbootstrap.com/2.3.2/examples/fluid.html

如果你想让Visual Studio帮助CSS，那么从http://bootswatch.com得到LESS文件，并得到t他Twitter.Bootstrap.Less nuget包。然后添加以下到bootswatch.less文件

@import url("bootstrap/bootstrap.less");

有替代自举排液，所谓的“基础” http://foundation.zurb.com/develop/download.html#customizeFoundation

它有“小”和“大”的媒体和其它更多的定义：

<div class="show-for-small" style="text-align: center"> 
    <a href="#">Desktop here</a> 
</div> 
<div class="large-4 columns hide-for-small"> 
    <a href="#"> 
     <div class="panel radius callout" style="text-align: center"> 
     <strong>Mobile here</strong> 
     </div> 
    </a> 
</div>

来源

2014-08-13 05:06:31 OzBob

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

回答

相关问题