前端框架响应式布局推荐方案：打造灵活且高性能的界面设计使用vscode 插件px to rem & rpx & vw (

背景：项目需要适配pc、ipad、移动端，不同的分辨率展示的效果可能会有些修改
方案：使用以下方案的其中一种 + element-ui栅格布局 + 媒体查询

一、使用vscode 插件px to rem & rpx & vw (cssrem)

默认值：16px

使用方法（配合插件使用）：

{
  "rootFontSize": 16,
  "fixedDigits": 3
}

src/assets/all.scss 定制 html在不同分辨率下的根节点 font-size,其他子节点元素使用 rem (根据不同标准进行缩小放大元素)

缺陷：如果在其他编辑器打开，或者插件失效情况下，会很迷茫，需要手动计算优点：不需要动脑直接转换自己想要的单位，懒人推荐

// 默认16px为基准
@function pxTorem($val) {
  @return ($val / 16)+rem
}

.name{
    height: pxTorem(100);
}

src/assets/all.scss 定制 html在不同分辨率下的根节点 font-size,其他子节点元素使用 rem (根据不同标准进行缩小放大元素)

缺陷：每次都需要使用pxTorem 优点：看到函数转换就能理解，不需要担心其他编辑器打开转换问题

src/assets/all.scss 定制 html在不同分辨率下的根节点 font-size,其他子节点元素使用 rem (根据不同标准进行缩小放大元素)

缺陷：依赖于蓝湖计算
优点：不需要动脑直接拷贝蓝湖代码

总结：都有不同的缺陷，但又能呈现出页面效果，推荐使用方案二sass函数转换