大部分框架的组件和模块都是定了宽高，导致无法在需要自适应的项目中直接使用。

我们需要对框架的组件样式进行修改，改为百分比或者合适的宽高。

有两种方式去统一样式。

一 .建立一个css把所有改好的样式放入，在用的时候import。

有个缺点：引入后会把所有的组件样式全部引入，有时候一个组件可能要写好几种样式。总不能全部引入进去。

 

二.通过less，像js的全局变量和全局方法一样，在需要的时候，有目标的去调用变量或者继承单个样式的css。

请先参考前辈的https://www.jianshu.com/p/50f8a751b39e将less设为全局

然后在theme中放入需要继承或者使用的代码和变量，比如

.mui-input(){
    font-size: 2vw;
    width: 95%;
    height: 0;
    border: 1px solid rgba(0,0,0,.3);
    border-radius: 5px;
    background: #fff;
    padding-bottom: 4.5%;
    padding-top: 4.5%;
    padding-left: 3%;
    margin: 3% 0;
}

@color:red;

然后就可以在你的组件中去调用这些了，关键就是用哪个去调用哪个，而不是css一次性把所有样式都弄过来

方式：

变量

<style lang="less" scoped >
  .guide {
    padding-bottom: 30px;
    font-family: PingFangSC-Medium;
    font-size: 2vw;
    color: @color;
    line-height: 16px;
  }
</style>

继承

<style lang="less">
  .container-box{
    .mui-popup {
      .mui-input;
    }
  }
</style>