css - 当屏幕尺寸缩小时停止图像跳出位置

Question

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

CSS:

    <style type="text/css">
    #wrapperlp {
        width: 100%;
        height:700px;
        margin-left:13%;
        margin-top:5%;
        background-image:url(https://***/blackbg.png);
        background-repeat:no-repeat;
        opacity:1;

    }

    #designbg {
        background-repeat:no-repeat;
        margin-left: 5%;
        padding-top: 3%;           
    }

文本样式

    #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;
    }

phone.png 图片样式:

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

    }

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

HTML:

<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>

Answer 1

您正在使用 margin-top 百分比。但是，边距的百分比是相对于窗口宽度而不是窗口高度来衡量的!

参见 http://www.w3.org/TR/CSS2/box.html#value-def-margin-width

解决方案:使用其他单位来表示元素的边距，或者使用其他方式在屏幕上定位它们(​​例如 top:5% 结合 position:absolute )。