11/21
2017
今天上线了一个手机站，然后我打算在手机上看看效果。考虑到兼容性，我就不用chrome了，安装了个手机QQ浏览器，看看有什么新发现。
问题1：不支持background-size的简写。如下简写方式：
background: url(../images/jjtitbg.png) 0 0 no-repeat/100%;
和分开写应该是等价的:
background: url(../images/jjtitbg.png) 0 0 no-repeat; background-size: 100%;
chrome浏览器的pc和移动版都支持简写，但是qq浏览器不行，直接判定这条规则无效，不显示背景图了。没想到X5内核竟恐怖如斯。我去QQ浏览器的论坛上提建议，结果帖子竟然无法提交。你开心就好。
Read More →
手机QQ浏览器的坑
09/1
2015
刚才看到本站页面中，body的background-size是cover。这个值只是以前看到过，没了解过，于是百度了一下：
cover值会保持图像本身的宽高比例，将图片缩放到正好完全覆盖定义背景的区域。
于是我产生了一个疑惑，cover和100%有哪些区别呢？实验一番之后明白了。
注意，background-size:100%;和background-size:100% 100%;是不同的，本文讨论的是只写一个100的情况，形同background-size:100% auto;。
先看100% auto的效果：
可以看到100% auto并不是把图片的宽高都缩放到区域的100%，而是以宽度为基准（因为100% auto只指定了宽度是100%）进行等比例缩放。如果图片宽度缩放到了区域的100%就不再继续调整了，这时候高度是否铺满、是否超出或不足，就听天由命了。是否平铺取决于background-repeat的设置。
再看cover的效果：
可以看到背景图相比于100% auto时放大了许多，此时背景完全铺满了页面，没有产生平铺；但是有一部分跑到区域外面了。
cover的高明之处就在于没有限制以宽度还是高度作为缩放基准。先把图片等比例缩放，在窄的那一边达到了区域的100%之后，如果另一个边没有达到100%，就继续等比例缩放，直到另一边达到100%。，这样可以保证图片完全覆盖区域，而且无需平铺。但这样可能会造成图片的一部分在区域之外，变得不可见了。
