欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

缩放比例 页面缩放 自适应布局(布局不变)vue

程序员文章站 2022-07-14 22:52:01
...

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;
      }
  } */ 
相关标签: 自适应

上一篇: CSS——浮动

下一篇: jQ事件