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

1. 阐述问题：

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

思路来源

跳转链接

2. 组件样式

.input-z-index {      //搜索框组件  最外面的divz-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;}} */

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

scale实现页面缩放自适应
使用注意事项代码中的所有的宽高是指正常视图(也指设计图)下的宽高,我的项目是大屏,所以正常视图下是 1920 * 1080,普通 PC 项目,那应该是 1920 * 937 由于缩放是对 #app ...
移动端自适应布局和响应式页面兼容移动端布局
上篇博客讲到了移动端的常用布局模式之一:Flex布局,这篇博客咱们来了解一下移动端的另外两种布局--移动端自适应布局和响应式页面兼容移动端布局. 目录一.移动端自适应布局 1.rem 什么是rem ...
移动端h5框架自适应_Html5移动端页面自适应百分比布局
按百分比布局,精度肯定不会有rem精确 Document * { padding: 0; margin: 0; } .one { width: 20%; height: 100px; float: l ...
移动端开发注意事项、需要注意的问题、特殊属性、精灵图、座固定有自适应的布局
一.移动端开发注意事项网址:移动端开发注意事项二.关于meta (一).常用的公共meta属性 1.viewport <meta name="viewport"conte ...
前端开发工程师 - 04.页面架构 - CSS Reset 布局解决方案响应式页面优化规范与模块化...
04.页面架构第1章--CSS Reset 第2章--布局解决方案居中布局课堂交流区水平列表的底部对齐如图所示,一个水平排列的列表,每项高度都未知,但要求底部对齐,有哪些方法可以解决呢? & ...
转: 自适应css布局—-流动布局新时代(译文)
流动网页设计有很多好处,但也只有在正确使用的时候.合适的技巧会使页面在大屏幕.小屏幕抑.PDA小屏幕上都能得到良好的呈现.但是,糟糕的代码结构,对于流动布局来说将是灾难性的.因此,我们需要针对大多数流 ...
解决浏览器页面缩放前端页面大小自适应改变的问题
平时写前端页面的时候,css大小都在用px,现在可以采用rem的方法解决这个问题首先需要明白px与rem的区别: px是固定的像素,一旦设置了就无法适应页面的大小而进行改变. em和rem是相对长度 ...
html流动布局,自适应css布局——流动布局新时代
流动网页设计有很多好处,但也只有在正确使用的时候.合适的技巧会使页面在大屏幕.小屏幕抑.PDA小屏幕上都能得到良好的呈现.但是,糟糕的代码结构,对于流动布局来说将是灾难性的.因此,我们需要针对大多数流 ...
php架在底部页面,页脚始终保持在页面底部的网页布局方法
页脚始终保持在页面底部的网页布局方法导语:用CSS创建一个高度自适应布局,如何保证页脚(footer)在内容不超过一屏的情况下始终保持在布局最下方是一个比较头疼的事.下面就由百分网小编为大家介绍一下 ...

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

1. 阐述问题：

思路来源

2. 组件样式

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

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

最新文章

热门文章

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

1. 阐述问题 ：

思路来源

2. 组件样式

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

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

最新文章

热门文章

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

1. 阐述问题：

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

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