vue 之字体小于12px设置

& > div:nth-child(1) {
    position: relative;
    font-family: PingFangSC-Regular;
    color: #666666;
    letter-spacing: -0.24px;
    text-align: left;
    width: 30px;
    span {
      position: absolute;
      left: -15px;
      top: -5px;
      width: 60px;
      height: 34px;
      display: block;
      font-size: 20px;
      transform: scale(0.5);
    }
  }
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
要在Vue中使用postcss-px-to-viewport,你需要进行以下步骤: 1. 安装必要的依赖:`npm install postcss-px-to-viewport --save-dev`。 2. 在项目的根目录下创建一个名为`postcss.config.js`的文件,并添加以下代码: ``` module.exports = { plugins: { autoprefixer: {}, "postcss-px-to-viewport": { viewportWidth: 750, // 设计稿的视窗宽度 unitPrecision: 3, // 小数点位数 propList: ["*"], // 需要转换的属性,* 表示所有 viewportUnit: "vw", // 转换后的单位 fontViewportUnit: "vw", // 字体转换后的单位 selectorBlackList: [], // 不需要转换的选择器 minPixelValue: 1, // 小于等于 1px 不转换 mediaQuery: false // 允许在媒体查询中转换 } } }; ``` 3. 在项目中使用`vue-cli-plugin-style-resources-loader`插件,该插件可以让我们在项目的任意地方引入一些全局的样式文件。安装插件:`npm install vue-cli-plugin-style-resources-loader --save-dev`。 4. 在`vue.config.js`文件中添加以下代码: ``` module.exports = { pluginOptions: { styleResourcesLoader: { preProcessor: "scss", patterns: [ path.resolve(__dirname, "./src/styles/variables.scss"), // 引入全局变量 path.resolve(__dirname, "./src/styles/mixins.scss") // 引入全局 mixin ] } } }; ``` 5. 在项目中安装`postcss-loader`,安装命令:`npm install postcss-loader --save-dev`。 6. 修改`vue.config.js`文件,添加以下代码: ``` module.exports = { css: { loaderOptions: { postcss: { plugins: [ require("postcss-px-to-viewport")({ viewportWidth: 750 }) ] } } } }; ``` 这样,你就可以在Vue项目中使用postcss-px-to-viewport了。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值