[分享]css3实现响应式布局

随着移动端设备的普及，我们需要在网站上创建一个响应式布局。CSS3可以帮助我们实现这一功能。/ 响应式布局的样式 / media screen and (maxwidth: 768px) { / 当屏...

随着移动端设备的普及，我们需要在网站上创建一个响应式布局。CSS3可以帮助我们实现这一功能。

/* 响应式布局的样式 */
@media screen and (max-width: 768px) {
  /* 当屏幕宽度小于768px时应用以下样式 */
  header {
    display: block;
    text-align: center;
  }
  nav {
    display: block;
    text-align: center;
    width: 100%;
  }
  ul {
    margin: 0;
    padding: 0;
  }
  li {
    display: inline-block;
    margin-right: 20px;
  }
  article {
    display: block;
    width: 100%;
  }
  article img {
    max-width: 100%;
    height: auto;
  }
}

/* 当屏幕宽度大于768px时应用以下样式 */
header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
nav {
  display: flex;
  justify-content: flex-end;
}
ul {
  margin: 0;
  padding: 0;
  display: flex;
}
li {
  margin-left: 20px;
}
article img {
  max-width: 100%;
  height: auto;
} 

上面的代码展示了如何使用@media查询来创建响应式布局。当屏幕宽度小于768px时，我们将元素的display设置为block，使它们按列排列，并使它们居中对齐。当屏幕宽度大于768px时，我们使用flexbox布局，使元素按行排列，并将它们放置在页面的左侧和右侧。我们还为图片设置了一个最大宽度，并使其最大化地适应其容器的尺寸。