Question

我有这个代码，它允许我将各种内容放入固定放置的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>

Answer 1

使用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;
  }
}

通过这种方式，您可以实现响应式可伸缩布局。使用每个像素作为转换百分比..

为了获得不错的效果，您可以使用Bootstrap css ..

使CSS DIV阻止响应

1 个答案: