网页适配

网页适配 ​

• 自适应：根据不同的设备屏幕大小来自动调整尺寸、大小
• 响应式：会随着屏幕的实时变动而自动调整，是一种更强的自适应

为什么要做移动端适配？ ​

• 移动端设备越来越多，适配移动端设备是必然趋势
• 移动端设备的多样性，导致需要适配的设备越来越多

适配方案 ​

• 百分比布局
• rem 布局
• flex 布局
• vw 布局
• 响应式布局

百分比布局 ​

• 百分比布局是相对于父元素来计算的
• 百分比布局的缺点是，当屏幕大小变化时，需要重新计算百分比，比较麻烦

rem 布局 ​

• rem 布局是相对于根元素 html 的字体大小来计算的
• rem 布局的缺点是，需要手动设置 html 的字体大小，比较麻烦

flex 布局 ​

• flex 布局是利用 flex 布局的特性来实现的
• flex 布局的缺点是，需要手动设置 flex 布局的特性，比较麻烦

vw 布局 ​

• vw 布局是相对于视口（viewport）的宽度来计算的
• vw 布局的缺点是，需要手动设置视口的宽度，比较麻烦

响应式布局 ​

• 响应式布局是利用媒体查询（media query）来实现的
• 响应式布局的缺点是，需要手动设置媒体查询的断点，比较麻烦

适配方案对比 ​

适配方案选择 ​

• 适配方案的选择需要根据具体需求来确定
• 可以根据项目的复杂度和适配设备的多样性来选择合适的适配方案
• 可以根据项目的需求和成本来选择合适的适配方案

适配方案示例 ​

• 百分比布局示例

.box {
  width: 100%;
  height: 100%;
}

• rem 布局示例

html {
  font-size: 10px;
}

.box {
  width: 1rem;
  height: 1rem;
}

• flex 布局示例

.box {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100px;
  height: 100px;
}

• vw 布局示例

html {
  font-size: 10vw;
}

.box {
  width: 10vw;
  height: 10vw;
}

• 响应式布局示例

@media (max-width: 600px) {
  .box {
    width: 100%;
    height: 100%;
  }
}
@media (min-width: 601px) and (max-width: 1200px) {
  .box {
    width: 50%;
    height: 50%;
  }
}
@media (min-width: 1201px) {
  .box {
    width: 25%;
    height: 25%;
  }
}

适配方案总结 ​

• 适配方案的选择需要根据具体需求来确定
• 可以根据项目的复杂度和适配设备的多样性来选择合适的适配方案
• 可以根据项目的需求和成本来选择合适的适配方案
• 适配方案的选择需要根据具体需求来确定
• 可以根据项目的复杂度和适配设备的多样性来选择合适的适配方案
• 可以根据项目的需求和成本来选择合适的适配方案