移动端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": {}    
  }
}

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

哦，还有一个。我们这里用到了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实现移动端适配》

移动端Vue项目适配处理

猜你喜欢