viewportWidth 适配两端该怎么处理?

[w296025691]

Pc端的设计稿是1920 mobile的设计稿是750 问题：这里想要做一个判断viewportWidth在pc的时候值为1920，mobile的时候值是750； 目前的做法是：

1. const screenWidth = /Android|webOS|iPhone|iPad|BlackBerry|iPad/i.test(navigator.userAgent) ? 750 : 1920 // node环境下无法判断终端是pc还是mobile
2. plugins: [ require("postcss-px-to-viewport")({ ... viewportWidth : screenWidth
   ... ]

[linweiwei123]

+1

[rowthan]

一个临时解决办法：当视口大于某条件后，页面进行缩放 @media screen and (min-width:1200px) { .root-container{ transform: scale(0.5); transform-origin: top; } }

[lxz8798]

麻烦问一相楼主，有解决方法了吗？

[XiaZhi246430]

同问 等的很难受啊

[lzm0x219]

适配双端建议换成rem做适配

[well-monkey]

同问啊

[Deja-vuuu]

适配双端建议换成rem做适配

why?

[dbl520]

同问 等的很难受啊

[ghost]

将移动端和pc端vue文件放两个文件夹，互相不关联。vue.config.js 配置改成根据不同路径返回不同的配置。

css: {
    loaderOptions: {
      postcss: {
        plugins: (params) => {
          console.log(params.context);
          console.log(params.resourcePath);

          let path = params.context;
          console.log(path);

          if (/layouts/.test(path)) { //pc路径
            return [
              require("postcss-px-to-viewport")({
                unitToConvert: "px", // 默认值`px`，需要转换的单位
                viewportWidth: 1200, // 视窗的宽度,对应设计稿宽度
                viewportHeight: 1316, // 视窗的高度, 根据375设备的宽度来指定，一般是667，也可不配置
                unitPrecision: 3, // 指定`px`转换为视窗单位值的小数位数
                propList: ["*"], // 转化为vw的属性列表
                viewportUnit: "vw", // 指定需要转换成视窗单位
                fontViewportUnit: "vw", // 字体使用的视窗单位
                selectorBlaskList: [".ignore-"], // 指定不需要转换为视窗单位的类
                mediaQuery: true, // 允许在媒体查询中转换`px`
                minPixelValue: 2, // 小于或等于`1px`时不转换为视窗单位
                replace: true, // 是否直接更换属性值而不添加备用属性
                exclude: [/node_modules/, /layoutmobile/], // 忽略某些文件夹下的文件或特定文件
                landscape: false, // 是否添加根据landscapeWidth生成的媒体查询条件 @media (orientation: landscape)
                landscapeUnit: "vw", // 横屏时使用的单位
                landscapeWidth: 1200, // 横屏时使用的视窗宽度
              }),
            ];
          } else if (/layoutmobile/.test(path)) { //h5路径
            return [
              require("postcss-px-to-viewport")({
                unitToConvert: "px", // 默认值`px`，需要转换的单位
                viewportWidth: 750, // 视窗的宽度,对应设计稿宽度
                viewportHeight: 1334, // 视窗的高度, 根据375设备的宽度来指定，一般是667，也可不配置
                unitPrecision: 3, // 指定`px`转换为视窗单位值的小数位数
                propList: ["*"], // 转化为vw的属性列表
                viewportUnit: "vw", // 指定需要转换成视窗单位
                fontViewportUnit: "vw", // 字体使用的视窗单位
                selectorBlaskList: [".ignore-"], // 指定不需要转换为视窗单位的类
                mediaQuery: true, // 允许在媒体查询中转换`px`
                minPixelValue: 2, // 小于或等于`1px`时不转换为视窗单位
                replace: true, // 是否直接更换属性值而不添加备用属性
                exclude: [/node_modules/, /layouts/], // 忽略某些文件夹下的文件或特定文件
                landscape: false, // 是否添加根据landscapeWidth生成的媒体查询条件 @media (orientation: landscape)
                landscapeUnit: "vw", // 横屏时使用的单位
                landscapeWidth: 1080, // 横屏时使用的视窗宽度
              }),
            ];
          } else {
            return [];
          }
        },
      },
    },
  },

[hopo-o]

将移动端和pc端vue文件放两个文件夹，互相不关联。vue.config.js 配置改成根据不同路径返回不同的配置。

css: {
    loaderOptions: {
      postcss: {
        plugins: (params) => {
          console.log(params.context);
          console.log(params.resourcePath);

          let path = params.context;
          console.log(path);

          if (/layouts/.test(path)) { //pc路径
            return [
              require("postcss-px-to-viewport")({
                unitToConvert: "px", // 默认值`px`，需要转换的单位
                viewportWidth: 1200, // 视窗的宽度,对应设计稿宽度
                viewportHeight: 1316, // 视窗的高度, 根据375设备的宽度来指定，一般是667，也可不配置
                unitPrecision: 3, // 指定`px`转换为视窗单位值的小数位数
                propList: ["*"], // 转化为vw的属性列表
                viewportUnit: "vw", // 指定需要转换成视窗单位
                fontViewportUnit: "vw", // 字体使用的视窗单位
                selectorBlaskList: [".ignore-"], // 指定不需要转换为视窗单位的类
                mediaQuery: true, // 允许在媒体查询中转换`px`
                minPixelValue: 2, // 小于或等于`1px`时不转换为视窗单位
                replace: true, // 是否直接更换属性值而不添加备用属性
                exclude: [/node_modules/, /layoutmobile/], // 忽略某些文件夹下的文件或特定文件
                landscape: false, // 是否添加根据landscapeWidth生成的媒体查询条件 @media (orientation: landscape)
                landscapeUnit: "vw", // 横屏时使用的单位
                landscapeWidth: 1200, // 横屏时使用的视窗宽度
              }),
            ];
          } else if (/layoutmobile/.test(path)) { //h5路径
            return [
              require("postcss-px-to-viewport")({
                unitToConvert: "px", // 默认值`px`，需要转换的单位
                viewportWidth: 750, // 视窗的宽度,对应设计稿宽度
                viewportHeight: 1334, // 视窗的高度, 根据375设备的宽度来指定，一般是667，也可不配置
                unitPrecision: 3, // 指定`px`转换为视窗单位值的小数位数
                propList: ["*"], // 转化为vw的属性列表
                viewportUnit: "vw", // 指定需要转换成视窗单位
                fontViewportUnit: "vw", // 字体使用的视窗单位
                selectorBlaskList: [".ignore-"], // 指定不需要转换为视窗单位的类
                mediaQuery: true, // 允许在媒体查询中转换`px`
                minPixelValue: 2, // 小于或等于`1px`时不转换为视窗单位
                replace: true, // 是否直接更换属性值而不添加备用属性
                exclude: [/node_modules/, /layouts/], // 忽略某些文件夹下的文件或特定文件
                landscape: false, // 是否添加根据landscapeWidth生成的媒体查询条件 @media (orientation: landscape)
                landscapeUnit: "vw", // 横屏时使用的单位
                landscapeWidth: 1080, // 横屏时使用的视窗宽度
              }),
            ];
          } else {
            return [];
          }
        },
      },
    },
  },

我们也遇到了这个问题，将移动端和桌面端的组件分别放在了 view-mobile 和 view-desktop 下，在 postcss.config.js中double了一份 postcss-px-to-viewport 的配置，看效果是解决了。示例如下供参考：

module.exports = {
  plugins: [
    require('postcss-px-to-viewport')({
      ..., // other options
      viewportWidth: 375, // 移动端视窗高度 -> 375
      exclude: [/node_modules/, /view-desktop/], // 忽略 node_modules 和 桌面端组件 
    }),
    require('postcss-px-to-viewport')({
      ..., // other options
      viewportWidth: 1920, // 桌面端视窗的宽度 -> 1920
      exclude: [/node_modules/, /view-mobile/], // 忽略 node_modules 和 移动端组件 
    }),
  ],
}

P.S. 环境：vite@v3.2.1

[vaynevayne]

将移动端和桌面端的组件分别放在了

加载的时候,怎么选择加载不同的css?

[vaynevayne]

scale 缩放的话, left, translate定位的元素, 位置还对吗?

[notfound945]

如果是vite的话，可以在plugins多写几个 postcssPxToViewport，然后各个配置的exclude排除掉其它配置的路径就可以了

  css: {
    postcss: {
      plugins: [
        postcssPxToViewport({
          unitToConvert: 'px',
          viewportWidth: 1920, 
          exclude: [/node_modules/, /mobile/], 
        }),
        postcssPxToViewport({
          unitToConvert: 'px', 
          viewportWidth: 750,
          exclude: [/node_modules/, /browser/],
        }),
      ]
    },
  },

[pinecone-squirrel]

将移动端和pc端vue文件放两个文件夹，互相不关联。vue.config.js 配置改成根据不同路径返回不同的配置。

css: {
    loaderOptions: {
      postcss: {
        plugins: (params) => {
          console.log(params.context);
          console.log(params.resourcePath);

          let path = params.context;
          console.log(path);

          if (/layouts/.test(path)) { //pc路径
            return [
              require("postcss-px-to-viewport")({
                unitToConvert: "px", // 默认值`px`，需要转换的单位
                viewportWidth: 1200, // 视窗的宽度,对应设计稿宽度
                viewportHeight: 1316, // 视窗的高度, 根据375设备的宽度来指定，一般是667，也可不配置
                unitPrecision: 3, // 指定`px`转换为视窗单位值的小数位数
                propList: ["*"], // 转化为vw的属性列表
                viewportUnit: "vw", // 指定需要转换成视窗单位
                fontViewportUnit: "vw", // 字体使用的视窗单位
                selectorBlaskList: [".ignore-"], // 指定不需要转换为视窗单位的类
                mediaQuery: true, // 允许在媒体查询中转换`px`
                minPixelValue: 2, // 小于或等于`1px`时不转换为视窗单位
                replace: true, // 是否直接更换属性值而不添加备用属性
                exclude: [/node_modules/, /layoutmobile/], // 忽略某些文件夹下的文件或特定文件
                landscape: false, // 是否添加根据landscapeWidth生成的媒体查询条件 @media (orientation: landscape)
                landscapeUnit: "vw", // 横屏时使用的单位
                landscapeWidth: 1200, // 横屏时使用的视窗宽度
              }),
            ];
          } else if (/layoutmobile/.test(path)) { //h5路径
            return [
              require("postcss-px-to-viewport")({
                unitToConvert: "px", // 默认值`px`，需要转换的单位
                viewportWidth: 750, // 视窗的宽度,对应设计稿宽度
                viewportHeight: 1334, // 视窗的高度, 根据375设备的宽度来指定，一般是667，也可不配置
                unitPrecision: 3, // 指定`px`转换为视窗单位值的小数位数
                propList: ["*"], // 转化为vw的属性列表
                viewportUnit: "vw", // 指定需要转换成视窗单位
                fontViewportUnit: "vw", // 字体使用的视窗单位
                selectorBlaskList: [".ignore-"], // 指定不需要转换为视窗单位的类
                mediaQuery: true, // 允许在媒体查询中转换`px`
                minPixelValue: 2, // 小于或等于`1px`时不转换为视窗单位
                replace: true, // 是否直接更换属性值而不添加备用属性
                exclude: [/node_modules/, /layouts/], // 忽略某些文件夹下的文件或特定文件
                landscape: false, // 是否添加根据landscapeWidth生成的媒体查询条件 @media (orientation: landscape)
                landscapeUnit: "vw", // 横屏时使用的单位
                landscapeWidth: 1080, // 横屏时使用的视窗宽度
              }),
            ];
          } else {
            return [];
          }
        },
      },
    },
  },

我们也遇到了这个问题，将移动端和桌面端的组件分别放在了 view-mobile 和 view-desktop 下，在 postcss.config.js中double了一份 postcss-px-to-viewport 的配置，看效果是解决了。示例如下供参考：

module.exports = {
  plugins: [
    require('postcss-px-to-viewport')({
      ..., // other options
      viewportWidth: 375, // 移动端视窗高度 -> 375
      exclude: [/node_modules/, /view-desktop/], // 忽略 node_modules 和 桌面端组件 
    }),
    require('postcss-px-to-viewport')({
      ..., // other options
      viewportWidth: 1920, // 桌面端视窗的宽度 -> 1920
      exclude: [/node_modules/, /view-mobile/], // 忽略 node_modules 和 移动端组件 
    }),
  ],
}

P.S. 环境：vite@v3.2.1

你这个是打两个包，部署两套 如果是一次部署，用媒体查询怎么搞？