使用media query 來實現響應式設計

標籤：

你的網頁在手機上顯示效果可以在電腦上一樣好看。完成這個任務的奧秘被稱為響應式設計，媒體查詢（media query）是實現網頁響應的關鍵。

在電腦上一個例子：

<div class="row">     <div class="span4">...</div>     <div class="span4">...</div>     <div class="span4">...</div></div>

css樣式：

.row{  width:100%;}.span{  width:300px;  float:left;  margin-left:30px;}

 

這個在電腦上顯示，是正常的，在一定裝置上布局並不是我們期望的。

 

Media query

在css外部設定應用相應樣式的條件。有一些特徵可以用來決定是否應用哪些樣式。下面這些是其中重要的部分：

. width

. height

. device width

. device height

. resolution

. orientation

. aspect ratio

通過裝置寬度來決定使用什麼樣式。下面相應的規則。

@media(max-width:500px)

 

如果規定螢幕寬度小於500px 的時候使用css樣式。這個樣式條件為true,才會引用。

 

有三種不同方式來應用這個條件規則：

1、<link> tag

      如下 ：<lin rel ="stylesheel" type="text/css" media="screen and(max-width:500px)" href="test.css">

2、media condition

      一塊css代碼可以用花括弧包圍起來，css定義只有當media query 滿足下麵條件的時候才有效：

       @media screen and(max-width:500px){            .row{                     width:100%;          　  　}       　 .span{ 　　　　　　　width:auto; 　　　　　　　float:left;　　　　　　　 margin:0; 　　　　　　}       }

 

 

3、import condition 

     一個引用只有在media query 條件滿足的時候才回將外部css匯入。在外部檔案裡定義的css樣式只有條件被滿足的時候才會有效。

    @import url("test.css") screen and(max-width:500px);

 

我們可以使用media query 來改變頁面的布局，但是使用它們做類似條件css定義也是可以的。我們經常通過改變字型大小、圖片品質、空白等其他元素

來更好的適應不同類型的裝置。

 

使用media query 來實現響應式設計