rem适配与vw适配

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%。
vw（viewport width）适配是一种响应式设计的布局方法，它是基于视口（viewport）的宽度来定义元素的尺寸。在移动设备日益普及的今天，vw单位能够帮助开发者创建出适应不同屏幕尺寸的布局。

vw适配的原理

1. 视口宽度：vw单位是相对于视口宽度的百分比。100vw等于视口宽度的100%，也就是说，如果屏幕宽度是320px，那么1vw就等于3.2px。
2. 响应式：使用vw作为长度单位，可以让元素的尺寸随着视口尺寸的变化而变化，从而实现响应式的布局。

计算方法

要使用vw进行适配，通常需要以下几个步骤：

1. 确定设计稿尺寸：假设设计稿是基于某一特定宽度的，比如750px。
2. 计算比例因子：将设计稿的宽度除以100，得到每个vw单位代表的px值。对于750px的设计稿，比例因子为7.5（750px / 100 = 7.5）。
3. 转换尺寸：将设计稿上的px尺寸除以比例因子，得到对应的vw尺寸。
   示例：
   设计稿中的一个元素宽度为300px，那么转换成vw单位就是：
   [ \frac{300\text{px}}{7.5} = 40\text{vw} ]

实际应用

在实际开发中，可以使用以下方法来应用vw适配：

1. 手动转换：根据上述计算方法，手动将设计稿中的px尺寸转换为vw单位。
2. 使用预处理器：使用Sass、Less等CSS预处理器，通过编写函数来自动完成转换。
3. 使用PostCSS插件：例如，postcss-px-to-viewport插件，可以在构建过程中自动将px尺寸转换为vw单位。

注意事项

• 字体大小：对于字体大小，一般不建议使用vw单位，因为字体大小应该基于阅读舒适度而非屏幕尺寸。
• 兼容性：vw单位在大多数现代浏览器上都有很好的支持，但仍然需要考虑老旧浏览器的兼容性问题。
• 精度问题：由于vw单位是基于视口宽度计算的，所以在小数点处理上可能会有精度问题。
  通过这些方法，开发者可以更轻松地实现跨设备的一致性和响应性布局。

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

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