自适应与响应式！！

自适应布局（Adaptive Layout）和响应式布局（Responsive Layout）是两种不同的设计方法，用于创建在不同设备上都能良好显示的网页或应用

自适应布局

自适应布局是一种网页设计技术，旨在创建能够适应不同设备屏幕尺寸的网页。以下是实现自适应布局的几个关键点：

使用百分比或视口单位

百分比：元素的宽度可以设置为父容器宽度的百分比，这样可以确保元素宽度随父容器宽度的变化而变化。
视口单位：如vw（视口宽度的百分比）和vh（视口高度的百分比），这些单位允许元素的大小相对于视口大小进行缩放。

.container {
  width: 80%; /* 宽度为父容器宽度的80% */
  padding: 5vw; /* 内边距为视口宽度的5% */
}

使用媒体查询

媒体查询是CSS3中的一个功能，允许你根据不同的屏幕尺寸、分辨率、设备类型等条件应用不同的CSS规则。通过媒体查询，你可以为不同的屏幕尺寸设置不同的样式。

/* 当屏幕宽度小于600px时 */
@media (max-width: 600px) {
  .header {
    font-size: 14px;
  }
}

/* 当屏幕宽度在600px到1024px之间时 */
@media (min-width: 601px) and (max-width: 1024px) {
  .header {
    font-size: 16px;
  }
}

/* 当屏幕宽度大于1024px时 */
@media (min-width: 1025px) {
  .header {
    font-size: 18px;
  }
}

使用流式布局

流式布局是一种基于相对单位的布局方式，元素的宽度设置为相对单位，如百分比或视口单位，使其根据父容器的宽度自动调整。这种布局方式可以使页面元素在屏幕尺寸变化时保持比例和布局结构。

.main-content {
  width: 70%; /* 宽度为父容器宽度的70% */
  float: left;
}

.sidebar {
  width: 30%; /* 宽度为父容器宽度的30% */
  float: right;
}

响应式布局

响应式布局是一种网页设计方法，它旨在确保网页内容在不同尺寸和分辨率的设备上都能提供良好的用户体验。响应式布局的实现通常涉及以下几个关键技术和策略：

弹性布局（Flexbox）和栅格系统（Grid）

Flexbox：CSS Flexbox布局提供了一种更加灵活的方式来对容器内的项目进行排列、对齐和分配空间，即使它们的大小未知或动态变化。Flexbox布局易于适应不同屏幕尺寸，并且可以轻松地实现复杂的布局结构。

.container {
  display: flex;
  flex-direction: row; /* 主轴为行 */
  justify-content: space-between; /* 项目均匀分布 */
  align-items: center; /* 项目在交叉轴上居中对齐 */
  flex-wrap: wrap; /* 如果空间不足，项目将换行 */
}

.item {
  flex: 1; /* 项目将等分剩余空间 */
}

Grid：CSS Grid布局是一个二维的布局系统，它允许你通过行和列来定义布局。Grid布局提供了更多的布局控制和灵活性，使得创建复杂的网页布局变得更加容易。

.container {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr; /* 三列，第一个和第三个列宽为1份，第二个列宽为2份 */
  grid-template-rows: auto 1fr auto; /* 三行，第一行和第三行高度自适应，第二行高度为1份 */
  grid-gap: 10px; /* 行与列之间的间隙为10px */
}

.item {
  grid-column-start: 2; /* 从第二列开始 */
  grid-column-end: 3; /* 到第三列结束 */
  grid-row-start: 2; /* 从第二行开始 */
  grid-row-end: 3; /* 到第三行结束 */
}

媒体查询（@media）

媒体查询是CSS3中的一个功能，允许你根据不同的屏幕尺寸、分辨率、设备类型等条件应用不同的CSS规则。通过媒体查询，你可以为不同的屏幕尺寸设置不同的样式规则，从而实现响应式设计。

  .column {
    flex: 1 1 300px; /* 基础宽度为300px，可伸缩，可填充 */
    margin: 10px;
    padding: 20px;
    background-color: #f4f4f4;
  }

  /* 媒体查询 */
  @media (max-width: 768px) {
    .column {
      flex: 1 1 100%; /* 在小屏幕上，每个列都占满宽度 */
    }
  }

  /* 适当的资源加载 */
  img {
    max-width: 100%;
    height: auto;
  }

  @media (min-width: 600px) {
    /* 在屏幕宽度大于600px时，加载高分辨率的图片 */
    img {
      src: url('high-res-image.jpg');
    }
  }

  @media (max-width: 599px) {
    /* 在屏幕宽度小于600px时，加载低分辨率的图片 */
    img {
      src: url('low-res-image.jpg');
    }
  }

适当的资源加载

使用图片、字体和媒体查询来根据屏幕尺寸加载适当大小的资源。例如，可以使用srcset属性为不同的屏幕尺寸提供不同分辨率的图片，或者使用font-display属性来控制字体的加载行为。

<img src="default.jpg" srcset="small.jpg 500w, medium.jpg 1000w, large.jpg 1500w" alt="Sample Image">

@font-face {
  font-family: 'MyFont';
  src: url('myfont.woff2') format('woff2');
  font-display: swap; /* 在字体加载时显示备用字体 */
}

自适应和响应式的异同

前面介绍完自适应和响应式后我们发现，他两都可以使用媒体查询，都是为了提升用户体验而创建适应不同设备屏幕尺寸的网页，那到底他们有什么区别呢？？？

相同点

媒体查询：两者都使用媒体查询来根据不同的屏幕尺寸和特性应用不同的CSS规则。
灵活性：两者都旨在创建能够适应不同设备屏幕尺寸的网页。

不同点

设计理念：
- 自适应布局：通常基于固定的断点来定义多个布局。每个布局针对特定的屏幕尺寸进行优化，当屏幕尺寸达到某个断点时，网页会切换到新的布局。
- 响应式布局：使用相对单位和媒体查询来创建一个能够根据屏幕尺寸动态调整的布局。这种布局可以适应任何屏幕尺寸，而不需要为每个尺寸创建单独的布局。
实现方式：
- 自适应布局：可能需要创建多个布局，并使用媒体查询来切换不同的布局。
- 响应式布局：通常使用相对单位和媒体查询来创建一个灵活的布局，使其能够适应任何屏幕尺寸。
优缺点：
- 自适应布局：优点是能够针对特定设备优化布局，缺点是需要为不同的设备创建和维护多个布局。
- 响应式布局：优点是只需创建一个布局，能够适应所有屏幕尺寸，缺点是可能会牺牲一些特定尺寸下的最佳用户体验。
总结

自适应布局和响应式布局都可以使用媒体查询来创建响应式网页，但它们的设计理念和应用方式有所不同。选择哪种方法取决于具体的需求和项目目标。如果需要为特定的设备提供最佳的用户体验，并且愿意为每个设备创建和维护单独的布局，那么自适应布局可能是更好的选择。如果需要创建一个能够适应任何屏幕尺寸的布局，并且希望减少开发工作量，那么响应式布局可能是更合适的选择。

标签：width,布局,适应,响应,宽度,尺寸,屏幕
From： https://blog.csdn.net/m0_74316302/article/details/143709198