欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

移动端Vue项目适配处理

程序员文章站 2024-03-14 10:09:46
...

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

首先来创建一个新的项目

vue init webpack vue-mobile

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

移动端Vue项目适配处理

这个时候我们可以去看看项目的根目录下的文件 .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实现移动端适配》