移动适配总结

移动端适配，本篇介绍媒体查询方式，配合%，来进行移动端适配，

移动端与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适配各有各的难处，但是只要掌握对%的运用很多事情就迎刃而解了；