vue项目兼容pc+mobile方案

最近做一个web项目:vue+vue-router_vuex
因为要兼容pc与mobile,架子是vue-cli4撘的,

我搜索了一下实现方案:

1.html根字体结合vw动态变换,用rem动态布局(凹凸实验室
2.pc端和移动端分别有一套自己的css,到时候分别加载就行了

我最终的想法是结合postcss的各种插件做移动端(主要参考大漠(免费)),pc端用媒体查询做一个简单的适配,兼顾了用户体验与维护成本。

现在的问题是如何配置当移动端时我不需要postcss的postcss-px-to-viewport插件,(selectorBlackList属性只可忽略不转换的类)让pc单独的样式文件px不进行转换。

也期待大家给出你们自己工作中的实际解决方案,不胜感谢!

阅读 833
评论
    1 个回答

    我试着在vue.comvfigure动态配置

    css: {
        // 是否使用css分离插件 ExtractTextPlugin
        extract: true,
        // 开启 CSS source maps?
        sourceMap: false,
        // css预设器配置项
        loaderOptions: {
          postcss: {
            plugins: isMobileOrPc()
              ? [
                  pptv({
                    viewportWidth: 750, // (Number) The width of the viewport.
                    viewportHeight: 1334, // (Number) The height of the viewport.
                    unitPrecision: 3, 
                    viewportUnit: "vw", // (String) Expected units.
                    selectorBlackList: [".ignore", ".hairlines"], 
                    minPixelValue: 1, 
                    mediaQuery: false 
                  })
                ]
              : []
          }
        },

    但是失败了,因为isMobileOrPc()函数中用的navigator不支持!

    ERROR  Error loading vue.config.js:
    ERROR  ReferenceError: navigator is not defined

    有小伙伴帮帮我吗

      撰写回答

      登录后参与交流、获取后续更新提醒

      相似问题
      推荐文章