vue 移动端适配（商城）

最新推荐文章于 2024-05-02 20:15:50 发布

转载最新推荐文章于 2024-05-02 20:15:50 发布 · 297 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://blog.youkuaiyun.com/qq_42740797/article/details/107713344

文章标签：

#vue.js

本文详细介绍如何通过修改.browserslistrc文件、安装特定依赖及配置package.json来优化前端项目，涉及PostCSS插件的使用，如postcss-import、postcss-url等，以实现更好的跨浏览器兼容性和响应式设计。

.1、browserslistrc文件删除“not dead”

2、安装依赖

cnpm i postcss-import postcss-url postcss-aspect-ratio-mini postcss-px-to-viewport postcss-write-svg postcss-cssnext postcss-viewport-units cssnano -S

3、package.json里配置:

stcss": {
    "plugins": {
      "postcss-import": {},
      "postcss-url": {},
      "postcss-aspect-ratio-mini": {},
      "postcss-write-svg": {
        "utf8": false
      },
      "postcss-cssnext": {},
      "postcss-px-to-viewport": {
        "viewportWidth": 375,
        "viewportHeight": 667,
        "unitPrecision": 3,
        "viewportUnit": "vw",
        "selectorBlackList": [
          ".ignore",
          ".hairlines"
        ],
        "minPixelValue": 1,
        "mediaQuery": false
      },
      "cssnano": {
        "cssnano-preset-advanced": {
          "preset": "advanced",
          "autoprefixer": false,
          "postcss-zindex": false,
          "zindex": false
        }
      }
    }
  }