反馈已提交

网络繁忙

当前为10.0版本文档,只有最新版本的文档支持在线编辑修改,如果想创建/编辑文档,请移步至 最新版帮助文档

决策报表新自适应_单元格以HTML展示

  • 文档创建者:用户3pBiH8835
  • 历史版本:6
  • 最近更新:panda君 于 2020-10-26
  • 1. 概述

    当单元格为以html展示时,部分客户需要html展示的字体也是自适应的,目前可采用以下三种解决方案,来满足当前客户需求。

    2. 内联样式修改方案

    1)场景:html内容本身就是写的内联样式或者以html展示的单元格较少,且单元格之间字体大小不需要复用(比如以html展示的单元格A1A2字体都是35px)。

    2)方式:直接在html上标注字体大小。

    3)兼容性:新自适应所兼容的范围。

    示例:

    原始html:

    <div>Hello</div>

    修改后html:

    <div style="font-size: 35px">Hello</div>

    3. Css修改方案(推荐方案)

    1)场景:多个单元格样式复用或采用的是css设置字体大小。

    2)方式:修改css样式。

    3)兼容性:客户浏览器环境满足Edge>=15chromefirefoxsafari>=9.1。

    示例:

    原始css:

    .name {
        font-size: 35px;
        color: blue;
        background-color: red;
    }

    修改后css:

    .name {
        font-size: 35px;
        font-size: calc(var(--font-scale) * 35px);
        color: blue;
        background-color: red;
    }

    4.Dom Attribute修改方案

    1)场景:多个单元格样式复用或采用的是css设置字体大小,且客户浏览器环境不满足Css修改方案。

    2)方式:css不用修改,需要增加dom属性,在需要自适应字体的dom上设置data-font-scale="1"这个属性。

    3)兼容性:新自适应所兼容的范围。

    示例:

    原始html:

    <div>Hello</div>

    修改后html:

    <div data-font-scale="1">Hello</div>


    附件列表


    主题: 决策报表应用
    已经是第一篇
    已经是最后一篇
    • 有帮助
    • 没帮助
    • 只是浏览

    售前咨询电话

    400-811-8890转1

    在线技术支持

    请前往「服务平台」,选择「在线支持」

    热线电话:400-811-8890转2

    总裁办24H投诉

    热线电话:173-1278-1526