quasar-v2(vue3)搭建quasar app - cordova移动端适配

专栏发布 quasar cordova建立各种app需求 持续更新…

移动端适配就是为了让页面可以在不同的屏幕尺寸下兼容运行，使内容大小这些能够动态的改变
那么在quasar app下需要自定义组件如何到达适配效果

postcss-px-to-viewport

将px单位转换为视口单位的 (vw, vh, vmin, vmax) 的 PostCSS 插件.
样式根据视口大小来调整宽度，这个脚本可以将你CSS中的px单位转化为vw，1vw等于1/100视口宽度。

安装

npm安装

$ npm install postcss-px-to-viewport --save-dev

yarn安装

$ yarn add -D postcss-px-to-viewport

默认参数:

{
  unitToConvert: 'px',
  viewportWidth: 320,
  unitPrecision: 5,
  propList: ['*'],
  viewportUnit: 'vw',
  fontViewportUnit: 'vw',
  selectorBlackList: [],
  minPixelValue: 1,
  mediaQuery: false,
  replace: true,
  exclude: undefined,
  include: undefined,
  landscape: false,
  landscapeUnit: 'vw',
  landscapeWidth: 568
}

配置字段	类型	描述
unitToConvert	String	需要转换的单位，默认为"px"
viewportWidth	Number	设计稿的视口宽度
unitPrecision	Number	单位转换后保留的精度
propList	Array	能转化为vw的属性列表
viewportUnit	String	希望使用的视口单位 例：vw
fontViewportUnit	String	字体使用的视口单位
selectorBlackList	Array	忽略的CSS选择器，不会转为视口单位，使用原有的px等单位
minPixelValue	Number	设置最小的转换数值，如果为1的话，只有大于1的值会被转换
mediaQuery	Boolean	媒体查询里的单位是否需要转换单位
replace	Boolean	是否直接更换属性值，而不添加备用属性
exclude	Array or Regexp	忽略某些文件夹下的文件或特定文件，例如 ‘node_modules’ 下的文件
include	Array or Regexp	设置了include，那将只有匹配到的文件才会被转换
landscapeUnit	String	横屏时使用的单位
landscapeWidth	Number	横屏时使用的视口宽度

propList

传入特定的CSS属性；

• 可以传入通配符""去匹配所有属性，例如：['']；
• 在属性的前或后添加"*",可以匹配特定的属性. (例如[‘position’] 会匹配 background-position-y)
• 在特定属性前加 “!”，将不转换该属性的单位 . 例如: [‘*’, ‘!letter-spacing’]，将不转换letter-spacing
• “!” 和 ""可以组合使用， 例如: ['', ‘!font*’]，将不转换font-size以及font-weight等属性

selectorBlackList

• 如果传入的值为字符串的话，只要选择器中含有传入值就会被匹配
  - 例如 selectorBlackList 为 ['body'] 的话， 那么 .body-class 就会被忽略
• 如果传入的值为正则表达式的话，那么就会依据CSS选择器是否匹配该正则
  - 例如 selectorBlackList 为 [/^body$/] , 那么 body 会被忽略，而 .body 不会

exclude

• 如果值是一个正则表达式，那么匹配这个正则的文件会被忽略
• 如果传入的值是一个数组，那么数组里的值必须为正则

include

例如只转换 ‘src/mobile’ 下的文件
(include: /\/src\/mobile\//)
- 如果值是一个正则表达式，将包含匹配的文件，否则将排除该文件
- 如果传入的值是一个数组，那么数组里的值必须为正则

如何在quasar 中 使用 适配

在文件 .postcssrc.js 中设置 这样就会自动 px 转换 vw

module.exports = {
  plugins: [
    // to edit target browsers: use "browserslist" field in package.json
    require('autoprefixer'),
    require('postcss-px-to-viewport')({
      unitToConvert: 'px', // 需要转换的单位，默认为"px"
      viewportWidth: 720, // 视窗的宽度，对应设计稿的宽度
      viewportHeight: 1280, // 视窗的高度，对应的是我们设计稿的高度
      unitPrecision: 3, // 单位转换后保留的精度
      propList: [
        // 能转化为vw的属性列表
        '*',
      ],
      viewportUnit: 'vw', // 希望使用的视口单位
      fontViewportUnit: 'vw', // 字体使用的视口单位
      selectorBlackList: [], // 需要忽略的CSS选择器，不会转为视口单位，使用原有的px等单位。cretae
      minPixelValue: 1, // 设置最小的转换数值，如果为1的话，只有大于1的值会被转换
      mediaQuery: false, // 媒体查询里的单位是否需要转换单位
      replace: true, // 是否直接更换属性值，而不添加备用属性
      exclude: /(\/|\\)(node_modules)(\/|\\)/, // 忽略某些文件夹下的文件或特定文件，例如 'node_modules' 下的文件
    }),
  ]
}

存在问题

• quasar内置组件不会转换单位，但是大部分组件包含适配 和 转换class类属性 利用这些控制想要达到的效果
• style 属性不会转换 尽量使用class