CSS3–2.css3 響應式佈局

1.響應式佈局

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

優勢：

面對不一樣分辨率設備靈活性強

可以快捷解決多設備顯示適應問題

根據不一樣的顯示器調整設計最適合用戶瀏覽習慣的頁面

缺點：

兼容各類設備工做量大，效率低下

代碼累贅，會出現隱藏無用的元素，加載時間加長

其實這是一種折衷性質的設計解決方案，多方面因素影響而達不到最佳效果

由於要適應不一樣的設備，頁面的結構可能會有所不一樣，會致使頁面的

辨識度不強

---

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

2.語法結構及用法:

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

(1)在link中使用@media:

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

(2)在樣式表中內嵌@media：

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