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


postcss 1 border 和 vw适配

  • postcss有哪些插件及作用
    • postcss-url
    • postcss-import
    • postcss-aspect-ratio-mini
    • postcss-px-to-viewport
    • postcss-write-svg
    • postcss-cssnext
    • postcss-viewport-units
    • cssnano
    • cssnano-preset-advanced
  • vw适配
  • 1 border 移动端 粗细

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文件，配置以下内容：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
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文件，内容如下：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
@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);
  }
}
  1. 在要使用的地方导入
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<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>

效果：
在这里插入图片描述
暂时了解这么多，为什么，我也不知道