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

移動端與pc的區(qū)別：

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

2，mobile端無需監(jiān)聽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規(guī)定為 屏幕最大寬度720px內生效。（個人喜歡將媒體查詢設置在css內）

然后在mobile中寫css樣式。

寫樣式時需要注意：

最小屏幕與最大屏幕之間的展示效果；

font-size的設置可以少于12px。在chrome調試時是看不到字體樣式的；

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

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

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

高度設置為pc高的一半；

在開發(fā)中還有很多需要進行思考的地方，這里就不一一舉例，遇到問題就想一下相應解決辦法。

移動適配與pc適配各有各的難處，但是只要掌握對%的運用很多事情就迎刃而解了；

?

轉載于:https://www.cnblogs.com/Tmode/p/10941985.html

總結

以上是生活随笔為你收集整理的移动适配总结的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內容還不錯，歡迎將生活随笔推薦給好友。