CSS學習筆記——響應式佈局

響應式佈局

　　響應式佈局是如今很流行的一個設計理念，隨着移動互聯網的盛
行，爲解決現在各式各樣的瀏覽器分辨率以及不一樣移動設備的顯示效
果，設計師提出了響應式佈局的設計方案。所謂的響應式佈局，就是
一個網站可以兼容多個終端——而不是爲每一個終端作一個特定的版本。
也就說一個頁面能夠在多個終端呈現出你想要的效果，可以兼容各個
終端。

 

響應式佈局的優缺點

優勢：
　　面對不一樣分辨率設備靈活性強
　　可以快捷解決多設備顯示適應問題
　　根據不一樣的顯示器調整設計最適合用戶瀏覽習慣的頁面
缺點：
　　兼容各類設備工做量大，效率低下
　　代碼累贅，會出現隱藏無用的元素，加載時間加長
　　其實這是一種折衷性質的設計解決方案，多方面因素影響而達不到最佳效果
　　由於要適應不一樣的設備，頁面的結構可能會有所不一樣，會致使頁面的辨識度不強

 

利用CSS3-Media Query實現響應式佈局

一、media query：

　　經過不一樣的媒體類型和條件定義樣式表規則。媒體查詢讓CSS能夠更精確做用於不一樣的媒體類型和同一媒體的不一樣條件

 

二、語法結構及用法

　　@media 設備名 only （選取條件） not (選取條件) and （設備選取條件），設備二 {sRules}

　　(1)在link中使用@media：

<link rel="stylesheet" href="1.css" media="screen and (min-width:1000px)"

　　（2）在樣式表中內嵌@media：

<style>
  @media  screen and (min-width: 600px) {
     .one{
        border:1px solid red;
        height:100px;
        width:100px;
     }
    
  }
</style>

 

 

 

特殊設備檢測1.Phone4 <link rel="stylesheet" media="only screen and (-webkit-min-device-pixel-ratio: 2)" type="text/css" href="iphone4.css" />2.iPad <link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css" type="text/css" /> <link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css" type="text/css" />3.android /*240px的寬度*/ <link rel="stylesheet" media="only screen and (max-device-width:240px)" href="android240.css" type="text/css" /> /*360px的寬度*/ <link rel="stylesheet" media="only screen and (min-device-width:241px) and (max-device-width:360px)" href="android360.css" type="text/css" /> /*480px的寬度*/ <link rel="stylesheet" media="only screen and (min-device-width:361px) and (max-device-width:480px)" href="android480.css" type="text/css" />