解决vue移动端适配问题

1，先看看网上关于移动端适配讲解

再聊移动端页面适配，rem和vw适配方案！

基础点：rem相对根节点字体的大小。所以不用px;

根字体：字体的大小px;

px：你就当成cm(厘米)这样的东西吧；

基准：750设计稿；

这是方案的基础理论，在这个基础上，我们还要搞明白，到底要干一件什么事情！

目标一、手机适配：就是页面上的尺寸，无论高度，还是宽度，还有字体，随屏幕的宽度变化！这里是屏幕宽度！是不是想到了vw，对，就是这个意思；——最大程度在各个尺寸屏幕上还原设计稿

目标二、px转换成rem：一般UI给的设计稿宽度大小是750，所以，我们想直接写上面UI标记的尺寸；——最大程度减少工作

为什么选择rem?

很久之前没有vw，怕vw的兼容问题，就用了rem；也就是：rem的兼容性>vw的兼容性；

还有一种就是自己写百分比很不优雅

一、理论基础！

实现目标一

用rem就可以了吧！因为rem就可以随根字体大小改变而改变，从而实现了自适应的功能。

但是，但是，重点来，如果，根字体的大小默认是16px；那么，我们的1rem；就永远是16px，懂么？也就是如果设计稿是750（放大了一倍，iphone是375pt),我们想要个50%的大小:

50%*357px/16=11.718rem

如果我们写一个11.718rem的宽度，然而这只能在能iphone6还原设计稿，也就是只有在iphone6上这样的宽度才刚好占一半；

那么问题来了，如果在每个屏幕上都是50%呢，直接改变根字体大小（16px)不就完了么！！；11.718rem永远还是那个11.718rem，不用担心；

实现目标二

用工具，webpack，postcss,postcss-pxtorem

二、准备主要工具！

viewport: 建议自行百度；

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

vue-cli: 用这个主要是用webpack,这个构建工具大大降低了webpack的使用难度;快速构建出一个前端项目。

postcss: 官网解释：PostCSS is a tool for transforming styles with JS plugins，就是postcss用js插件帮你转换css样式的一个工具。比如，这里的把你的文件里面16px替换成1rem(根大小默认16px的情况）；这样你就不用自己去算了！