移动适配总结

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

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