流体布局和 css 精灵

Posted 2023-03-06

【中文标题】流体布局和 css 精灵

【英文标题】：Fluid layout and css sprites

【发布时间】：2012-02-27 10:14:55

【问题描述】：

我使用 css sprite 在固定宽度设计上显示背景。我正在更改为流畅的布局，但由于背景位置的原因，当浏览器调整大小时，背景图像会变得不稳定。

是否可以使用具有流体网格背景的 css 精灵，并在其中调整布局的大小？

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

【问题讨论】：

图片在什么情况下会变得不稳定？

【参考方案1】：

如果你可以使用一些 JS，这是可能的，比如这个 sn-p。 我使用 jquery，但您可以在纯 js 中轻松转换。

我使用精灵宽度与其父宽度之间的比率计算精灵来缩放精灵。我在其上设置了一些负边距，因为使用 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>

【参考方案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/

【讨论】：

Clip 受 ie7+8 支持，但有另一种语法，根据：reference.sitepoint.com/css/clip#compatibilitysection

【参考方案3】：

不，这是不可能的。推荐的解决方案是在内联图像中使用精灵图，并在 CSS 中设置该元素的高度和宽度。 Here's a link 解释如何做到这一点。这允许您的图像随布局调整大小。

【参考方案4】：

除了@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;
    

我建议使用一些固定大小，这些大小会随着每个样式表而改变，而不是百分比（如果您正在使用它们）。您能否向我们展示一个使用您的流畅布局的精灵的现场示例，以便我们看到问题？

【讨论】：

是的，这就是我的想法，然后在精灵中添加图像的多个版本。当您调整大小超过阈值时，视图将重绘。对于图像显示问题，也许你需要溢出：隐藏？

【参考方案5】：

@media 可能适合您。但不确定 ie7&8。

【讨论】：

你能解释一下当我们有固定大小的精灵 png 时@media 如何提供帮助

即使远程也不回答问题。