Css 当屏幕尺寸减小时，停止图像跳出位置

运行下面的代码后，当我缩小屏幕尺寸时，image phone.png和所有文本跳出位置。我怎样才能阻止这一切的发生

css:

phone.png图像的样式：

    #ad_logo {
        height: 500px;
        margin-left: 2%;
        margin-top: -42%;

    }

    #logobtm {
        margin-left: 2%;
        margin-top: -42%;
    }
</style>

Html:

您使用的是百分比最高的保证金。但是，边距的百分比是相对于窗口宽度而不是窗口高度来测量的

看

---

解决方案：使用另一个单位来表示中元素的边距，或使用另一种方式在屏幕上定位它们，例如top:5%与position:absolute组合使用。

您能创建一个小提琴吗？创建：是文本吗？该死

    #ad_head {           
        color: #f2852d;
        font-weight: bold;
        margin-left: 28%;
        margin-top: -21.5%;
        font-size: 21px;
    }

     #ad_message {
        margin-left: 28%;
        font-size:10px;
        color:white;
        font-weight:normal;
    }

    #ad_logo {
        height: 500px;
        margin-left: 2%;
        margin-top: -42%;

    }

    #logobtm {
        margin-left: 2%;
        margin-top: -42%;
    }
</style>

<div id="wrapperlp">
    <div id="designbg"><img src="https://*****/image.png" />
       <div id="ad_logo"><img src="https://****phone.png" /></div>

        <div>   
            <div id="ad_head">Text1<br />Text...</div>
            <div id="ad_message">Text2</div>
            <div id="logobtm"><img src="**.png" /></div>
        </div>

    </div>
</div>