Question

我试图理解响应式设计与绝对单位的关系。但是现在我认为绝对单位并不是绝对的。从下面的GIF可以看出，即使所有元素都以像素为单位，所有元素都会按比例缩小。

Elements shrinks proportionally despite being sized in pixels

如果有帮助，我也会附上以下代码。

.container{
  width:700px;
  height: 600px;
  margin: auto;
  background-color: lightgoldenrodyellow;
}

.wrap{
  width:350px;
  margin: auto;
  height: 400px;
  background-color: lightcoral;
}

button{
  width:250px;
  height: 200px;
  font-size: 30px;
  background-color: lightskyblue;
  margin:100px 0 0 50px;
}

<!DOCTYPE html>
<html>
<head>
<title>Layout</title>


</head>
<body>

  <div class="container">
    <div class="wrap">
      <button>Shrinking Button</button>
    </div>
  </div>
   
</body>
</html>

最后，我注意到元素在容器元素的左右边距达到130之后才开始收缩。

为什么css中的元素按比例缩小，尽管以绝对单位大小

0 个答案: