移動適配總結

移動端適配，本篇介紹媒體查詢方式，配合%，來進行移動端適配，

移動端與pc的區別：

1,mobile端沒法使用hover 事件，多的是click。

2，mobile端無需監聽keyboard。

3，pc寫頁面須要作的是兼容各大瀏覽器，而移動端無論是ios或者是安卓，大都採用webkit內核，可是須要兼容不一樣屏幕下的效果，作到自適應。

4.手機要麼%，要麼rem來完成自適應，pc能夠大都採用px，而我在移動端更傾向rem，由於不須要計算。

 

下面的內容就是對移動端的準備工做，與須要瞭解內容；

1移動端不能讓用戶縮放，並等比例在頁面內展現；

1 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,user-scalable=no">

表示 縮放1:1 最大縮放1:1 ，手動縮放無效。

 

下面我以%的來介紹一下適配的方法；

首先我在頁面中引入個人mobile.css

並經過css3媒體查詢方法，將css規定爲 屏幕最大寬度720px內生效。（我的喜歡將媒體查詢設置在css內）

而後在mobile中寫css樣式。

寫樣式時須要注意：

1. 最小屏幕與最大屏幕之間的展現效果；

2. font-size的設置能夠少於12px。在chrome調試時是看不到字體樣式的；

3. 注意內容溢出應該如何解決；

4. 背景圖片的設置，應該添加background-size等屬性來設置最大樣式；

5. logo設置固定值，導航文字設置超出隱藏；

6. 高度設置爲pc高的一半；

在開發中還有不少須要進行思考的地方，這裏就不一一舉例，遇到問題就想一下相應解決辦法。

移動適配與pc適配各有各的難處，可是隻要掌握對%的運用不少事情就迎刃而解了；