chameleon web的cpx编译结果上不是rem

kuuvgm7e 于 5个月前发布在其他

关注(0)|答案(3)|浏览(56)

bug描述
使用input标签，通过cStyle传递的样式中，font-size的24cpx总结在DOM的属性值是px而不是rem

复现bug的步骤

<input class="input-box" 
  value="{{value}}"
  c-bind:input="onChange"
  placeholder="搜索城市"
  cStyle="width: 100%; height: 90%; font-size: 28cpx; background-color: #f5f5f5; outline: none; border: none;" />

问题截图

编译环境信息
chameleon-tool 版本：1.0.3
nodejs版本、npm版本：v12.11.0、 6.11.3
电脑操作系统： macOS High Sierra 10.14.6
运行环境信息

端版本： PC Chrome浏览器 78

chameleon

来源：https://github.com/didi/chameleon/issues/362

3条答案

按热度按时间

uqdfh47h1#

1.那个 px 值就是根据 rem 转换过了的；
2.input 接受的属性是 cstyle

具体可以复制以下代码，启动服务之后再浏览器查看

<template>
    <view>
      <input placeholder='请输入你的用户名' focus="{{isfocus}}" c-bind:blur="bindblurevent" cstyle='font-size:24cpx;'></input>
      <view style="{{cstyle}}">chameleon</view>
      <view style="font-size:24cpx;">chameleon</view>
    </view>
</template>
<script>
class Input {
  data = {
    isfocus: false,
    fontSize: 24
  }
  computed = {
    cstyle(){
      return 'font-size: ' + this.fontSize + 'cpx'
    }

  }
  watch = {}
  methods = {
    bindblurevent()  {
      console.log('blur');
      this.isfocus = false;
    }
  }
  mounted = function(res) {
    setTimeout(() => {
        this.isfocus = true;
    }, 300);
  }
};
export default new Input();
</script>
<script cml-type="json">
{
  "base": {}
}
</script>

赞(0）回复(0）举报 5个月前

k75qkfdt2#

@jimwmg
那么为何不保留rem这个单位而是转换成px呢？
如果我在Chrome普通情况下是看见大字体，使用devTool模拟移动设备，其他的字体会响应变小，而input框的字体还是保持原来的大小，失去的响应式变化了