CSS根据视口宽度减少负边距

我们提供了一幅1500px宽的图片，是一个网站的样图。CSS根据视口宽度减少负边距

网站设计是一个固定宽度的设计，其中设计占用图像的中间990px。因此，图像任意一侧的255像素都会突出显示网站将如何扩展到更大的视口（即，它不会从一些边缘元素扩展到无限远处）。

我想要做的就是模拟这个图像（尽可能远）。所以如果视口是1500px，图像将从0,0开始。

如果视口为990像素或更少，图像将从0,255像素开始。

之间的任何东西都会缩放。所以我想根据视口的宽度将负边距从-255缩放到0。

像的

margin: 0 -10% 0 0;

此相反的一种变向相反的方向，以我在想什么 - 视口变宽，图像迁移到左边，而不是右边。

来源

2013-02-20 Paul

在你的样式表，你可以尝试使用一些敏感的设计技术，..

@media screen and (max-width:1500px){ 
    #yourContainer{margin-left:0;background-color:#afa;} 

} 

@media screen and (max-width:990px){ 
    #yourContainer{margin-left:255px;background-color:#aaf;} 

}

背景颜色添加只测试;）此的jsfiddle说明了这一点，只是调整浏览器窗口或小提琴列宽 - http://jsfiddle.net/vs6uz/1/

来源

2013-02-20 06:49:22 lukeocom

是的，我可以做一系列的跳跃，就像小提琴。我希望有更简单的事情，一个班轮！ – Paul 2013-02-20 09:48:45

CSS根据视口宽度减少负边距

回答

相关问题