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根據視口寬度減少負邊距

回答

相關問題