流體佈局和css精靈

Question

我用一個css精靈來顯示固定寬度設計的背景。我改變爲流體佈局，但由於背景位置，當瀏覽器調整大小時，背景圖像變得不可思議。

是否有可能使用具有流體網格背景的css精靈，它在哪裏調整佈局的大小？

我需要佈局與其他最新的瀏覽器

Answer 1

@media與IE 7和IE 8兼容，可能會爲你工作。不知道關於ie7 & 8雖然。

Answer 2

添加到什麼@brianMaltzan寫@media您可以使用不同分辨率的羣體有不同的樣式表

<link rel='stylesheet' media='(max-width: 700px)' href='css/small.css' /> 
<link rel='stylesheet' media='(min-width: 701px) and (max-width: 1024px)' href='css/medium.css' /> 
<link rel='stylesheet' media='(min-width: 1025px)' href='css/large.css' /> 

或CSS代碼塊頁面的風格：

@media (max-width: 860px) { 
    body { 
     width: 600px; 
    } 
} 
@media (min-width: 861px) and (max-width: 1024px) { 
    body { 
     width: 800px; 
    } 
} 
@media (min-width: 1025px) { 
    body { 
     width: 1000px; 
    } 
} 

我建議使用幾個固定的大小，這將隨每個樣式表而改變，而不是百分比（如果您正在使用它們）。你能否向我們展示一個實時的精靈示例，以便我們看到這個問題？

Answer 3

不，這是不可能的。推薦的解決方案是在內聯圖像中使用精靈貼圖，並在CSS中設置該元素的高度和寬度。 Here's a link解釋如何做到這一點。這可以讓您的圖像與佈局調整大小。

Answer 4

我還沒有試過這個，但有人在用CSS Clip做這個。

http://bowdenweb.com/wp/2011/08/making-responsive-accessible-high-dpi-css-sprites.html

http://chiefalchemist.com/responsive-css-sprites-proof-of-concept-v0-1-0/

Answer 5

如果找你確定使用一些JS，這是可能的，這樣的片段。 我使用jquery，但你可以在純js中輕鬆轉換它。

我縮放sprit寬度和它的父寬度之間的比率計算精靈。我爲它設置了一些負邊距，因爲使用CSS變換屬性縮放div會改變方面而不是計算大小。

var $sprits = $('.sprit'); 
 
$sprits.each(function() { 
 
    
 
    $(this).data('originalWidth', $(this).width()); 
 
    $(this).data('originalHeight', $(this).height()); 
 
    $(this).data('originalParentHeight', $(this).parent().height()); 
 
}) 
 

 
function setSpritsScale() { 
 
    
 
    $sprits.each(function() { 
 
    
 
    ratio = $(this).parent().width()/$(this).data('originalWidth'); 
 
    marginWidth = $(this).data('originalWidth') - $(this).parent().width(); 
 
    marginHeight = $(this).data('originalHeight') - $(this).data('originalParentHeight') * ratio; 
 
    $(this).css({ 
 
     'transform': 'scale(' + ratio + ')', 
 
     'margin': (-marginHeight/2) + 'px ' + (-marginWidth/2) + "px" 
 
    }); 
 

 
    }) 
 
} 
 

 
$(window).resize(setSpritsScale); 
 

 
setSpritsScale();

.columns { 
 
    float: left; 
 
    width: 20%; 
 
} 
 
.sprit { 
 
    display: inline-block; 
 
    background-image: url('http://changlee.com.br/cascavel/wp-content/uploads/2013/10/sprite2l-500x500.jpg'); 
 
    background-repeat: no-repeat; 
 
    min-width: 75px; 
 
    min-height: 75px; 
 
    border: 1px solid black; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div class="columns"> 
 
    <div class="sprit"></div> 
 
</div> 
 

 
<div class="columns"> 
 
    <div class="sprit"></div> 
 
</div> 
 
<div class="columns"> 
 
    <div class="sprit"></div> 
 
</div> 
 
<div class="columns"> 
 
    <div class="sprit"></div> 
 
</div> 
 
<div class="columns"> 
 
    <div class="sprit"></div> 
 
</div>