vue中字体设置小于12px

一般浏览器字体最小是12px,需求中却经常会出现小于12的情况,css样式可以直接用

 transform: scale(0.8); 比如缩小到原字体的80%,

但是当用这种缩放方式后,会导致这个盒子也一起缩放

就会出现字体位置偏差的情况,解决办法是transform-origin: 0 0; 

将基点位置移动到未缩放之前的位置

  • 1
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 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、付费专栏及课程。

余额充值