1.rem适配

1.1原理

rem（根em）是基于根元素（即HTML元素）的字体大小的长度单位。当根元素的字体大小发生变化时，所有使用rem作为单位的元素都会相应地调整大小。这意味着，通过改变HTML元素的字体大小，可以同时改变整个页面的布局。

1.2步骤

• 按照设计稿与设备宽度的比例，动态计算html跟标签的font-size大小；(媒体查询)
• css中，设计稿元素的宽，高，相对位置等取值，按照等比例换算为rem单位的值。

1.3.1技术方案一

• less
• 媒体查询
• rem
• 页面元素的rem值=页面元素值/html font-size字体大小
  

1.3.2技术方案二

• flexble.js
• rem
  设计稿常见尺寸宽度
  

2.vw适配

2.1原理

vw（视口宽度）是相对于视口宽度的百分比单位。1vw等于视口宽度的1%，这意味着任何使用vw作为单位的元素都会根据视口宽度的变化而相应地调整大小。

2.2计算

根据设计稿的尺寸，将各个元素的宽高、字体大小等属性转换为vw单位。例如，如果一个按钮在设计稿上是100px宽，那么在CSS中可以设置为width: 10vw;（因为100px/1000px = 10vw，假设设计稿的宽度为1000px）。
由于vw是相对于视口宽度的，因此在不同屏幕尺寸的设备上，该按钮的宽度将自动调整为视口宽度的10%。

3.rem适配与vw适配的优缺点

• rem适配依赖于根元素（HTML元素）的字体大小，通过改变HTML元素的字体大小来调整整个页面的布局。
• vw适配依赖于视口宽度，通过将元素的大小设置为视口宽度的百分比来适应不同屏幕尺寸。
• rem适配通常需要JavaScript来动态调整HTML元素的字体大小，而vw适配则完全通过CSS实现。
• vw适配在计算上更简单，因为它直接基于视口宽度的百分比，而rem适配需要将设计稿的尺寸转换为rem单位，并可能需要JavaScript来动态调整。