如何使用内联 css 使 div 响应式

Question

我遇到的情况是我只能使用内联CSS，否则我们的Wordpress 主题会变得一团糟。我构建了这个小 div，它应该是我们文章中的转换元素。我现在需要让它响应移动设备。

感谢所有帮助:)

这就是我的代码：

<div style="width: 560px; height: 171px; padding: 32px 32px 0px 32px; box-shadow: 0 0.063rem 0.188rem rgba(0,0,0,0.2), 0 0.125rem 0.125rem rgba(0,0,0,0.12), 0 0 0.125rem rgba(0,0,0,0.14);">

    <div>

        <h2 style="font-family: 'Circular TT', Helvetica, sans-serif; font-weight: 700px; margin: 0px; color: #003264;">Ist Ihnen das Preis-Leistungsverhältnis für Ihren Zahnschutz wichtig?</h2>

    </div>

    <div style="margin-top: 32px; display: block; text-align: center;">

        <button onclick="window.location.href = ;" type="submit" style="display: inline-block; color: #32ff96; background-color: #003264; border: 0.125rem solid #003264; font-family: Circular TT, Arial, Helvetica, sans-serif; font-weight: 700; font-size: 1rem; cursor: pointer; text-decoration: none; position: relative; width: calc(50% - 15px); padding: .625rem 1.37rem;">Ja</button>

        <button onclick="window.location.href = ;" type="submit" style="display: inline-block; color: #32ff96; background-color: #003264; border: 0.125rem solid #003264; font-family: Circular TT, Arial, Helvetica, sans-serif; font-weight: 700; font-size: 1rem; cursor: pointer; text-decoration: none; position: relative; width: calc(50% - 15px); padding: .625rem 1.37rem; margin-left: 20px;">Nein</button>

    </div>

</div>

Answer 1

要使您的 div 具有响应能力：使用动态宽度值，例如%或 ，vh可根据屏幕尺寸自动调整。使用autovalue 属性height来自动调整 div 内容，因为内容在窄屏幕上会变得更长。您还可以设置 amax-width来限制大屏幕上的 div 宽度。<div&nbsp;style="width:&nbsp;95%;&nbsp;max-width:&nbsp;560px;&nbsp;height:&nbsp;auto;&nbsp;min-height:&nbsp;171px;">如果需要进一步的帮助，请随时与我联系。