移动端Vue项目适配处理

在移动端项目中的字体在随浏览端的窗口尺寸改变（响应式），在Vue项目中咱们能够用过脚手架Vue-cli来安装相应的依赖类库来实现这个功能。

首先来建立一个新的项目

vue init webpack vue-mobile

 启动以后就看到初始的Vue项目的起始页面——Welcome to Your Vue.js App

这个时候咱们能够去看看项目的根目录下的文件 .postcssrc.js，里面有这么一段代码：

module.exports = {
  "plugins": {
    "postcss-import": {},
    "postcss-url": {},
    // ...  
    "autoprefixer": {}    
  }
}

这些默认的插件咱们已经有了。下面就直接再安装一些咱们须要用到的插件到咱们的项目中就行了。

npm i postcss-aspect-ratio-mini postcss-px-to-viewport postcss-write-svg postcss-cssnext postcss-viewport-units cssnano --S

哦，还有一个。咱们这里用到了cssnano的另外一项配置，因此还要安装另外一个插件：

npm i cssnano-preset-advanced --save-dev

安装完这些依赖以后，咱们回到根目录的.postcssrc.js来配置一些基本的参数：

module.exports = {
  "plugins": {
    "postcss-import": {},
    "postcss-url": {},
    "postcss-aspect-ratio-mini": {},
    "postcss-write-svg": {
      utf8: false
    },
    "postcss-cssnext": {},
    "postcss-px-to-viewport": {
      viewportWidth: 750,
      viewportHeight: 1334,
      unitPrecision: 3,
      viewportUnit: 'vw',
      selectorBlackList: ['.ignore', '.hairlines'],
      minPixelValue: 1,
      mediaQuery: false
    },
    "postcss-viewport-units": {},
    "cssnano": {
      preset: "advanced",
      autoprefixer: false,
      "postcss-zindex": false
    }
  }
}

注意这里原有的 autoprefixer属性没有了。由于下面的 cssnano 里面已经对这个属性经行了设置。

如今基本上就完成了，这里咱们能够在components的HelloWorld.vue中加入一段话来测试一下。

<p class="mine">这是测试响应式布局的一句话！</p>

.mine{
  font-size: 24px;
}

而后 run 一下项目，看一下效果。在浏览器调试工具中切换手机模式开关。发现字体会根据当前模拟设备的窗口来改变字体显示的大小。

可是咱们审查元素能够发现其实咱们在 css 中定义的是 px 的单位，可是在这里的样式单位倒是 vw 。那么恭喜就是这样的，由于咱们在前面已经配置过 viewportUnit 这个属性的值为 vw 了。

在编写 css 代码的时候，直接写设计图上的实际像素就能够了。项目会自动编译 px 为 vw 单位在页面上渲染。对于一些不想编译转换的状况，在元素中加上 .ignore、.hairlines 类就能够了。

到这里，基本的项目响应已经实现了。其余的一些详细的、进阶的问题能够参考下这篇 《如何在Vue项目中使用vw实现移动端适配》