CSS自适应布局思路

CSS自适应布局可以让网站在不同屏幕尺寸下以最佳的方式呈现。以下是实现自适应布局的基本思路：

1.使用弹性布局

弹性布局是保持页面的整体布局并在屏幕尺寸发生变化时自动缩放的一种方式。在CSS中设置display: flex;属性可以将一个元素变成一个弹性容器。

.container{
  display: flex;
}

2.设置max-width

在CSS中设置max-width属性可以限制内容的宽度，使得在大屏幕上适当缩小，而在小屏幕上自适应。

.container{
  max-width: 1200px;
  width: 100%;
}

3.使用CSS媒体查询

媒体查询将允许在不同的屏幕尺寸下使用不同的CSS样式。通过使用@media元素，可以设置不同的CSS规则。

@media (min-width: 1200px) {
  .container {
    max-width: 1200px;
  }
}
@media (max-width: 768px) {
  .container {
    max-width: 768px;
  }
}

示例说明

示例一：响应式导航栏

以下是一个响应式导航栏，当屏幕宽度小于800像素时，导航栏变成一个下拉菜单

<nav class="navbar">
  <a href="#" class="logo">Logo</a>
  <input type="checkbox" id="menu-btn">
  <label for="menu-btn" class="menu-icon"></label>
  <ul class="menu">
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>

/* 导航栏样式 */
.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  background-color: #333;
  color: #fff;
}

/* 下拉菜单样式 */
.menu {
  display: none;
  position: absolute;
  top: 60px;
  right: 0;
  padding: 10px;
  background-color: #333;
  list-style: none;
}

/* 复选框按钮样式 */
input[type="checkbox"] {
  display: none;
}

.menu-icon {
  display: none;
}

@media (max-width: 800px) {
  /* 下拉菜单出现 */
  input[type="checkbox"]:checked ~ .menu {
    display: block;
  }

  /* 显示菜单图标 */
  .menu-icon {
    display: block;
    cursor: pointer;
    width: 30px;
    height: 30px;
    background-image: url("menu-icon.png");
    background-size: cover;
  }
}

示例二：响应式图片

以下是一个示例图片，当屏幕宽度小于600像素时，图片将自适应屏幕宽度

<div class="image-container">
  <img src="picture.jpg" alt="Picture">
</div>

.image-container {
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
}

.image-container img {
  width: 100%;
  height: auto;
}

@media (max-width: 600px) {
  .image-container img {
    max-width: 100%;
  }
}