以下内容以文字及少量代码形式展示，没有花里胡哨的图解。但细嚼之下，却也足够解决自适应问题。望细细观看。
实现响应式布局需要用到什么：
-
媒体查询
@media screen (min-width: 375px) and (max-width: 600px) { body { font-size: 18px; } } -
flex布局、栅格化布局 屏幕过小时，盒子折行展示。
-
相对单位
- 百分比：子元素的宽高使用百分比时，或者使用top、left时，是相对于父元素的宽高；子元素的padding和margin相对于父元素的宽，子元素的border-radius是相对于自身的宽。
- rem：通过修改根元素的font-size大小，所有元素的大小都是基于根元素的变化。这个时候只要使用媒体监听，去结合font-size的修改，则可做到整体放大。
- vw是相对于视图窗口的宽度的百分之一
-
限制盒模型的最大宽度和最小宽度、最大最小高度
完成一个响应式布局，其实是需要将以上多种方式结合在一起实现的
整体布局：flex布局结合媒体查询
- 监听窗口大小：媒体查询监听窗口大小，当窗口小于768时，使用另一套样式（具体情况根据UI展示）
- 窗口过小时，设置body元素的
min-width，超过指定宽度则滑动，不再缩小。 - flex布局铺开：首先使用flex布局将盒模型铺开，并且限制每个盒模型的最大、最小值，从而确保每个盒模型在不同屏幕下都是按比例放缩
- 限制盒模型最大值：当屏幕过大的情况时，避免盒模型的内容由于过度拉长导致变形
- 限制盒模型最小值：同时，避免盒子过小导致内部盒子的样式紊乱。
当父盒模型的最小值小于内部嵌套的多个盒模型的最小值时
允许盒模型内部的子元素换行呈现，防止子盒模型溢出
内容溢出处理
- 尽量避免使用定高定宽的盒子，否则盒子内部的文字或其他内容在用户调整字体大小后会溢出
- 如果规定单行显示，则规定盒子过小的时候，使用
text-overflow: ellipsis;进行文字省略 - 如果规定文字在固定高度范围内允许折行显示，则规定盒子的最高值，超过该值使用
overflow: hidden配合文字省略，防止内容溢出
带有文字的图片，如何完成自适应？
让UI将文字和图片分开，文字和图片放于同一个盒模型内；盒模型进行放缩时：
- 图片：作为单独的背景，相对于盒模型进行绝对定位（需要根据图片重要元素定位，如果重要元素在左侧，则相对于左侧绝对定位，反之亦然），当盒模型放缩时使用
overflow: hidden，即可裁掉图片多余部分 - 文字：文字则相对于左边或右边定位，包裹文字的盒模型小于指定宽度时，则认为文字换行高度超过图片高度，文字溢出。可以使用以下两个方案：1.进行文字省略 2. 规定盒模型（图片和文字的公共父元素）的
min-width
<style>
.swiper-banner {
position: relative;
height: 108px;
min-width: 100px;
overflow: hidden;
.banner-bg-img {
position: absolute;
top: 0;
right: 0;
user-select: none;
}
.banner-text {
width: 100%;
font-size: 16px;
line-height: 32px;
display: -webkit-box;
-webkit-line-clamp: 3;
overflow: ellipsis; /* 省略溢出的内容 */
}
}
</style>
<body>
<div className="swiper-slide" key={item.cn_image}>
<div class="banner-text">{item.text}</div>
<img
src={item.background}
className={styles['banner-bg-img']}
draggable={false}
/>
</div>
</body>
