使CSS DIV块响应
问题描述：
我有这个代码，它允许我将各种内容放入固定放置的CSS定义的div块中，它可以很好地工作 - 但有时候我需要这样的页面来响应 - 你认为它可以是做了什么？ 我已经包括了代码：使CSS DIV块响应
#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媒体查询来更改特定目标的屏幕尺寸。 将在屏幕就会绵延..
@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;
}
}
通过这种方式可以实现响应伸缩布局相匹配..使用每像素为转换率..
对于好的结果，你可以使用引导css ..
“*你认为可以做吗？*” - 是的。您将不得不对标记和样式进行很多更改。开始绘制纸张，你希望你的网站看起来像不同的屏幕尺寸。完成之后，阅读有关响应式设计的教程。尝试一个一个的做事。看看像Bootstrap这样的库。 – Abhitalks
感谢您的回复...我希望通过添加一些插件或代码可以快速实现此目的）通过将每个块视为图库图片和使用响应式图库脚本？ – Gabriel
:)生活@gabriel中没有捷径。但是，您可能需要花时间阅读Bootstrap文档以了解它如何帮助您以最小的努力来实现这一目标。不要指望它比这更容易。 – Abhitalks