• vue3 将px转为vw(大屏展示可用)


    1.装依赖

    "cssnano": "^4.1.10",
        "cssnano-preset-advanced": "^4.0.7",
        "postcss-aspect-ratio-mini": "^1.0.1",
        "postcss-cssnext": "^3.1.0",
        "postcss-import": "^12.0.1",
        "postcss-loader": "^3.0.0",
        "postcss-px-to-viewport": "^1.1.1",
        "postcss-url": "^8.0.0",
        "postcss-viewport-units": "^0.1.6",
        "postcss-write-svg": "^3.0.1",
    可通过此命令安装: cnpm i 依赖包名 --save
    即:cnpm i --save cssnano cssnano-preset-advanced postcss-aspect-ratio-mini postcss-cssnext postcss-import postcss-loader postcss-px-to-viewport postcss-url postcss-viewport-units postcss-write-svg
    2.在package.json对postcss进行配置。

    module.exports = {
    "plugins": {
    "postcss-import": {},
    "postcss-url": {},
    "postcss-aspect-ratio-mini": {},
    "postcss-write-svg": {
    utf8: false
    },
    "postcss-cssnext": {},
    "postcss-px-to-viewport": {
    viewportWidth: 750, // 视窗的宽度,对应的是我们设计稿的宽度,一般是750
    viewportHeight: 1334, // 视窗的高度,根据750设备的宽度来指定,一般指定1334,也可以不配置
    unitPrecision: 3, // 指定`px`转换为视窗单位值的小数位数
    viewportUnit: "vw", //指定需要转换成的视窗单位,建议使用vw
    selectorBlackList: ['.ignore', '.hairlines'],// 指定不转换为视窗单位的类,可以自定义,可以无限添加,建议定义一至两个通用的类名
    minPixelValue: 1, // 小于或等于`1px`不转换为视窗单位,你也可以设置为你想要的值
    mediaQuery: false // 允许在媒体查询中转换`px`
    },
    "postcss-viewport-units": {},
    "cssnano": {
    preset: "advanced",
    autoprefixer: false,
    "postcss-zindex": false
    }
    }
    }

  • 相关阅读:
    「学习笔记」min_25筛
    HNOI2019游记
    【SDOI2017】数字表格
    【APIO2016】烟火表演
    【SCOI2015】小凸想跑步
    java Thread源码分析
    java ThreadGroup源码分析
    bean获取Spring容器
    spring 管理bean
    thinkphp5.0.19 request
  • 原文地址:https://www.cnblogs.com/miaSlady/p/11642976.html
Copyright © 2020-2023  润新知