CSS响应式设计怎么做_响应式网页布局搭建教程

<meta name="viewport" content="width=device-width, initial-scale=1.0">

width=device-width

initial-scale=1.0

/* 默认样式，适用于所有设备 */
body {
  font-size: 16px;
  line-height: 1.5;
}

/* 当屏幕宽度小于 768px 时应用的样式 */
@media (max-width: 768px) {
  body {
    font-size: 14px;
    line-height: 1.4;
  }
  .container {
    width: 100%; /* 让容器占据整个屏幕宽度 */
    padding: 10px;
  }
}

/* 当屏幕宽度大于 768px 且小于 1200px 时应用的样式 */
@media (min-width: 768px) and (max-width: 1200px) {
  body {
    font-size: 15px;
  }
  .container {
    width: 720px; /* 设置容器宽度 */
    margin: 0 auto; /* 居中显示 */
  }
}

/* 当屏幕宽度大于 1200px 时应用的样式 */
@media (min-width: 1200px) {
  body {
    font-size: 16px;
  }
  .container {
    width: 1140px; /* 设置容器宽度 */
    margin: 0 auto; /* 居中显示 */
  }
}

max-width

min-width

<div class="flex-container">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>

.flex-container {
  display: flex;
  justify-content: space-around; /* 项目均匀分布 */
  align-items: center; /* 项目垂直居中 */
}

<div class="grid-container">
  <header>Header</header>
  <nav>Navigation</nav>
  <main>Main Content</main>
  <footer>Footer</footer>
</div>

.grid-container {
  display: grid;
  grid-template-columns: 1fr 3fr; /* 两列，第一列占 1/4，第二列占 3/4 */
  grid-template-rows: auto 1fr auto; /* 三行，高度自动调整 */
  grid-template-areas:
    "header header"
    "nav main"
    "footer footer";
}

header {
  grid-area: header;
}

nav {
  grid-area: nav;
}

main {
  grid-area: main;
}

footer {
  grid-area: footer;
}

img {
  max-width: 100%; /* 图片最大宽度为 100% 父容器 */
  height: auto; /* 高度自动调整 */
}

max-width: 100%

height: auto