放大

Question

当我尝试放大我的HTML页面时，像Div这样的元素会被放错位置，好像它是“试图响应”而不是固定到原来的位置。

为了进一步证明这个问题，这是我的布局的Codepen 。 尝试放大和缩小页面。注意列的位置如何变化。

HTML ：

<main class="wrapper">  <!--Main Content Starts here-->

<div class="column-one">
    <div class="fixed-container-inside-column">
    </div>
  </div>

  <div class="column-two">
  </div>

  <div class="column-three">
    <div class="fixed-container-inside-column">
    </div>
  </div>

  <div class="column-four">
    <div class="fixed-container-inside-column">
    </div>
  </div>

</main> <!--Main Content Ends here-->

CSS ：

.wrapper{
    position: relative;
    overflow: hidden;
    width: 100%;
    margin: 0 auto;
    display: block;
    max-width: 1349px;
    padding-top: 60px;
    padding-bottom: 40px;

    -webkit-box-sizing : border-box;‌​
    -moz-box-sizing : border-box;
    box-sizing : border-box;

    -webkit-transition-duration: all 0.4s ease-in-out;
    -moz-transition-duration: all 0.4s ease-in-out;
    -o-transition-duration: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
  }

  .column-one{
    position: relative;
    display: block;
    float: left;
    width: 230px;
    height: 500px;
    margin-left: 20px;
    background-color: red;
  }

  .column-two{
    position: relative;
    float: left;
    width: 500px;
    height: 100%;
    min-height: 2500px;
    margin-left: 35px;
    background-color: blue ;
  }

  .column-three{
    position: relative;
    float: right;
    width: 240px;
    height: 100%;
    min-height: 500px;
    margin-right: 20px;
    background-color: red;
  }

  .column-four{
    position: relative;
    float: right;
    width: 250px;
    height: 100%;
    min-height: 500px;
    margin-right: 20px;
    background-color: blue ;
  }

  .fixed-container-inside-column{
    position: fixed;
    display: block;
    width: 200px;
    height: 400px;
    margin: 15px;
    background-color: green;
  }

我希望将所有Div列修复到其确切位置，以确保在用户放大时保持完整（完美示例： Facebook < / strong>， Stackoverflow 在放大时不会受到影响

你们可以查看我的Codepen并建议我一个解决方案吗？

Answer 1

改变：

.wrapper {
//width: 100%; to
width: 1349px;
}

或

      .wrapper{
    position: relative;
    overflow: hidden;
    margin: 0 auto;
    display: block;
    max-width: 1349px;
    width: 100%;
    padding-top: 60px;
    padding-bottom: 40px;

    -webkit-box-sizing : border-box;‌​
    -moz-box-sizing : border-box;
    box-sizing : border-box;

    -webkit-transition-duration: all 0.4s ease-in-out;
    -moz-transition-duration: all 0.4s ease-in-out;
    -o-transition-duration: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
  }

  .column-one{
    position: relative;
    display: block;
    float: left;
    width: 18%;
    height: 500px;
    margin-left: 2%;
    background-color: red;
  }

  .column-two{
    position: relative;
    float: left;
    width: 38%;
    height: 100%;
    min-height: 2500px;
    margin-left: 2%;
    background-color: blue ;
  }

  .column-three{
    position: relative;
    float: left;
    width: 18%;
    height: 100%;
    min-height: 500px;
    margin-left: 2%;
    background-color: red;
  }

  .column-four{
    position: relative;
    float: left;
    width: 18%;
    height: 100%;
    min-height: 500px;
    margin-left: 2%;
    background-color: blue ;
  }

  .fixed-container-inside-column{
    position: fixed;
    display: block;
    width: 14%;
    height: 400px;
    margin:2%;
    background-color: green;
  }

http://codepen.io/anon/pen/WQLQpm?editors=010

Answer 2

由于您的列的宽度是使用px作为单位设置的，因此包装器的宽度也应该设置为这样。尝试将包装器的最大宽度更改为min-width，如下所示：

min-width: 1349px;

此外，绿框的位置不应设置为固定。删除.fixed-container-inside-column中的fixed属性。

最后，如果你不希望最后两列适应窗口大小，你也应该将它们的浮点数设置为左：

 .column-three{
  position: relative;
  float: left;
  width: 240px;
  height: 100%;
  min-height: 500px;
  margin-left: 20px;
  background-color: red;
}

.column-four{
  position: relative;
  float: left;
  width: 250px;
  height: 100%;
  min-height: 500px;
  margin-left: 20px;
  background-color: blue ;
}

通过这样做，您的草图在放大和更改浏览器窗口大小时会按预期运行。

Answer 3

css中有以下内容

position: relative;
float: left;

因此，当我们放大时，浏览器会尽量调整其级别以适应屏幕上的框。如果它们不适合，那些不适合的那些会移动到较低的水平。

您可以尝试以px的形式给予包装器固定宽度。 您可以使用px

设置宽度，而不是使用max-width

width：100％表示占用父容器的所有空间，在这种情况下意味着占用浏览器区域的所有宽度。以“px”表示的宽度受到缩放操作的影响，因为现在每个像素由更大的屏幕区域表示。我们想要的是盒子总是有足够的空间，以便它们不会漂浮到较低的水平。

Answer 4

如果不需要缩放，您可以使用

为移动用户禁用缩放

<meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' name='viewport' />

您的帮助链接是how-can-i-disable-zoom-on-a-mobile-web-page