我有这段代码，它允许我将各种内容放入固定放置的 CSS 定义的 div block 中，效果非常好——但有时我需要这样的页面来响应——你认为这可以做到吗？ 我已经包含了代码:
#page_content {
min-height: 2000px;
}
#rectangle1 {
background-repeat: no-repeat;
/* [disabled]background-image: url(sg_prototype_media/rectangle1.gif); */
margin-top: 0px;
margin-left: 0px;
height: 153px;
width: 479px;
z-index: 4;
top: 48px;
left: 29px;
position: absolute;
}
#rectangle2 {
background-repeat: no-repeat;
/* [disabled]background-image: url(sg_prototype_media/rectangle2.gif); */
margin-top: 0px;
margin-left: 0px;
height: 153px;
width: 856px;
z-index: 4;
top: 48px;
left: 524px;
position: absolute;
}
#rectangle3 {
background-repeat: no-repeat;
/* [disabled]background-image: url(sg_prototype_media/rectangle3.gif); */
margin-top: 0px;
margin-left: 0px;
height: 884px;
width: 520px;
z-index: 4;
top: 48px;
left: 1403px;
position: absolute;
}
#rectangle4 {
background-repeat: no-repeat;
/* [disabled]background-image: url(sg_prototype_media/rectangle3.gif); */
margin-top: 0px;
margin-left: 0px;
height: 701px;
width: 1351px;
z-index: 4;
top: 229px;
left: 29px;
position: absolute;
}
#background {
background-repeat: no-repeat;
/* [disabled]background-image: url(sg_prototype_media/background.gif); */
margin-top: 0px;
margin-left: 0px;
height: 2000px;
width: 2000px;
z-index: 3;
top: 0px;
left: 0px;
position: absolute;
background-color: rgb(0,0,0);
}
.page_content_bkg {
width: 2000px;
height: 2000px;
left: 0px;
top: 0px;
display: block;
}
.container_div {
position: relative;
width: 2000px;
margin-bottom: 0px;
margin-right: auto;
margin-top: 0px;
margin-left: auto;
}
.spacing_div {
min-height: 0px;
height: 0px;
}
*:focus {
outline-style: none;
}
.full_width {
position: relative;
padding: 0px;
margin: 0px;
min-width: 2000px;
}
ains {
text-decoration: none;
}
html, body {
height: 100%;
background-color: #FFFFFF;
}
body {
-webkit-text-size-adjust: none;
height: 100%;
padding-bottom: 0px;
padding-top: 0px;
padding-right: 0px;
padding-left: 0px;
margin-bottom: 0px;
margin-top: 0px;
margin-right: 0px;
margin-left: 0px;
} <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<!-- (sg_cms) -->
<!-- -->
<!-- (sg_emit "sg_prototype_content/title.xml") -->
</head>
<body>
<div id="page_div">
<div class="full_width" id="page_content">
<div class="container_div">
<div id="background" class=""></div>
<div id="rectangle1" class="">
<iframe src="https://www.ubs.com/global/en.html"height="100%" width="100%" frameborder="0" scrolling="no"> </iframe>
</div>
<div id="rectangle2" class=""><iframe src="https://www.ubs.com/global/en.html"height="100%" width="100%" frameborder="0" scrolling="no"> </iframe></div>
<div id="rectangle3" class=""><iframe src="https://www.ubs.com/global/en.html"height="100%" width="100%" frameborder="0" scrolling="no"> </iframe></div>
<div id="rectangle4" class=""><iframe src="https://www.ubs.com/global/en.html"height="100%" width="100%" frameborder="0" scrolling="no"> </iframe></div>
<div id="pagesize_gap" style="height:2000px;"></div>
<div id="clear_footer"></div>
</div><!-- /prototype container_div -->
</div><!-- /page_content:full_width -->
</div><!-- /page_div -->
<!-- (sg_chau) -->
<!-- (sg_suppress --> <!--) -->
</body>
</html>最佳答案
使用 css 媒体查询来改变特定目标的屏幕尺寸。 它会匹配它会拉伸(stretch)的屏幕..
@media only screen and (max-width: 500px) {
#rectangle1 {
background-repeat: no-repeat;
/* [disabled]background-image: url(sg_prototype_media/rectangle1.gif); */
margin-top: 0px;
margin-left: 0px;
height: inherit;
width: 50%;
z-index: 4;
top: 20%;
left: 10%;
position: absolute;
}
}
通过这种方式，您可以实现响应式可拉伸(stretch)布局。将每个像素用作转换百分比。
为了获得好的结果，您可以使用 Bootstrap css..
关于html - 使 CSS DIV block 响应，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42691378/