1像素

再谈Retina下1px的解决方案
移动端 Retina 屏幕 1px 边框问题

这里使用postcss-write-svg举例

需要依赖

npm install postcss-write-svg --save-dev
npm install postcss-write-svg --save

vue页面

<style scoped>
  @svg 1px-border {
    height: 2px;
  @rect {
    fill: var(--color, black);
    width: 100%;
    height: 50%;
  }
  }
  .ex-font{
    font-size:18px;
  }
  .ex-border{
    border-bottom: 1px solid #ccc;
    border-image: svg(1px-border param(--color black)) 2 2 stretch;
  }
</style>

配置文件

xx\build\webpack.base.conf.js

module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: vueLoaderConfig
      },
      {
        test    : /\.(css|scss)$/,
        use     : ExtractTextPlugin.extract({
          fallback: 'style-loader',
          use     : [
            {
              loader: 'css-loader',
              options: {
                minimize: 'production' !== process.env.NODE_ENV ? false : true,
              }
            },
            {
              loader: 'postcss-loader',
              options: {
                plugins: function () {
                  return [
                    require('postcss-write-svg')
                  ];
                }
              }
            },
            {
              loader: 'sass-loader',
              options: {
                outputStyle: 'expanded',
                includePaths: [
                  ROOT_PATH,
                ]
              }
            },
          ],
        }),
        include   : ROOT_PATH,
      },
      {
        test: /\.js$/,
        loader: ['babel-loader'],
        exclude : /node_modules/,
        include : ROOT_PATH,
      },
      {
        test: /\.(png|jpg|gif|svg)$/,
        loader: `url-loader?limit=10000&name=${ASSETS_DIR}/images/[name].[hash:8].[ext]`,
      },
      {
        test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
        loader: `url-loader?limit=10000&name=${ASSETS_DIR}/fonts/[name].[hash:8].[ext]`,
      }
    ]
  },



xx\.postcssrc.js

module.exports = {
  "plugins": {
    // to edit target browsers: use "browserlist" field in package.json
    "autoprefixer": {},
    "postcss-write-svg": {
      utf8: false
    },
  }
}

标签：CSS, 1px