vue中postcss+border-image解决移动端1px border粗细问题，和vw适配

postcss有哪些插件及作用

postcss-url

解析css中背景图url引用的插件

postcss-import

可以帮我们导入本地文件，节点或者node-modules模块

postcss-aspect-ratio-mini

主要用来处理元素容器宽高比

postcss-px-to-viewport

用来把 px 单位转换为 vw、vh、vmin或者 vmax这样的视窗单位，核心插件

postcss-write-svg

处理移动端 1px 的解决方案，使用border-image或者background-image

postcss-cssnext

可以使用未来css扩展的特性

postcss-viewport-units

主要是给CSS的属性添加 content 的属性，配合 viewport-units-buggyfill 库给 vw、vh、vmin和 vmax做适配的操作

cssnano

主要用来压缩和清理CSS代码

cssnano-preset-advanced

作为cssnano的高级优化（不安装可能会报错）

vw适配

1. vue脚手架创建项目
2. 下载安装以上插件
   （我做的demo只下载了一个插件：postcss-px-to-viewport）
3. 在项目根目录下创建postcss.config.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, // (Number) The width of the viewport.
      viewportHeight: 1334, // (Number) The height of the viewport.
      unitPrecision: 3, // (Number) The decimal numbers to allow the REM units to grow to.
      viewportUnit: 'vw', // (String) Expected units.
      selectorBlackList: ['.ignore', '.hairlines'], // (Array) The selectors to ignore and leave as px.
      minPixelValue: 1, // (Number) Set the minimum pixel value to replace.
      mediaQuery: false, // (Boolean) Allow px to be converted in media queries.
    },
    'postcss-viewport-units': {},
    cssnano: {
      preset: 'advanced',
      autoprefixer: false,
      'postcss-zindex': false,
    },
  },
}

（同样我做的时候只选了对应插件的配置）
4. npm run serve 最后效果：

编辑器内写px， 审查元素中显示vw

1 border 移动端 粗细

1. 下载安装插件 postcss-write-svg
2. 在项目assets文件夹中，新建svg.scss文件，内容如下：

@svg 1px-border {
  height: 2px;
  // 矩形
  @rect {
    // 设置填充样式
    fill: var(--color, black);
    // 宽度全描，高度一半
    width: 100%;
    height: 50%;
  }
}

@svg 1px-border2 {
  width: 4px;
  height: 4px;
  @rect {
    // 填充样式透明
    fill: transparent;
    width: 100%;
    height: 100%;
    // 设置边框的宽度
    stroke-width: 25%;
    // 设置描边样式
    stroke: var(--color, black);
  }
}

3. 在要使用的地方导入

<style lang="scss">
// 导入
@import './assets/svg.scss';
#app {
  .border1 {
    margin: 100px;
    width: 100px;
    height: 100px;
    // 使用
    border: 1px solid transparent;
    // 图片链接(参数传递)，裁剪位置，重复方式 stretch：拉伸
    border-image: svg(1px-border param(--color red)) 1 stretch;
  }
  .border2 {
    margin: 100px;
    width: 100px;
    height: 100px;
    border: 1px solid transparent;
    border-image: svg(1px-border2 param(--color red)) 1 stretch;
  }
}
</style>

效果：

暂时了解这么多，为什么，我也不知道

写这篇文章的初衷已经不记得了，要是1px border在移动端的粗细问题：
使用vant组件库 ，css中 .hairline(方位,颜色) 就可以解决