如何使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響應

回答

相關問題