如何使用@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媒體查詢定位特定的屏幕大小？

回答

相關問題