viewport即视窗、视口，用于显示网页部分的区域，在PC端视口即是浏览器窗口区域，在移动端，为了让页面展示更多的内容，视窗的宽度默认不为设备的宽度，在移动端视窗有三个概念：布局视窗、视觉视窗、理想视窗。
布局视窗：
在浏览器窗口css的布局区域，布局视口的宽度限制css布局的宽。为了能在移动设备上正常显示那些为pc端浏览器设计的网站，移动设备上的浏览器都会把自己默认的viewport设为980px或其他值，一般都比移动端浏览器可视区域大很多，所以就有横向滚动条。
视觉视窗：
终端设备显示网页的区域。
理想视窗：
针对当前设备最理想的展示页面的视窗，不会出现横向滚动条，页面刚好全部展现在视窗内，理想视窗即终端屏幕的宽度。
viewport详细设置：
通过设置viewport可以设置页面大小，通过meta标签可以设置viewport信息。viewport有以下几个属性
| width | 视口的宽度，正整数或设备宽度device-width（width=device-width） |
| height | 视口高度，正整数或device-height |
| initial-scale | （initial-scale=1.0）：网页初始缩放值，小数缩小，反之放大（initial-scale=1.0） |
| maximum-scale | （maximum-scale=1.0）：设置页面的最大缩放比例 |
| minimum-scale | （minimum-scale=1.0）： 设置页面的最小缩放比例 |
| user-scaleble | （user-scalable=no）：用户是否可以缩放 |
自适应适配
样式采用 rem 进行自适应适配,引入 flexible.js 等可根据屏幕大小为 html 设置基础字号的工具函数。默认设计稿尺寸750px
单位
| 单位 | 兼容 | 说明 |
| px | 屏幕像素 | |
| rpx | rpx其实是微信对于rem的一种应用的规定，或者说一种设计的方案，官方上规定屏幕宽度为20rem，规定屏幕宽为750rpx。 | |
| upx | uni-app | uni-app 使用 upx 作为默认尺寸单位， upx 是相对于基准宽度的单位，可以根据屏幕宽度进行自适应。uni-app 规定屏幕基准宽度750upx。 开发者可以通过设计稿基准宽度计算页面元素 upx 值，设计稿 1px 与框架样式 1upx 转换公式如下： 设计稿 1px / 设计稿基准宽度 = 框架样式 1upx / 750upx |
| rem | rem是相对于根元素<html>，也就是说，我们只需要在根元素确定一个参考值，其他子元素的值可以根据这个参考值来转换。具体这个参考值设置为多少，完全可以根据我们自己的需求来定。 | |
| em | em是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。 |
UniApp rem适配方案
/** flexible.js **/