wswmsword / postcss-mobile-forever

一款 PostCSS 插件,将固定尺寸的视图转为可跟随宽度变化而等比例伸缩的视图。To adapt different displays by one mobile viewport.
https://wswmsword.github.io/examples/mobile-forever/vanilla/
MIT License
325 stars 19 forks source link

feat: 支持运行时转换 #17

Closed bigmeow closed 10 months ago

bigmeow commented 11 months ago

暴露一个运行时函数,可以进行运行时的代码转换:

transform("750px") ==>  输出100vw

这样行内样式我们可以自己处理(一般行内样式都是用于动态的逻辑处理):

import { transform } from "xxxx";

function A () {
  //宽高比
  const rate = 2;
  return <img src="xxx" width={transform(750)}  height={transform(750/rate)} />
}
bigmeow commented 11 months ago

https://github.com/wswmsword/postcss-mobile-forever/issues/5

wswmsword commented 11 months ago

好的,谢谢建议,这个估计得新开个项目,这个项目里硬编码的一些用来判断属性符不符合转换条件的代码就可以去掉了

wswmsword commented 11 months ago

我刚刚发布了 scale-view,可以进行动态行内转换:

// home.js
import { init } from "scale-view";
init(750, 600); // 初始化,750 作为设计稿宽度,600 作为实际最大宽度
// ComponentA.js
import { clampVw } from "scale-view";
// 传入动态宽高比 rate
function A ({ rate }) {
  return <img src="xxx" width={clampVw(750)}  height={clampVw(750 / rate)} />
}