css实现页面缩小后布局改变

随着移动设备使用量的增加，对于网站的移动优化已经成为了一项必须的工作。一个好的移动优化方案需要考虑到对于不同的屏幕尺寸和设备类型的适配。在其中，CSS的响应式布局（Responsive Web Design）能够帮助我们实现不同页面缩小后布局的改变。

/*CSS示例*/
/*当屏幕宽度小于等于400px时*/
@media screen and (max-width: 400px) {
  /*第一列宽度设为100%*/
  .column-1 {
    width: 100%;
  }
  /*第二列隐藏*/
  .column-2 {
    display: none;
  }
}
/*当屏幕宽度大于400px时*/
@media screen and (min-width: 401px) {
  /*第一列宽度设为50%*/
  .column-1 {
    width: 50%;
  }
  /*第二列显示*/
  .column-2 {
    display: block;
  }
}

上面的代码是一个简单的响应式布局示例。当屏幕宽度小于等于400px时，我们将第一列的宽度设为100%，第二列则隐藏。而当屏幕宽度大于400px时，第一列的宽度设为50%，第二列则显示。通过这样的方法，我们就能通过CSS实现页面缩小后布局的改变，以适应不同的移动设备。