如何使用内联 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 style="width: 95%; max-width: 560px; height: auto; min-height: 171px;">

如果需要进一步的帮助，请随时与我联系。