Question

我使用css精灵在固定宽度设计上显示背景。我改为流体布局，但由于背景位置，当浏览器调整大小时背景图像变得不稳定。

是否可以使用具有流畅网格背景的css sprite，它在哪里调整布局？

我需要与其他最新浏览器兼容ie 7和8的布局

Answer 1

添加@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 2

我没试过这个，但是有人用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 3

@media可能适合您。不确定ie7＆amp; 8虽然。

Answer 4

不，那是不可能的。建议的解决方案是在内嵌图像中使用精灵图，并在CSS中设置该元素的高度和宽度。 Here's a link解释如何执行此操作。这允许您的图像随布局调整大小。

Answer 5

如果您可以使用某些JS，则可能就像这个片段一样。我使用jquery但你可以在纯js中轻松转换它。

我使用sprit宽度与其父宽度之间的比率计算来缩放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>

流体布局和css精灵

5 个答案: