rem适配的两种方案?

方案一:rem + 媒体查询 + less技术

• 引入normalize.css

• 设置共同common.less

  • common.less里面用到了less语法
  • common.less里面用到了媒体查询

方案二:rem + flexible.js

• 引入normalize.css

• 引入flexble.js

• 需要动态改变宽度的地方使用rem作为单位

  • 可以自己算
  • 可以通过cssrem这个vscode插件实现px转rem
  • 可以通过postcss-px2rem

1. 基于媒体查询的rem适配方案：这种方案是根据不同的屏幕宽度使用不同的根字体大小（html元素的font-size）来实现适配。首先，通过媒体查询获取屏幕宽度，然后根据屏幕宽度计算出对应的根字体大小，并将其应用到html元素上。接下来，使用rem作为单位来定义页面中的元素大小，这样元素的大小会根据根字体大小的变化而自动调整，从而实现适配不同屏幕宽度的效果。

2. 动态计算rem适配方案：这种方案是通过JavaScript动态计算根字体大小，并将其应用到html元素上。首先，获取屏幕宽度，然后根据设计稿的宽度和设定的基准字体大小（一般为100px）计算出根字体大小，最后将其应用到html元素上。同时，在CSS样式中使用rem作为单位来定义元素的大小，这样元素的大小会根据根字体大小的变化而自动调整，实现适配不同屏幕宽度的效果。这种方案一般需要在页面加载时进行计算和设置。