Css 创建了表示计数的堆叠像素网格
我正在创建一个像素网格来表示一个计数（见图），并想知道最好的方法是什么 这些瓷砖需要具有响应性（1px、2px、4px）。我可以构建一个超大型的精灵，它包含所有196个@4X的组合，因此它可以完美地扩展到2px和1px，然后构建一个css类Css 创建了表示计数的堆叠像素网格,css,canvas,responsive-design,Css,Canvas,Responsive Design,我正在创建一个像素网格来表示一个计数（见图），并想知道最好的方法是什么 这些瓷砖需要具有响应性（1px、2px、4px）。我可以构建一个超大型的精灵，它包含所有196个@4X的组合，因此它可以完美地扩展到2px和1px，然后构建一个css类 <div class="pixel-block c-000"></div> <div class="pixel-block c-001"></div> …一定有更好的办法吗 任何想法都值得赞赏 下面是一
<div class="pixel-block c-000"></div>
<div class="pixel-block c-001"></div>
任何想法都值得赞赏 下面是一个示例，说明了如何在不使用带有196种组合的精灵的情况下完成此操作，只使用网格图像和CSS 想法很简单：
- 有一个容器可以容纳：
- 栅格图像（在顶部）
- 覆盖整个容器高度的“大”条
- 一个只覆盖剩余部分的“小”条
- “大条”的宽度等于网格中孔的（计数值/14）*宽度
- “低条”的高度等于（计数值%14）*网格中孔的高度
data-.box{
边框：1px实心#6699aa；
宽度：43px；
高度：43px；
位置：相对位置；
背景：#aaccff；
溢出：隐藏；
显示：内联块；
}
.grid{背景：url(http://i.imgur.com/w0jBLzK.png)不重复左上角；
宽度：43px；
高度：43px；
位置：绝对位置；
排名：0；
左：0；
z指数：3；
}
比格巴先生{
高度：43px；
宽度：0px；
背景：黑色；
z指数：2；
浮动：左；
}
劳巴先生{
浮动：左；
宽度：3倍；
高度：0px；
位置：相对位置；
背景：黑色；
}
.box[data big=“1”].bigbar{width:3px；}
.box[data big=“2”].bigbar{width:6px；}
.box[data big=“3”].bigbar{width:9px；}
.box[data big=“4”].bigbar{width:12px；}
.box[data big=“5”].bigbar{宽度：15px；}
.box[data big=“6”].bigbar{width:18px；}
.box[data big=“7”].bigbar{width:21px；}
.box[data big=“8”].bigbar{宽度：24px；}
.box[data big=“9”].bigbar{width:27px；}
.box[data big=“10”].bigbar{宽度：30px；}
.box[data big=“11”].bigbar{width:33px；}
.box[data big=“12”].bigbar{宽度：36px；}
.box[data big=“13”].bigbar{width:39px；}
.box[data big=“14”].bigbar{width:42px；}
.box[data low=“1”].lowbar{height:3px；margin top:39px；}
.box[data low=“2”].lowbar{height:6px；margin top:36px；}
.box[data low=“3”].lowbar{height:9px；margin top:33px；}
.box[data low=“4”].lowbar{height:12px；margin top:30px；}
.box[data low=“5”].lowbar{height:15px；margin top:27px；}
.box[data low=“6”].lowbar{height:18px；margin top:24px；}
.box[data low=“7”].lowbar{height:21px；margin top:21px；}
.box[data low=“8”].lowbar{height:24px；margin top:18px；}
.box[data low=“9”].lowbar{height:27px；margin top:15px；}
.box[data low=“10”].lowbar{height:30px；margin top:12px；}
.box[data low=“11”].lowbar{height:33px；margin top:9px；}
.box[data low=“12”].lowbar{height:36px；margin top:6px；}
.box[data low=“13”].lowbar{height:39px；margin top:3px；}
.box[data low=“14”].lowbar{height:42px；margin top:0px；}