做响应式网页,如何让一个div的高和宽保持比例放大 缩小
4个回答
展开全部
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%
@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%
2014-04-05
展开全部
当有一个固定的宽度和高度,当添加到一个容器div + css的:溢出:滚动;滚动条显示出来。
滚动条的美化问题:
下一个百度,即滚动条颜色线已经产生了大量的现成的,在这种选择的颜色,生成的代码被放置在你的容器div的样式表可以(如见于,即滚动条在线生成,即是专有属性,这种影响是无法在其他浏览器)
如果你想确保其他浏览器也是有效的,如果JS模拟搬出只有麻烦,百度:JS模拟滚动条
滚动条的美化问题:
下一个百度,即滚动条颜色线已经产生了大量的现成的,在这种选择的颜色,生成的代码被放置在你的容器div的样式表可以(如见于,即滚动条在线生成,即是专有属性,这种影响是无法在其他浏览器)
如果你想确保其他浏览器也是有效的,如果JS模拟搬出只有麻烦,百度:JS模拟滚动条
已赞过
已踩过<
评论
收起
你对这个回答的评价是?
展开全部
你试一下 吧 宽度和高度 设置成百分比 。然后里面的 元素的 宽度和高度 给个 max-height min-height max-width max-height 属性
已赞过
已踩过<
评论
收起
你对这个回答的评价是?
展开全部
用jquery控制,或者用js控制
给你看看我之前帮别人回答的一个问题,跟你这个问题,有点类似
http://zhidao.baidu.com/question/1109996401643694099.html
如果还有不会的话,欢迎追问
给你看看我之前帮别人回答的一个问题,跟你这个问题,有点类似
http://zhidao.baidu.com/question/1109996401643694099.html
如果还有不会的话,欢迎追问
本回答被提问者采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是?
推荐律师服务:
若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询