Question

我正在制作一个我正在努力做出回应的网页。我正在使用背景图像并尝试将它们一个放在另一个之下但是当使用响应单位（vh，em，rem，％）添加margin-top属性时，我的背景图像会移动，但图像的位置会有很大的变化在笔记本电脑的屏幕和Ipad屏幕上。

LINK： http://dbtest.destinationballybunion.ie/?page_id=3733

正如我所说，我尝试使用所有响应单元，并且我在结果中保持相同的变化。有没有办法可以在不使用媒体查询的情况下解决这个问题？

PS我正在使用一个名为Visual Composer的拖放Wordpress插件

CSS页面：

#container {
    margin: 0%;
}

#container text area {
    margin: 5%;
}

wrapper {
    padding: 0px;
    margin-top: 0px; 
    margin-bottom: 0px; 
}

entry {
    box-shadow: 0 0 0px rgba(0, 0, 0, 0);
    padding: 0px;
}

entry-header.style {
    position: absolute;
    left: -9999px;
}

.entry-content a img, #attachment-nav a img {
    background: none repeat scroll transparent;
    border: 0px solid #EEEEEE;
    box-shadow: 0 0 0px #EEEEEE;
    max-width: 98.5%;
    padding: 0%;
}

.entry-content a:hover img, #attachment-nav a:hover img {
    background: transparent repeat scroll 0 0;
}

.entry-title {
   display:none;
}

.single .entry, .page .entry, .error404 .entry {
    margin-bottom: 5.1% !important;
    padding: 0;
}

#site-title {
    height:100%;
    width:100%;
} 

#site-title, #site-description {
    line-height: 100%;
}

#site-title {
    margin: 0 0;
}

#site-title img {
    margin: 0;
}

#site-title img {
    padding: 0;
}

#access {
    position: relative;
    margin-top:-0.5%;
}

.tearhist {
    background-size: 100% 100%;
    background-size: contain;
    background-repeat:no-repeat;
}

.tearhist {
    position: absolute;
    margin-top: -11.000em;
    z-index: 100;
}

.tearytext {
    position: absolute;
    margin-top: 2.500em;
    margin-right: 2.500em;
}

.tearytext h4 {
    font-size: 24px;
    font-size: 1.100em;
    line-height: 100%;
}

.histmainb {
    background-size: 100% auto;
    background-repeat:no-repeat;
}

.histmainb {
    position: relative;
}

.histblocka {
    background-image: url('http://dbtest.destinationballybunion.ie/wp-content/uploads   
/2014/10/HISTOBACK-1-SMALL.png');
    background-size: auto auto;
    background-size: contain;
    background-repeat:no-repeat;
}

.histblocka {
    position: absolute;
}

.histblocka p {
    margin-right: 23.000em;
    margin-left: 3.500em;
}

.histblocka h2 {
    margin-top: 3.500em;
    margin-left:  3.000em;
}

.histblocka h2 {
    text-shadow: 0px 2px 3px #666;
}

.histblocka p {
    font-size: 1.000em;
}

.histblocka h2 {
    font-size: 1.000em;
}

.nublockb {
    position: absolute;
    margin-top: 21.000em;
}

.nublockb {
    background-image: url('http://dbtest.destinationballybunion.ie/wp-content/uploads 
/2014/10/HISTOBACK-3-SMALL.png');
    background-size: auto auto;
    background-size: contain;
    background-repeat:no-repeat;
}

响应单位没有真正起作用

0 个答案: