vue-cli移动端项目的适配完美解决方案

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

基础点：rem相对根节点字体的大小。所以不用px;
根字体：字体的大小px;
px：你就当成cm(厘米)这样的东西吧；
基准：750设计稿（一般UI设计师给的都是750的设计稿）；

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

目标二、px转换成rem：所以，我们想直接写上面UI标记的尺寸（可以借助插件cssrem来将px转换成rem）；——最大程度减少工作

实现移动端适配所需要的工具：

1. vue-cli:使用脚手架来搭建vue前端项目
2. postcss: 官网解释：PostCSS is a tool for transforming styles with JS plugins，就是postcss用js插件帮你转换css样式的一个工具。比如，这里的把你的文件里面16px替换成1rem(根大小默认16px的情况）；这样你就不用自己去算了！
3. cssrem: 主要是帮你把px(UI设计给设计稿上的px)转换成对应的rem，这样岂不是就不用计算了哈！！
   然后：还要用js代码去动态算根目录应该有的字体大小，反正就是一段js代码去动态获取屏幕宽度！

步骤：
第一步：使用脚手架创建完项目之后，安装插件

npm i postcss，postcss-pxtorem，postcss-loader，postcss-import，postcss-url

第二步：然后再index.html里面加上：

第三步：在项目根目录下添加.postcssrc.js文件，在里面写上以下代码：

module.exports = {
    "plugins": {
      "postcss-import": {},      //用于@import导入css文件
      "postcss-url": {},           //路径引入css文件或node_modules文件
      "postcss-aspect-ratio-mini": {},   //用来处理元素容器宽高比
      "postcss-write-svg": { utf8: false },    //用来处理移动端1px的解决方案。该插件主要使用的是border-image和background来做1px的相关处理。
      "postcss-cssnext": {},  //该插件可以让我们使用CSS未来的特性，其会对这些特性做相关的兼容性处理。
      "postcss-px-to-viewport": {    //把px单位转换为vw、vh、vmin或者vmax这样的视窗单位，也是vw适配方案的核心插件之一。
          viewportWidth: 750,    //视窗的宽度
          viewportHeight: 1334,   //视窗的高度
          unitPrecision: 3,    //将px转化为视窗单位值的小数位数
          viewportUnit: 'vw',    //指定要转换成的视窗单位值
          selectorBlackList: ['.ignore', '.hairlines'],    //指定不转换视窗单位值得类，可以自定义，可以无限添加
          minPixelValue: 1,    //小于等于1px不转换为视窗单位
          mediaQuery: false   //允许在媒体查询中使用px
      },
      "postcss-viewport-units":{}, //给vw、vh、vmin和vmax做适配的操作,这是实现vw布局必不可少的一个插件
      "cssnano": {    //主要用来压缩和清理CSS代码。在Webpack中，cssnano和css-loader捆绑在一起，所以不需要自己加载它。
          preset: "advanced",   //重复调用
          autoprefixer: false,    //cssnext和cssnano都具有autoprefixer,事实上只需要一个，所以把默认的autoprefixer删除掉，然后把cssnano中的autoprefixer设置为false。
          "postcss-zindex": false   //只要启用了这个插件，z-index的值就会重置为1
       } 
    }
  } 

第四步：当你切换不同尺寸的屏幕的时候，需要动态改变根字体的大小，一段简单的js插入在head里面：
我是在public目录下直接新建的shipei.js,然后将这个js引入到index.html的head里面。
shipei.js:

(function() {
   function autoRootFontSize() {
       document.documentElement.style.fontSize =        Math.min(screen.width,document.documentElement.getBoundingClientRect().width)  /  750 * 32 + 'px';
         // 取screen.width和document.documentElement.getBoundingClientRect().width的最小值；除以750，乘以32；懂的起撒，就是原本是750大小的32px;如果屏幕大小变成了375px,那么字体就是16px;也就是根字体fontSize大小和屏幕大小成正比变化！是不是很简单
   }
   window.addEventListener('resize', autoRootFontSize);
   autoRootFontSize();
})();

第五步：
在index.html:

注意！！！！！！！！！！！！此外，放到 public 里的东西，可以不用写开头目录，脚手架打包的时候找不到，会去public文件夹找的，例如：

image.png

关于getBboundingClientRect().width:
getBoundingClientRect().width获取到的其实是父级的右边距离浏览器原点(0,0)左边距离浏览器原点(0,0)的距离,即父级的宽度+2padding+2border。
此时的clientWidth等于父级的宽度+2*padding,不包括边框的宽度。
当不隐藏子级内容,即overflow为auto时，前者的宽度依然为这个数字,因为父级并没有改编盒模型。后者的宽度为上述得到的宽度-滚动条的宽度(17px);例子如下:

运行结果是clientWidth为516,他的计算是内容宽+2padding
getWidth(也就是getBoundingClientRect().width）包括内容宽+2padding+2border
第五步：就是将设计稿上的px转换成rem为单位：安装 cssrem插件 (在插件市场）：
然后在 文件-->首选项-->设置 然后搜索cssrem 设置Root Font Size为16即可。