移動端網頁開發)------響應式網頁

移動端網頁開發

移動端網頁開發的兩種方案：

1. 響應式網頁
2. 開發一個新的網站。使用移動端的布局方式。

響應式網頁

概念

同一個網頁會根據視口的不同，顯示不同的樣式。

優缺點

優點

1. 面對不同分辨率的裝置比較靈活。
2. 比較快捷的解決多裝置的顯示适應問題。

缺點

1. 如果相容的裝置比較多，則工作量比較大，效率比較低。
2. 代碼會比較臃腫，加載時間會比較長。

适用場景

1. 如果是一個小型的網站，我們一般使用響應式網頁，因為響應式的開發量比較小，開發速度比較快。
2. 如果是一個大型的網站，比如說，小米，騰訊新聞等等，适合第二種方法，開發一套适用于移動端的網站。

如何開發響應式網頁

媒體查詢

css2就已經部分支援了，css3又新增了一些屬性。IE8以下的浏覽器不支援。

1.設定meta标簽

2.媒體查詢基本文法

@media 媒體類型 and (媒體特性){
	樣式
}
           

3.媒體類型

媒體類型可以了解為各種裝置。

• all 所有的媒體類型
• screen 螢幕裝置：電腦，智能手機，平闆電腦。
• print 列印裝置（極少）
• speech 螢幕閱讀器（極少，給盲人用的裝置）

4.實作方式

1. 外鍊式 通過link标簽的media屬性來設定。
2. 内嵌式 直接寫在style标簽中。

媒體特性

max-width min-width（重點）

max-width:x 小于等于x時生效

/* 媒體裝置必須是螢幕裝置， 小于等于1200px的時候生效。 */
    @media screen and (max-width:1200px){
      h2{
          color: green;
      }
    }
           

min-width:x 大于等于x時生效

/* 媒體裝置必須是螢幕裝置， 大于等于1300px的時候生效。 */
    @media screen and
        (min-width:1300px) {
      h2{
        font-size: 48px;
      }
    }
           

裝置方向

屬性：orientation

1. portrait 豎屏 高大于寬
2. landscape 橫屏 寬大于高

邏輯判斷

and：滿足多個條件生效。

，：多個條件中滿足一個時生效。

not ：不滿足條件時生效。

【注意】

如果存在多個max-width判斷，則數值大的放在前面，

如果存在多個min-widht判斷，則數值小的放在前面。