OmniStudio 文本块中的响应式字体大小实现

Question

我目前正在 OmniStudio 中处理一个项目，我需要使字体大小响应文本块。要求是将移动设备的字体大小设置为 12px，桌面设备的字体大小设置为 14px。

这是文本块的现有 HTML 代码：

`

文本示例

Answer 1

您可以使用媒体查询来更改移动和桌面设备中的

font-size

。我提供示例代码：

<p>
    <span class="responsive-text" style="color: #7e8c8d; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; text-align: start; text-indent: 0px; text-transform: none; word-spacing: 0px; -webkit-text-stroke-width: 0px; white-space: normal; background-color: #ffffff; display: inline !important; float: none;">
        Text Example
    </span>
</p>

<style>
    // This is for Mobile device, you can adjust the max-wdith based on your requirements
    @media only screen and (max-width: 767px) { 
        .responsive-text {
            font-size: 12px !important;
        }
    }

    // This is for Mobile device, you can adjust the min-width
    @media only screen and (min-width: 768px) { // This is for Desktop device
        .responsive-text {
            font-size: 14px !important;
        }
    }
</style>