首页 前端知识 tailwindcss px转rem方案

tailwindcss px转rem方案

2024-06-16 01:06:43 前端知识 前端哥 493 992 我要收藏

项目场景:

概述:最近在写一个vite框架基于vue3+ts的可视化项目,css框架采用的tailwindcss,适配方案采用 element-resize-detector 适配,该项目做到了百分百适配任何浏览器!


问题描述

适配方案element-resize-detector原理:动态获取浏览器的尺寸,在与设计稿(项目设计稿为:1920*1080)进行换算然后进行等比缩放

问题:开发过程中发现图片及问题等比例缩放展示效果欠佳,开始考虑tailwindcss适配方案;

方案采用pxtorem:尝试了绝大多数tailwindcss插件,效果最好的是postcss-pxtorem

注:如果Tailwindcss是通过官网安装的,已经内置了postcss,只需要装 postcss-pxtorem即可

    npm install -D postcss-pxtorem

    yarn add postcss-pxtorem

    pnpm install -D postcss-pxtorem

postcss.config.js 配置 postcss-pxtorem

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
    'postcss-pxtorem': {
      rootValue: 16, // (Number | Function) 表示根元素字体大小或根据input参数返回根元素字体大小
      unitPrecision: 5, // (数字)允许 REM 单位增长到的十进制数字
      propList: ['*'], // 可以从 px 更改为 rem 的属性 使用通配符*启用所有属性
      selectorBlackList: [],// (数组)要忽略并保留为 px 的选择器。
      replace: true, // 替换包含 rems 的规则,而不是添加回退。
      minPixelValue: 0, // 最小的转化单位
      exclude: /node_modules/i // 要忽略并保留为 px 的文件路径
    }
  },
}

我项目中用的  "postcss-pxtorem": "^6.0.0" ,装好重启项目,就可以了

转载请注明出处或者链接地址:https://www.qianduange.cn//article/12227.html
标签
chrome
评论
发布的文章

前端——12.表单标签

2024-06-21 00:06:57

src、href和url含义及区别

2024-06-21 00:06:56

CSS知识点大全

2024-06-21 00:06:16

JS垃圾回收机制(GC)

2024-06-21 00:06:03

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!