码迷,mamicode.com
首页 > 移动开发 > 详细

vue-cli + postcss 实现移动端自适应

时间:2020-04-06 11:35:30      阅读:131      评论:0      收藏:0      [点我收藏+]

标签:mod   cto   设计图   pac   plugins   run   安装   win   als   

基于 vue-cli3 创建一个移动端项目

vue add vue-h5
cd vue-h5
npm run serve

安装 postcss 相关插件

由于 vue-cli 已经内置了 postcss,只需要安装相关插件,就可以实现 vw/vh 自适应布局。

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

下面简单的说一下这几个插件的作用。

.postcss-px-to-viewport

用来把px单位转换为vw、vh、vmin或者vmax这样的视窗单位,也是vw适配方案的核心插件之一。
我们都是使用750px宽度的视觉设计稿,那么100vw = 750px,即1vw = 7.5px。那么我们可以根据设计图上的px值直接转换成对应的vw值。在实际撸码过程,不需要进行任何的计算,直接在代码中写px。

.postcss-aspect-ratio-mini

用来处理元素容器宽高比。

.postcss-write-svg

用来处理移动端1px的解决方案。

安装完毕后我们需要配置一下,在postcss.config.js中配置如下内容:

module.exports = {
  "plugins": {
    // "postcss-import": {},
    // "postcss-url": {},
    // to edit target browsers: use "browserslist" field in package.json
    "postcss-write-svg": {
      uft8: false
    },
    "postcss-cssnext": {},
    "postcss-px-to-viewport": {
      viewportWidth: 750, // 设计稿宽度
      viewportHeight: 1334, // 设计稿高度,可以不指定
      unitPrecision: 3, // px to vw无法整除时,保留几位小数
      viewportUnit: ‘vw‘, // 转换成vw单位
      selectorBlackList: [‘.ignore‘, ‘.hairlines‘], // 不转换的类名
      minPixelValue: 1, // 小于1px不转换
      mediaQuery: false, // 允许媒体查询中转换
      exclude: /(\/|\\)(node_modules)(\/|\\)/ //不转换我们引入的第三方包
    },
    "postcss-viewport-units": {},
    "cssnano": {
      preset: "advanced",
      autoprefixer: false, // 和cssnext同样具有autoprefixer,保留一个
      "postcss-zindex": false
    }
  }
}

兼容方案

如果您想要兼容所有的低版本浏览器,可以使用Viewport Units Buggyfill

  1. 引入js文件,打开public/index.html,首先在<head></head>中引入阿里cdn
<script src="//g.alicdn.com/fdilab/lib3rd/viewport-units-buggyfill/0.6.2/??viewport-units-buggyfill.hacks.min.js,viewport-units-buggyfill.min.js"></script>
  1. 在body中,加入如下js代码
<script>
  window.onload = function () {
    window.viewportUnitsBuggyfill.init({
      hacks: window.viewportUnitsBuggyfillHacks
    });
  }
</script>
  1. 如果遇到img无法显示,则添加全局css
img { 
  content: normal !important; 
}

Github 项目地址

vue-cli + postcss 实现移动端自适应

标签:mod   cto   设计图   pac   plugins   run   安装   win   als   

原文地址:https://www.cnblogs.com/dora-zc/p/12640895.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!