开发移动端应从以下几方面考虑：
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）的字体大小，兼容性很好 使用简单 但是需要设置