移动端 h5如何生成快捷方式_h5移动端要点记录

1.在input有padding和height，input自身高度是二者之和，需要加上属性-webkit-box-sizing: border-box;

box-sizing: border-box;

这两个属性可以防止计算padding高度为自身高度；

2.在需要一些文字两段对齐时，只有一行的情况下，光是用text-align:justify;是不起作用的（因为它只针对最后一行有效）。

解决方案可以在对于元素上加上一个伪元素

@mixin title_style($fontweight:normal) {
    font-weight: $fontweight;
    line-height: $font_title;
    font-size:$font_title;
    height:  $font_title;
    text-align: justify;
    width: 100%;
    &:after {
        content: " ";
        display: inline-block;
        width: 100%;
    }
}

3.webpack不同域下转发：

proxy: {
"/xhr": {
"target": "http:/www.qitayu/jiekou",
"secure": false, //用于https安全
"changeOrigin": true //用于不同域名
}

4.在使用antd-mobile+ts时，

tsconfig.ts 中，需要把 "module": "es2015",

如果还是有时会报错，设置"esModuleInterop": true

可以参考：

TypeScript 2.7 · TypeScript中文网 · TypeScript--JavaScript的超集

5.ts检查下不支持事件bind(this),代替方案：

<span className={styleName} data-arg={item.id} key={item.id} onClick={this.changePriId} >
                <PrivilegeContainer  {...item} />
            </span>
        });
        return dom
    }

    private changePriId = (event: any) => {
        console.log(event.currentTarget.dataset.arg);
        const id = event.currentTarget.dataset.arg || 0;
        this.props.changePriId(id);
    }

6.Font Boosting问题：字体的显示大小，与在CSS中指定的大小不一致。

解决方案：在该元素的class中添加max-height:100% 。

具体可参考：https://github.com/amfe/article/issues/10