[分享]css全屏三列自适应

CSS全屏三列自适应是一个非常常用的网页布局方案。它的实现原理就是利用CSS中的浮动机制和盒模型，在不同宽度和高度的屏幕上，自适应显示三个全屏的元素。 / 设置整个页面高度占满屏幕 / html, b...

CSS全屏三列自适应是一个非常常用的网页布局方案。它的实现原理就是利用CSS中的浮动机制和盒模型，在不同宽度和高度的屏幕上，自适应显示三个全屏的元素。

 /* 设置整个页面高度占满屏幕 */
  html, body {
    height: 100%;
  }
  
  /* 定义三个列的布局 */
  .col-left {
    float: left;
    width: 25%;
    padding: 20px;
    box-sizing: border-box;
  }
  
  .col-center {
    float: left;
    width: 50%;
    padding: 20px;
    box-sizing: border-box;
  }
  
  .col-right {
    float: left;
    width: 25%;
    padding: 20px;
    box-sizing: border-box;
  }
  
  /* 清除浮动 */
  .clearfix:after {
    content: "";
    display: table;
    clear: both;
  }
  
  /* 设置背景颜色、字体 */
  body {
    background-color: #f0f0f0;
    font-family: Arial, sans-serif;
  }
  
  /* 媒体查询，根据屏幕大小调整三列占比 */
  @media (max-width: 1024px) {
    .col-left, .col-right {
      display: none;
    }
    .col-center {
      width: 100%;
    }
  }
  
  @media (max-width: 768px) {
    .col-center {
      width: 80%;
    }
  }
  
  @media (max-width: 480px) {
    .col-center {
      width: 100%;
    }
  } 

通过以上的代码实现，我们便能够在不同尺寸的屏幕上，自适应显示三个全屏的元素。其中通过使用媒体查询，我们可以根据屏幕大小调整三列占比，使得在不同大小的屏幕上，三列都能够完美显示。