或者
问答详情页顶部banner图
您的位置:首页 >开发 > 前端开发 > 响应布局 > css响应式布局动态效果求解

css响应式布局动态效果求解

提问者:云客网官方问答  |   分类:响应布局  |   浏览161次  |   悬赏分: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%

    2017-06-08 10:40:26
    评论0  |   0
  • D***4

    主要原理是:通过js判断当前窗口宽度,当达到预设值时触发一个移动第三个框体的函数。实际上,作者在一开始就已经做好收缩后的页面了,计算出最合适的top值,而left则一般都...

    2017-03-06 11:05:46
    评论0  |   0
问答详情中间banner