2014-04-24 100 views
0

我在此刻创建了一个目标网页,其中一个关键功能是必须具有响应能力。我在响应式网页设计方面有一点点经验,但我暂时陷入困境。响应式大小和缩放比例

最大宽度必须是1280像素。所以当它在桌面上时,它的宽度必须是1280px,并与中心对齐。所以缩放格兰杰从1920x到1280px很好。但是,当它低于1280px,我想让网站扩大内容。但是因为我已经把1280px作为一个静态宽度,我不知道如何让它响应,并让它随着它的缩放而降低到1280px以下

我希望我已经解释得足够好了。英语语法很糟糕。

这是一张我的身体和容器是如何

body 
width: 100% 
background: -webkit-linear-gradient(#de0b1d, #8a0712) /* For Safari 5.1 to 6.0 */ 
background: -o-linear-gradient(#de0b1d, #8a0712) /* For Opera 11.1 to 12.0 */ 
background: -moz-linear-gradient(#de0b1d, #8a0712) /* For Firefox 3.6 to 15 */ 
background: linear-gradient(#de0b1d, #8a0712) /* Standard syntax (must be last) */ 
.container 
    padding: 0 
    position: relative 
    width: 1280px 
    height: 100% 
    background-image: url("../img/head-image.png") 
    background-repeat: no-repeat 
    background-position-y: 150px 

我想这是因为它的静态值的代码,但我怎么能做出这样的回应一个拥有1280像素的最大宽度?

背景图像也应该按照屏幕的最大宽度进行缩放。所以我认为我必须使用Background-size:封面,对吧?

谢谢!

+0

通过缩放'网站'你的意思是一切?文本和容器? – LorDex

+0

你需要['max-width'](https://developer.mozilla.org/en-US/docs/Web/CSS/max-width)而不是'width' – rafaelcastrocouto

+0

最大宽度的作品!不缩放everyhing只是把它放在一个不同的方式;-)但我想使容器“流动”,而不是静态的,以便他只改变宽度在一定的宽度。谢谢您的帮助! – Tbmluijten

回答