Question

我正在使用一个使用Spritesheet的旋钮组件。我需要它相对于屏幕尺寸做出响应。

使用CSS Sprites我能够以最大Sprite大小获得所需的行为。当元素按比例缩小时会出现问题。然后我在背景位置上得到一个随机的UP或DOWN单像素偏移，给人一种隆隆的印象。

这里有一个示例代码段来实时查看此行为：

<html>
<head>
    <style type="text/css">
    .container{
        float:left;
        height: 10%;
        width: 20%;
    }
    .sprite{
        background: url('http://imageshack.com/a/img924/8153/hzLcvP.png') ;

        max-width: 100%; 
        background-size: 100%;
        background-position: 0 0; background-size: 100%;
        animation: play 10s steps(127) infinite;
    }
    @keyframes play {
    100% { background-position: 0 100%; background-size:100%; }
}
    
    </style>
</head>
<body>
    <div class="container">
        <img class="sprite" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFgAAABYAQMAAABLW6J3AAAAA1BMVEX///+nxBvIAAAAAXRSTlMAQObYZgAAABJJREFUeNpjYBgFo2AUjALsAAAEIAABfMHvuAAAAABJRU5ErkJggg==">
    </div>

</body>
</html>

请注意，我在此网站上建立了自适应行为：http://responsive-css.spritegen.com/

此外，您还有一个JSFiddle

我还尝试过其他方法，比如使用绝对像素单位，然后使用以下函数调整大小：

zoom:0.5;
-moz-transform:scale(0.5);
-moz-transform-origin: 0 0;

当缩放因子不是精确除数时，会出现同样的问题：例如：

0.5,0.75,0.2作品

0.3,0.7,0.8 OFFSET问题

Answer 1

从您的问题中，我了解到您希望做出响应，这是我的答案：

尝试将其放入 iframe 的以下代码中。

  * {
      padding: 0px;
      border: 0px;
      margin: 0px;
  }
  html {
      width: 100vw;
      height: 100vh;
  }
  body {
      width: 100vw;
      background-color: rgb(19, 19, 19);
  }
  div#mainContainer {
      margin: calc(50vh - 50vw) 0px;
      width: 100vw;
      height: 100vw;
      background-color: rgb(180, 180, 180);
      z-index: 1;
  }
  iframe {
      width: 100%;
      height: 100%;
  }
  @media only screen and (orientation: landscape) {
      div#mainContainer {
          margin: 0px calc(50vw - 50vh);
          width: 100vh;
          height: 100vh;
      }
  }

<body>
<div id="mainContainer">
    <iframe src="./iframe.html">
    </iframe>
</div>
</body>

这是 iframe.html

* {
  overflow: hidden;
}
.container{
    float:left;
    height: 100%;
    width: 100%;
}
.sprite{
    background: url('http://imageshack.com/a/img924/8153/hzLcvP.png') ;
    width: 100%;
    height: 100%; 
    background-size: 100%;
    background-position: 0 0; background-size: 100%;
    animation: play 10s steps(127) infinite;
}
@keyframes play {
  100% { background-position: 0 100%; background-size:100%; }
}

<html>
<head></head>
<body>
<div class="container">
    <img class="sprite" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFgAAABYAQMAAABLW6J3AAAAA1BMVEX///+nxBvIAAAAAXRSTlMAQObYZgAAABJJREFUeNpjYBgFo2AUjALsAAAEIAABfMHvuAAAAABJRU5ErkJggg==">
</div>
</body>
</html>

使用响应式CSS Sprites

1 个答案: