[分享]css3响应式布局代码

CSS3响应式布局是一种常用的网页设计技术，它可以让网页在不同的浏览器及设备上表现出适应性，使其在PC、手机、平板等设备上都可以达到较好的布局效果。下面我们来简单介绍一些CSS3响应式布局的代码：/使...

CSS3响应式布局是一种常用的网页设计技术，它可以让网页在不同的浏览器及设备上表现出适应性，使其在PC、手机、平板等设备上都可以达到较好的布局效果。

下面我们来简单介绍一些CSS3响应式布局的代码：

/*使用media query来实现响应式布局*/
@media only screen and (max-width: 600px) {
  /*当浏览器宽度小于等于600px时应用以下样式*/
  body {
    font-size: 16px; 
  }
  .header {
    width: 100%; 
  }
}

/*使用flexbox布局实现响应式布局*/
.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.item {
  width: calc(33.3% - 10px);
  margin-bottom: 20px;
}
  
/*使用grid布局实现响应式布局*/
.container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  grid-gap: 20px;
}
.item {
  width: 100%;
} 

以上就是一些常用的CSS3响应式布局的代码，可以根据实际需求进行选择使用，希望能够对大家有所帮助。