使用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,纔會引用。

 

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

一、<link> tag

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

二、media condition

      一塊css代碼能夠用花括號包圍起來，css定義只有當media query 知足下面條件的時候纔有效：

       @media screen and(max-width:500px){

            .row{

                     width:100%;

          　  　}

       　 .span{

 　　　　　　　width:auto;
 　　　　　　　float:left;
　　　　　　　 margin:0;
 　　　　　　}
       }

 

 

三、import condition 

     一個引用只有在media query 條件知足的時候纔回將外部css導入。在外部文件裏定義的css樣式只有條件被知足的時候纔會有效。

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

 

咱們可使用media query 來改變頁面的佈局，可是使用它們作相似條件css定義也是能夠的。咱們常常經過改變字體大小、圖片質量、空白等其餘元素

來更好的適應不一樣類型的設備。