在项目中是如何适配的?#

一 自适应和响应式的概念#

• 自适应:根据不同的设备屏幕大小来自动调整尺寸
• 响应式:会随着屏幕的实时变动而自动调整

二 常见的适配方案#

2.1 响应式设计#

• 通过 css 媒体查询来根据设备的特征应用不同的样式
• 通过设置百分比宽度/最大宽度或相对单位来确保元素相对于其容器的大小进行自适应

2.2 flex布局和网格布局#

• 使用弹性布局和网格布局可以更方便的创建灵活的布局,是页面元素能够根据屏幕大小自动调整位置

2.3 图片和多配体适配#

• 使用 max-width:100%; 确保图片和多媒体在小屏幕上不会溢出屏幕
• 使用 picture 元素和 srcset 元素属性提供不同尺寸的图片

2.4 交互友好#

• 使用合适的尺寸和间距,确保链接/按钮等可点击的元素在屏幕上易于点击

2.5 rem+font-size#

• rem+动态的 font-size,rem 是相对于 HTML 元素的 font-size 来设置的
  • 通过媒体查询来设置不同尺寸的屏幕 HTML 的 font-size 尺寸
  • JS 监听页面 clientWidth 的变化,重新设置 font-size 到 HTML 上

2.6 vw 和 vh#

• 比如 375 的屏幕:1 vw 就是 3.75 px,100 px 就是 100/3.75=26.667vw

三 总结#

一般在开发项目中,这几种适配方式都是组合使用的,这就是我对适配的理解