提問者:云客網官方問答 | 分類:響應布局 | 瀏覽169次 | 懸賞分:0積分 2017-03-06 11:05:46
我做了一個gif來說明,就是當外層div寬度縮小或者變大的時候,能夠像gif里一樣是飄過去的,而不是直接一閃跳過去,我見過好多國外網站用這種效果,請問有誰知道做的有點菜,那...
我要回答
maohaojian
1,方案一:響應式來做,可以根據媒體查詢,設定在不同屏幕寬度下div的高度和寬度,具體的設置看你響應式想怎么顯示 @media only screen and (min-width: 100px) and (max-width: 640px) { div{ width: 100px; height: 100px; } } @media only screen and (min-width: 641px) and (max-width: 789px) { div{ width: 200px; height: 200px; } } 2.方案二:百分比來做,這里需要運用一個小技巧,padding用百分比做單位時是相對于容器的寬度來算的,所以你可以把高度設為0,內容自然溢出,設置個padding-bottom height:0; width:50%; padding-bottom:30% 那么這個div的高寬比就是30%:50%
D***4
主要原理是:通過js判斷當前窗口寬度,當達到預設值時觸發一個移動第三個框體的函數。實際上,作者在一開始就已經做好收縮后的頁面了,計算出最合適的top值,而left則一般都...