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);
  }
}
  1. 在要使用的地方导入
<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(方位,颜色) 就可以解决
vue中postcss+border-image解决移动端1px border粗细问题,和vw适配_第1张图片

你可能感兴趣的:(javascript,vue.js)