移动端Vue项目适配处理

2019-03-06 16:42:06 阅读：259 来源： 互联网

标签：Vue false 项目适配 vw cssnano 移动 postcss

在移动端项目中的字体在随浏览端的窗口尺寸改变（响应式），在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,false,项目,适配,vw,cssnano,移动,postcss
来源： https://www.cnblogs.com/matthewkuo24/p/10484131.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

移动端Vue项目适配处理