液体布局说明

Question

Please see this example。当我们调整视口大小时，font-size内的.main类会增长，但.aside内部不会改变任何内容。有人可以帮我解释一下吗？提前谢谢！

Answer 1

从媒体查询中移动.aside：

@media (min-width: 700px){
  .aside {
    float: left;
    width: 25%;
    margin-left: 5%;
  }
}

并将它们放在这样：

.aside {
   float: left;
   width: 25%;
   margin-left: 5%;
}

@media (min-width: 700px){

}

我认为这是因为你还没有在媒体查询中的任何地方定义它们。你可以用JSFiddle吗？

Answer 2

根本原因：     根据容器宽度（.main＆amp; .aside）应用字体大小。 的修正：     您可以使用vw视口宽度来解决此问题。     的视口：         ％相对于局部宽度容器，vw长度相对于浏览器窗口的整个宽度。

默认分辨率：

    body{
        font-size:1vw;
    }

低分辨率：

    body{
        font-size:4vw;
    }