缩放比例 页面缩放 自适应布局(布局不变)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;
}
} */