Question

我在css中有3列彼此对齐。我不明白为什么当我放大浏览器时UI会变得敏感？例如，当我放大浏览器时，<p>helooooo<p/>将仅针对列进行放大。在放大时请注意列如何保持其指定的宽度？为什么会这样？不应该在文本方面扩展列吗？

body, html{
  width:100%;
  height:100%;
  margin: 0px;
  padding:0px;
}

.col1{
  min-width:30%;
  height:100%;
  background-color: gray;
  float:left;
}

.col2{
  min-width:40%;
  height:100%;
  background-color: blue;
  float:left;

}

.col3{
  min-width:30%;
  height:100%;
  background-color: red;
  float:left
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <link rel="stylesheet" href="index.css">
</head>
<body>

  <div class="col1">
    <p>heloooooooooooooo</p>
  </div>
  <div class="col2">
      <p>heloooooooooooooo</p>
  </div>
  <div class="col3">
      <p>heloooooooooooooo</p>
  </div>

</body>
</html>

Answer 1

放大或缩小时，您的示例未显示任何更改。但无论如何，当浏览器缩放时，它实际上改变了视口的宽度..所以如果你有媒体查询，它们就会发挥作用。

Answer 2

这是因为您已将列长度设置为特定值。

min-width:40%;
height:100%;

因此，无论您是否缩放，它都将具有相同的百分比。意思是它不会被缩放。

放大浏览器时出现css问题？

2 个答案: