移动端开发浅析

开发移动端应从以下几方面考虑：

1、移动端布局适配

2、移动端事件

3、移动端交互效果

4、移动端的前端框架

5、移动端开发调试

 

这里主要讲解第一点。在移动端适配中，不得不提到viewport和布局方式：

viewport是视口，他的显示情况如下：

1、网页会先放到viewport中

2、viewport缩放到浏览器尺寸

3、viewport放入浏览器

3、此时网页内容也被缩放了

 

我们可通过meta标签设置viewport

meta标签提供关于HTML文档的元数据。他不会显示在页面上，但是对于机器是可读的。可用于浏览器（如何显示内容或重新加载页面），搜索引擎（关键字），或其他Web服务。

meta viewport的6 个属性：

| width | 值 |

| -------- | -----: |

| initial-scale | 设置layout viewport 的宽度，为一个正整数，或字符串"width-device" |

| minimum-scale | 设置页面的初始缩放值，为一个数字，可以带小数 |

| maximum-scale | 允许用户的最大缩放值，为一个数字，可以带小数 |

| height | 设置layout viewport 的高度，这个属性并不重要，很少使用 |

| user-scalable | 是否允许用户进行缩放，值为"no"或"yes", no 代表不允许，yes代表允许 |

 

布局方式：

固定布局：每个元素都是固定的尺寸，内容区域居中在浏览器中间

响应式布局：利用媒体查询来时实现不同尺寸的浏览器显示结构不同

自适应布局：属于响应式里的一种，利用rem、 百分比、vwvh等布局单位来实现

移动端布局选用自适应布局，在这里应注意单位的选择：

1、%  

简单  无需设置  兼容性好   但基于父元素的属性来设置，如父元素无宽高则设置无效

2、vwvh

一个vw等于viewport宽度的百分之一，一个vh等于viewport高度的百分之一

vmax等于vw和vh中较宽的那个  vmin等于两个中较小的那个  简单无需设置   但是兼容性不好

3、rem

一个rem等于根元素（HTML）的字体大小，兼容性很好  使用简单   但是需要设置