缩放比例 页面缩放 自适应布局（布局不变）vue

1. 阐述问题 ：

搜索框组件（日期选择器，input ，搜索按钮）在100% 125% 150%这三个比例下，日期选择器的大小不变。（日期选择器用的element-ui的 el-data-picker,搜索框组件布局用的栅格）

思路来源

跳转链接

2. 组件样式

.input-z-index {      //搜索框组件  最外面的div
    z-index: 9999;
    min-width: 780px;      //原本写的是 width：780px;
    margin-right: auto;   //没有好像也可以
    margin-left: auto;    //没有好像也可以
  }

3. 页面引用组件样式 （原本问题：定位不准，定位用的px,改为em）

  .search-input {
    position: absolute;
    right: 1em;
  }

//冗余代码   与本问题无关
/* @media only screen and (min-height:600px) {
      .el-range-editor.el-input__inner{
        width: 200px;
      }
    }
    @media only screen and (min-height:740px) {
      .el-range-editor.el-input__inner{
        width: 362px;
      }
    }
    /* 1366 */
  /* @media only screen and (min-height:754px) {
   .el-range-editor.el-input__inner{
        width: 235px;
        margin-left: 115px;
      }
  } */
  /* 1400*/
  /* @media only screen and (min-height:900px) {
    .el-range-editor.el-input__inner{
        width: 235px;
      }
  } */
  /* 默认分辨率  1918*976 */
  /* @media only screen and (min-height:969px) {
    .el-range-editor.el-input__inner{
        width: 362px;
      }
  } */
  /* 1920  影响了正常分辨率*/
  /* @media only screen and (min-height:1080px) {
    .el-range-editor.el-input__inner{
        width: 362px;
      }
  } */