html写响应式布局网站

要写一个响应式布局的网站，需要按照以下步骤进行：

1. 使用HTML5的语义化标签，如<header>、<nav>、<main>、<section>、<aside>、<footer>等，来构建页面结构。

2. 使用CSS3的媒体查询，根据设备的屏幕大小和方向，来设置不同的样式。例如：

/* 当屏幕宽度小于768像素时，设置样式 */
@media screen and (max-width: 768px) {
  /* 设置导航栏垂直排列 */
  nav {
    flex-direction: column;
  }
  /* 隐藏侧边栏 */
  aside {
    display: none;
  }
}

/* 当屏幕宽度大于768像素时，设置样式 */
@media screen and (min-width: 768px) {
  /* 设置导航栏水平排列 */
  nav {
    flex-direction: row;
  }
  /* 显示侧边栏 */
  aside {
    display: block;
  }
}

3. 使用CSS3的弹性布局（Flexbox）来实现页面的自适应。例如：

/* 设置容器为弹性布局 */
.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

/* 设置子元素为弹性项 */
.item {
  flex-basis: calc(33.33% - 20px);
  margin-bottom: 20px;
}

4. 使用CSS3的网格布局（Grid）来实现页面的自适应。例如：

/* 设置容器为网格布局 */
.container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  grid-gap: 20px;
}

/* 设置子元素为网格项 */
.item {
  grid-column: span 1;
  grid-row: span 1;
}

通过以上步骤，就可以实现一个响应式布局的网站。