@winner-fed/plugin-viewport

Viewport plugin for WinJS.

底层基于 postcss-mobile-forever 封装。

Usage

Install:

npm add @winner-fed/plugin-viewport -D

Add plugin to your .winrc.ts:

// .winrc.ts
export default {
  plugins: ['@winner-fed/plugin-viewport'],
  // 开启配置
  // 参考 https://github.com/wswmsword/postcss-mobile-forever?tab=readme-ov-file#%E9%85%8D%E7%BD%AE%E5%8F%82%E6%95%B0 
  viewport: {}
};

Options

| Name | Type | Default | Desc | |:--|:--|:--|:--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| | viewportWidth | number|(file: string) => number | 750 | 应用基于该宽度进行开发，转换后的伸缩视图将会以该宽度的视图作为标准进行比例伸缩；可以传递函数动态生成宽度，例如 file => file.includes("vant") ? 375 : 750 表示在名称包含“vant”的文件内使用 375px 的宽度，而其他文件使用 750px 的宽度 | | mobileUnit | string | "vw" | 移动端竖屏视口视图，转换成什么伸缩单位？设置为 rem 后激活 rem-mode | | maxDisplayWidth | number | / | 伸缩视图的最大宽度 | | basicRemWidth | number | / | rem-mode 的基准宽度，若不设定，将通过 viewportWidth 获取 | | enableMediaQuery | boolean | false | 打开媒体查询模式，打开后将自动关闭 maxDisplayWidth，激活 mq-mode | | desktopWidth | number | 600 | 适配到桌面端宽度时，展示的视图宽度 | | landscapeWidth | number | 425 | 适配到移动端横屏宽度时，展示的视图宽度 | | appSelector | string | / | 页面最外层选择器，例如“#app”，用于设置在桌面端和移动端横屏时的居中样式，样式文件中至少要包含空的选择器 #app {} | | appContainingBlock | "calc"|"manual"|"auto" | "calc" | 该属性和矫正 fixed 定位元素有关，manual 将不矫正；calc 将通过插件主动计算的方式矫正元素尺寸，是默认行为；auto 将通过 transform: translateZ(0) 强制设置根包含块为 appSelector，从而自动矫正元素，并且此时需要设置属性 necessarySelectorWhenAuto | | necessarySelectorWhenAuto | string | / | 当 appContainingBlock 设为 auto 时，需要指定该属性，该属性指定了 appSelector 往内一层的元素选择器，查看一个关于指定元素作为包含块的实验以了解如何使用该属性，您也可以查看使用这个属性的示例项目以了解如何使用这个属性 | | border | boolean|string | false | 在页面外层展示边框吗，用于分辨居中的小版心布局和背景，可以设置颜色字符串 | | disableDesktop | boolean | false | 打开则不做桌面端适配，使用该参数前需要打开 enableMediaQuery | | disableLandscape | boolean | false | 打开则不做移动端横屏适配，使用该参数前需要打开 enableMediaQuery | | disableMobile | boolean | false | 打开则不做移动端竖屏适配，把 px 转换为视口单位，如 vw | | exclude | RegExp|RegExp[] | / | 排除文件或文件夹 | | include | RegExp|RegExp[] | / | 包括文件或文件夹 | | unitPrecision | number | 3 | 单位精确到小数点后几位？ | | propList | string[] | ['*'] | 哪些属性要替换，哪些属性忽略？用法参考 postcss-px-to-viewport 文档 | | selectorBlackList | (string|RegExp)[] | [] | 选择器黑名单，名单上的不转换 | | propertyBlackList | propertyBlackList | [] | 属性黑名单，名单上的不转换，如果要指定选择器内的属性，用对象的键表示选择器名称，具体用法见 vant 的范例代码 | | valueBlackList | (string|RegExp)[] | [] | 属性值黑名单，名单上的值不转换 | | rootContainingBlockSelectorList | (string|RegExp)[] | [] | 包含块是根元素的选择器列表，效果和标注注释 /* root-containing-block */ 相同 | | verticalWritingSelectorList | (string|RegExp)[] | [] | 纵向书写模式的选择器列表，效果和在选择器顶部标注注释 /* vertical-writing-mode */ 相同 | | minDesktopDisplayWidth | number | / | 宽度断点，如果不提供这个值，默认使用 desktopWidth 的值，视图大于这个宽度，则页面宽度是桌面端宽度 desktopWidth，“原理和输入输出范例”一节具体介绍了该值的触发情况 | | maxLandscapeDisplayHeight | number | 640 | 高度断点，视图小于这个高度，并满足一定条件，则页面使用移动端横屏宽度，“原理和输入输出范例”一节具体介绍了该值的触发情况 | | side | any | / | 侧边配置，在桌面端媒体查询中生效，用于利用宽屏的空间，后文将介绍它的若干子属性 | | comment | any | / | 自定义注释，改变注释的名称，后文将介绍它的若干子属性 | | customLengthProperty | any | / | 用于指定需要添加到桌面端或横屏的自定义变量（css 变量，var(...)），如果不指定，默认所有和长度有关的属性，如果使用了自定义变量，都会被添加入桌面端和横屏，后文将介绍它的若干子属性 | | experimental.extract | boolean | false | 提取桌面端与横屏样式代码，用于生产环境，用于代码分割优化产包，具体查看“注意事项”一节 | | experimental.minDisplayWidth | number | / | 限制最小宽度，和 maxDisplayWidth 搭配使用

默认配置参数

{
  "viewportWidth": 750,
  "maxDisplayWidth": null,
  "enableMediaQuery": false,
  "desktopWidth": 600,
  "landscapeWidth": 425,
  "minDesktopDisplayWidth": null,
  "maxLandscapeDisplayHeight": 640,
  "appSelector": "#app",
  "appContainingBlock": "calc",
  "necessarySelectorWhenAuto": null,
  "border": false,
  "disableDesktop": false,
  "disableLandscape": false,
  "disableMobile": false,
  "exclude": null,
  "include": null,
  "unitPrecision": 3,
  "selectorBlackList": [],
  "valueBlackList": [],
  "rootContainingBlockSelectorList": [],
  "verticalWritingSelectorList": [],
  "propList": ["*"],
  "mobileUnit": "vw",
  "side": {
    "width": null,
    "gap": 18,
    "selector1": null,
    "selector2": null,
    "selector3": null,
    "selector4": null,
    "width1": null,
    "width2": null,
    "width3": null,
    "width4": null
  },
  "comment": {
    "applyWithoutConvert": "apply-without-convert",
    "rootContainingBlock": "root-containing-block",
    "notRootContainingBlock": "not-root-containing-block",
    "ignoreNext": "mobile-ignore-next",
    "ignoreLine": "mobile-ignore",
    "verticalWritingMode": "vertical-writing-mode"
  },
  "customLengthProperty": {
    "rootContainingBlockList_LR": [],
    "rootContainingBlockList_NOT_LR": [],
    "ancestorContainingBlockList": [],
    "disableAutoApply": false
  },
  "experimental": {
    "extract": false,
    "minDisplayWidth": null
  }
}

License

MIT.