如何使div响应

如何顺利地更改div的位置，作出响应？如何使div响应

HTML：

<div class="icon"> 
    <i class="fa fa-search toggle_icon"></i> 
</div> 
<div class="sidenav"> 
<center> 
<input id="provider-json" /> 
</center> 
</div>

CSS：

.icon { 
     position: absolute; 
     top: 30%; 
     left: 0; 
     width: 50px; 
     height: 50px; 
     background: #d54042; 
    } 

    .sidenav { 
     position: absolute; 
     top: 30%; 
     left: 52px; 
     height: 50px; 
     width: 200px; 
     border-top-right-radius: 8px; 
     border-bottom-right-radius: 8px; 
     background: #d54042; 
     background: -webkit-linear-gradient(left, #D54042 , #D56769); 
     background: -o-linear-gradient(right, #D54042, #D56769); 
     background: -moz-linear-gradient(right, #D54042, #D56769); 
     background: linear-gradient(to right, #D54042 , #D56769); 
    } 

    #provider-json { 
     margin-top: 6px; 
     padding: 10px 5px; 
     border-radius: 3px; 
     -moz-border-radius: 3px; 
     -webkit-border-radius: 3px; 
     border:solid 1px #ccc; 
     -moz-box-shadow: inset 0 0 4px rgba(0,0,0,0.2); 
     -webkit-box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.2); 
     box-shadow: inner 0 0 4px rgba(0, 0, 0, 0.2); 
     outline-color: #d54042; 
    } 

    .toggle_icon { 
     font-size: 2.5em; 
     color: white; 
     padding: 3px 3px 2px 5px; 
    }

我想verticaly改变.icon和.sidenav的位置。当我使屏幕变小时，应该顺利地到顶部：0;

我尝试这样做：

@media screen and (max-width: 480px) { 
.icon, .sidenav { 
    top: 5%; 
} 
}

但这只能当屏幕480像素宽。

来源

2017-03-09 Greg Ostry

如果您想检查其他尺寸，请更改媒体查询中的“最大宽度” – Swellar

为了给一个smooth transition，利用css transition如下，

@media screen and (max-width: 480px) { 
.icon, .sidenav { 
    top: 0; 
    transition:0.6s ease; /*Add this*/ 
} 
}

此举icons and search bar到top低于480px;的屏幕分辨率，看看这个jsFiddle

来源

2017-03-09 08:26:58 frnt

是的，但它仅在一个点上更改，这是480px。我想永久改变这个位置。所以当我把屏幕做得更小或者更大时，屏幕会变得越来越小。 –

是@GregOstry这是因为您在媒体查询中使用了top：0，这意味着下面的样式应该在屏幕分辨率低于480像素的情况下进行，如果您将其更改为640像素或将另一个媒体查询分配5％以上，则执行该操作过渡如我所用。 – frnt

@GregOstry从上到下相同，置顶：从30％到0到.icon和.sidenav，这使得导航被固定在顶部，然后使用某个分辨率的媒体查询将其降低。 – frnt

根据你的问题“换地方顺利“我给你一些关于relative和absolute的定位。

据参考“Absolute位置是地图上的地点的确切位置，而相对位置是哪里的地方是in relation to other landmarks.估计”这意味着相对需要parent div into consideration但绝对是完全绝对的。现在

<div class="container"> 
     <div class="icon"> 
     <i class="fa fa-search toggle_icon"></i> 
     </div> 
     <div class="sidenav"> 
     <center> 
     <input id="provider-json" /> 
     </center> 
    </div> 
</div>

，通过保持容器relative定位等与absolute优化你的代码。相对应总是包装绝对。同时从w3schools等在线教程中借鉴一些更好的例子。你会被概念清除。

来源

2017-03-09 08:40:22

如何使div响应

回答

相关问题