响应大小和缩放

时间:2014-04-24 14:49:53

标签: html css

我现在正在创建一个登陆页面,一个关键功能是必须是响应式功能。我对响应式网页设计有一点经验,但我现在卡住了。

最大宽度必须为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像素?

背景图片也应该按照屏幕的最大宽度进行缩放。所以我认为我必须使用背景大小:覆盖它,对吧?

谢谢!

1 个答案:

答案 0 :(得分:1)

使用CSS媒体查询在达到特定屏幕宽度时触发样式。 http://css-tricks.com/css-media-queries/