共计 3993 个字符，预计需要花费 10 分钟才能阅读完成。
通过 meta 标签对 viewport 的设置，定义了页面的缩放比例；要理解这些参数的意义，咱们须要先晓得几个视口宽度的意义。
layoutviewport 布局宽度，就是网页的宽度
visualviewport 可是宽度，就是浏览器窗口的宽度，这个值决定了咱们手机一屏能看到的内容；visualviewport 和 layoutviewport 的
大小关系，决定了是否会呈现滚动条，当 visualviewport 更大或者刚好等于 layoutviewport 时是不会呈现滚动条的。
idealviewport 为浏览器定义的可完满适配挪动端的 viewport，固定不变，能够认为是设施视口宽度 device-width。
meta 的设置其实就是对 layoutviewport 和 visualviewport 进行设置。
width=device-width 示意页面宽度 layoutviewport 与设施视口宽度 idealviewport 统一
initial-scale= 1 示意页面宽度和网页宽度与设施视口宽度的初始缩放比例，visualviewport 由这个比例决定，然而对于 layoutviewport 来说，它同时受到两个属性的影响，而后取其中较大的那个值。
user-scale=no 禁止缩放
所以当初咱们晓得，这段在挪动端常见的代码的意思，行将 visualviewport 和 layoutviewport 设置为 idealviewport 的域名交易值；这样咱们在挪动端就不会呈现滚动条，网页内容能够比拟好的展现进去，在这个前提下咱们再思考页面的适配问题。
UI 出图的时候个别是有一个固定的宽度的，而咱们理论的挪动端设施的宽度却都不太一样，然而如果页面元素的缩放比例和页面宽度的缩放比例统一，在不同尺寸的设施下咱们网页的成果也将会是统一的。
应用绝对单位
rem
rem 是绝对于根元素 html 的 font-size 来做计算。通常在页面初始化时加载时通过对 document.documentElement.style.fontSize 设置来实现。个别咱们将根元素 html 的 font-size 设置为宽度的 1 /10，不同设施的宽度不同，然而同样数值的 rem 比例与设施的宽度比例是统一的。
在理论我的项目中咱们毋庸在开发中本人进行转换，能够应用 pxtorem 在输入的时候将 px 转换为 rem。
视口单位
将视口宽度 window.innerWidth 和视口高度 window.innerHeight（即 layoutviewport）等分为 100 份。
vw : 1vw 为视口宽度的 1% vh : 1vh 为视口高度的 1% vmin : vw 和 vh 中的较小值 vmax : 选取 vw 和 vh 中的较大值
和 rem 相比拟，视口单位不须要应用 js 对根元素进行设置，兼容性稍差，然而大部分设施都曾经反对了，同样的无须再开发时进行单位换算，间接应用相干的插件 postcss-px-to-viewport 在输入的时候进行转换。
批改 viewport
之前咱们提到了 layoutviewport 布局宽度实际上不是一个固定值，而是通过 meta 设置属性，通过 idealviewport 计算出来的值，咱们能够通过管制 meta 的属性来将 layoutviewport 固定为某一个值。个别设计图的宽度为 750px，当初咱们的指标就是将 layoutviewport 设置为 750px；layoutviewport 受到两个属性的影响，width 属性咱们之间设置为 750，initial-scale 缩放比例应该为 idealviewport 的宽度 /750；当咱们未扭转 meta 标签属性的时候，layoutviewport 的值其实就是 idealviewport 的值，所以能够通过 document.body.clientWidth 或者 window.innerWidth 来获取。
布局款式
布局的形式能够是各种各样的，然而出于兼容性的思考，有些款式咱们最好防止应用，难以解决的问题，那就不去面对。
须要审慎看待的 fixed
position:fixed 在日常的页面布局中十分罕用，在许多布局中起到了要害的作用。它的作用是：position:fixed 的元素将绝对于屏幕视口（viewport）的地位来指定其地位。并且元素的地位在屏幕滚动时不会扭转。然而，在许多特定的场合，position:fixed 的体现与咱们设想的天壤之别。
iOS 弹出键盘；软键盘唤起后，页面的 fixed 元素将生效（iOS 认为用户更心愿的是元素随着滚动而挪动，也就是变成了 absolute 定位），既然变成了 absolute，所以当页面超过一屏且滚动时，生效的 fixed 元素就会追随滚动了。
当元素先人的 transform 属性非 none 时，定位容器由视口改为该先人。说的简略点，就是 position:fixed 的元素会绝对于最近的并且利用了 transform 的先人元素定位，而不是窗口。导致这个景象的起因是应用了 transform 的元素将创立一个新的重叠上下文。重叠上下文（Stacking Context）：重叠上下文是 HTML 元素的三维概念，这些 HTML 元素在一条假想的绝对于面向（电脑屏幕的）视窗或者网页的用户的 z 轴上延长，HTML 元素根据其本身属性依照优先级程序占用层叠上下文的空间。程序如下图所示，总之重叠上下文会对定位关系产生影响。想要进一步能够查看不受管制的 position:fixed。
键盘弹出与应用 transform 属性的状况在挪动端是很常见的，所以须要审慎应用 position:fixed。
举荐应用 flex
flex，即弹性布局，挪动端兼容性较好，可能满足大部分布局需要。当初咱们应用 flex 来实现 h5 中常见的顶部标题栏 + 中部滚动内容 + 底部导航栏的布局
页面跳转
转场动画
在 vue 中咱们通过 vue-router 来治理路由，每个路由跳转相似与在不同的页面之间进行切换，从用户敌对的角度来说，每次切换页面的时候最好增加一个转场成果。如果转场动画不辨别路由是关上新页面、还是返回之前页面咱们只须要在外应用增加一个动画成果即可；然而个别关上和返回是利用不同的动画成果的，所以咱们须要在切换路由的时候辨别路由是后退还是后退。为了辨别路由的动作，咱们在路由文件中设置 meta 为数字，meta 示意其路由的深度，而后监听 $route，依据 to、from meta 值的大小设置不同的跳转动画。如果利用到多种跳转动画，能够依据详情，具体情况具体利用。
vue-navigation 插件还有一个重要的性能就是保留页面状态，与 keep-alive 类似，然而 keep-alive 保留状态无奈辨认路由的后退后退，而理论利用中，咱们的需要是返回页面时，心愿页面状态保留，当进入页面时心愿获取新的数据，应用 vue-navigation 能够很好的实现这个成果。具体应用能够查看 vue-navigation 有具体应用阐明与案例。另外也能够尝试 vue-page-stack，两个我的项目都能实现咱们须要的成果，vue-page-stack 借鉴了 vue-navigation，也实现了更多的性能，并且最近也始终在更新。
PS: 这里的动画成果援用自 animate.scss;
底部导航栏
之前咱们曾经实现了底部导航栏的根本款式，这里咱们再做一些阐明。当页面路由门路与 router-link 的路由匹配时，router-link 将会被设置为激活状态，咱们能够通过设置 active-class 来设置门路激活时利用的类名，默认为 router-link-active，而激活的类名还有一个 router-link-exact-active，这个类名是由 exact-active-class 来设置的，同样是设置门路激活时利用的类名；active-class 与 exact-active-class 其实是由路由的匹配形式决定的。
个别路由的匹配形式是蕴含匹配。举个例子，如果以后的门路是 /a 结尾的，那么 也会被设置 CSS 类名。依照这个规定，每个路由都会激活，而应用 exact 属性能够应用“准确匹配模式”。准确匹配只有当路由完全相同的时候才会被激活。
路由守卫
挪动端的路由守卫个别不会太简单，次要是登录权限的判断，咱们设置一个路由白名单，将所有不须要登录权限的路由放入其中；对于须要登录的路由做判断，没有登录就跳转登录页面，要求用户进行登录后在拜访，如果登录后须要返回原有路由就把指标页面的路由作为参数传递给登录页面，再在登录后进行判断，如果存在指标页面参数就跳转指标页面，没有就跳转首页。
如果你的利用波及到权限，那须要标注每个路由须要的权限，在 meta 中设置 roles，roles 是数组来保留须要的权限；从后盾的接口中获取用户领有的权限和 roles 进行比照就能够判断是否具备相干权限了。
通过 v -model 绑定数据
v-model 是语法糖，它的实质是对组件事件进行监听和数据进行更新，是 props 和 o n 监 听 事 件 的 缩 写，v − m o d e l 默 认 传 递 v a l u e，监 听 i n p u t 事 件。现 在 我 们 使 用 v − m o d e l 来 实 现 下 数 字 输 入 框，这 个 输 入 框 只 能 输 入 数 字，在 组 件 中 我 们 只 需 要 定 义 v a l u e 来 接 受 传 值，然 后 在 输 入 值 满 足 我 们 输 入 条 件（输 入 为 数 字）的 时 候 使 用 on 监听事件的缩写，v-model 默认传递 value，监听 input 事件。当初咱们应用 v -model 来实现下数字输入框，这个输入框只能输出数字，在组件中咱们只须要定义 value 来承受传值，而后在输出值满足咱们输出条件（输出为数字）的时候应用 on 监听事件的缩写，v−model 默认传递 value，监听 input 事件。当初咱们应用 v−model 来实现下数字输入框，这个输入框只能输出数字，在组件中咱们只须要定义 value 来承受传值，而后在输出值满足咱们输出条件（输出为数字）的时候应用 emit 触发 input 事件。