在移动端项目中的字体在随浏览端的窗口尺寸改变（响应式），在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实现移动端适配》