背景
前一周阳了，在家休息，媳妇儿非要玩一个叫麻将牌（一个类似麻将消消乐）的游戏，每次都要搬重重的麻将，不想偷懒的程序员不是好程序员，功能不是很复杂，自己写一个吧，于是掉坑里了。
布局
就是这么一个简单的布局，要在界面上将108张麻将随机生成位置：
这里所有的麻将的图都在一张大图上，俗称“雪碧图”。
咋一看，不就是设置背景图，然后通过调整background-position就行了吗，可是这里为了在不同分辨率下，有更良好的展示效果，麻将的容器(后续统称为mjbox)并不是固定宽度，而是动态的宽度，并设置了最大、最小宽度。这里为了更好布局，mjbox使用了grid布局，然后通过grid-template-columns: repeat(12, 1fr)将其分为12列，保证每行有12张麻将。这样麻将的宽度就是动态的，为了保持宽高比，在麻将上我设置了aspect-ratio: 102/ 138;。那么在这个自适应布局里，如何应用雪碧图，保证合理的显示呢。
Background-size
首先要保证雪碧图上麻将的大小与mjbox里麻将元素的大小保持一致，如何保持呢？
直接设置 background-size: calc(spriteWidth / mjWidth * 100%) auto;
这里我来解释一下，background-size可以设置背景图片的显示尺寸，当为百分比的时候，代表相对于设置该背景的元素的宽或高的百分比来设置尺寸。这里spriteWidth是雪碧图原本的宽度，mjWidth代表原本宽度下麻将的宽度，设置为spriteWidth / mjWidth * 100% 就代表一直保持原始的这个比例，就能保证图片里麻将的大小与mjbox里麻将元素的大小保持一致。
ps：这二个参数设置为auto代表图片高度按照宽高比自动缩放。
Background-position
背景在元素里的定位还是需要使用background-position，但这里就无法使用具体的像素值来定位了，而是需要使用百分比。这里就容易掉进去了。
先带领大家用一张图理解一下百分比是如何定位的：
是不是跟想象的不一样？
我们用一个公式来记住：
水平像素 = (容器宽度-背景图片宽度)*水平百分比
垂直像素 = (容器高度-背景图片高度)*垂直百分比
水平百分比 = 水平像素/(容器宽度-背景图片宽度)
垂直百分比 = 水平像素/(容器高度-背景图片高度)
这样结合麻将在雪碧图上的位置就很容易算出该麻将应该偏移的百分比了。
