二、前端适配该怎么做？
说白了，响应式的核心就是：
用“相对单位”代替 “固定单位”，让页面根据设备自适应变化。
用“相对单位”代替 “固定单位”，让页面根据设备自适应变化。
CSS 给我们准备了很多单位来解决这个问题，比如：
rem、em：相对于字体大小的单位
vw、vh、vmin、vmax：相对于视口尺寸的单位
%：相对于父元素的单位
rem、em：相对于字体大小的单位
vw、vh、vmin、vmax：相对于视口尺寸的单位
%：相对于父元素的单位
下面咱们一个个来看：
1. rem：相对根元素
推荐用于：字体大小、边距、布局基础尺寸
推荐用于：字体大小、边距、布局基础尺寸
1rem= html 根元素的 font-size
通常情况下，我们可以通过 JS 动态设置 html 的 font-size，实现整体适配
代码示例如下：
exportconstuseREM = =>{
constMAX_FONT_SIZE = 40;
document.addEventListener("DOMContentLoaded", => {
consthtml = document.querySelector("html");
letfontSize = window.innerWidth / 10;
fontSize = Math.min(fontSize, MAX_FONT_SIZE);
html.style.fontSize = fontSize + "px";
});
};
这段代码的意思就是：
页面宽度除以 10，就是我们整个页面的 1rem。
页面宽度除以 10，就是我们整个页面的 1rem。
这样一来，设计稿是 375px 宽，那就等于 1rem = 37.5px，其他尺寸都可以用 rem 表示，非常方便。
2. vw / vh：相对视口
推荐用于：宽高布局、大背景图、卡片容器、轮播图等
推荐用于：宽高布局、大背景图、卡片容器、轮播图等
1vw= 视口宽度的 1%
1vh= 视口高度的 1%
1vw= 视口宽度的 1%
1vh= 视口高度的 1%
举例：
.banner{
width: 100vw; /* 宽度占满整个视口 */
height: 30vh; /* 高度为视口高度的 30% */
}
除此之外还有：vmin 和 vmax，适用于横竖屏动态变化的场景。其中：
vmin：视口中最小边的 1%
vmax：视口中最大边的 1%
vmin：视口中最小边的 1%
vmax：视口中最大边的 1%
推荐用于：局部布局、子元素对齐、背景图居中等
推荐用于：局部布局、子元素对齐、背景图居中等
这里需要注意 % 和 vw、vh 不同。 %是相对父元素的，如果父元素 没有设置宽度，子元素的 %就没意义，并且嵌套层级多时容易出 复合放大效应。所以，%虽然灵活，但不适合做全局适配方案的主力单位。
常见写法：
.box{
width: 50%;
padding: 10%;
}
.background{
background-position: 50%50%; /* 居中 */
}
三、如何搭配使用？最佳实践来了
那么最后，咱们就看下这些尺寸单位如何搭配进行使用
字体大小建议使用 rem： 通过统一设置 html根元素的 font-size，可以确保全站字体随屏幕宽度自适应
布局中的宽度和高度建议使用 vw和 vh：这两个单位是相对于视口大小的百分比，天然具备响应式特性，并且适配各类设备无需额外计算。
间距和边距同样推荐使用 rem：这样可以确保它们与字体保持一致的缩放比例
背景图位置、元素对齐等局部布局场景中，可以使用 %单位： 它相对于父元素，结合 position属性可以更好的控制元素的对齐与定位。
在需要应对横竖屏切换的场景下，可以使用 vmin或 vmax单位：它们分别代表视口宽度和高度中较小或较大的那个维度，能够帮助我们在屏幕方向变化时仍保持最大视口下的展示效果
字体大小建议使用 rem： 通过统一设置 html根元素的 font-size，可以确保全站字体随屏幕宽度自适应
布局中的宽度和高度建议使用 vw和 vh：这两个单位是相对于视口大小的百分比，天然具备响应式特性，并且适配各类设备无需额外计算。
间距和边距同样推荐使用 rem：这样可以确保它们与字体保持一致的缩放比例
背景图位置、元素对齐等局部布局场景中，可以使用 %单位： 它相对于父元素，结合 position属性可以更好的控制元素的对齐与定位。
在需要应对横竖屏切换的场景下，可以使用 vmin或 vmax单位：它们分别代表视口宽度和高度中较小或较大的那个维度，能够帮助我们在屏幕方向变化时仍保持最大视口下的展示效果返回搜狐，查看更多