html - 响应式大小和缩放

Question

我目前正在创建一个着陆页，一个关键特性是它必须是响应式的。我对响应式网页设计有一点经验，但我现在被困住了。

最大宽度必须为 1280 像素。所以当它在桌面上时，它必须是 1280px 宽并且与中心对齐。所以缩放 grom 1920x 到 1280px 是可以的。但是当它低于 1280px 时，我想让网站缩放内容。但是由于我已经将 1280px 作为静态宽度，所以我不知道如何让它响应并让它在低于 1280px 时缩放

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

这是我的 body 和容器的一段代码

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: cover ，对吧？

谢谢!

Answer 1

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