开发者学堂课程【移动 Web 前端开发：首页-图标失真问题 】学习笔记，与课程紧密联系，让用户快速学习知识。
课程地址：https://developer.aliyun.com/learning/course/594/detail/8405
首页-图标失真问题
一、图标失真问题讲解
找到 logo，使用背景图，在 images 里，找到图后， logo 和搜索按钮在左下方，需要把这两个图定位过去。
在 index.css 中写入：
background: ur1("../images/sprites.png ") no-repeat;；
这时候定位位置按照正常需要去量一量，
注意：这张图如果在移动端不经过压缩，图片是失真的。比如淘宝整个页面都进行了压缩，意味着图片也被压缩了，压缩了两倍，和屏幕像素比有关系。
但是现在设计稿是 640px，最好适配的是320px，意味着 640px 的设计稿切出来的图标可能是 100px，但应该让图标缩小一倍变成 50px 才不会失真。
现在使用的是 background（背景），怎么压缩背景或者说怎么设置尺寸？
图片是400×400，那么就要变成200×200：
background-size: 200px 200px;
虽然设置了尺寸，但是整个精灵图质量没有改变，只是大小改变了。相当于两倍的 200px×200px的图片放在设备上，正好是一个物理像素显示一个 px 内容，正好可以提高页面清晰度。
所以图片压缩了一倍，那么定位也应该压缩，所以：
background-position: 0 -103px；
这时候刷新页面，京东 logo 就出现了.而尺寸最大不超过40，在精灵图里量一下最大不超过80，意味着图片压缩了一倍，做了图片的失真处理。
在做移动端开发的时候一般会做一个2倍图压缩，解决图标失真问题。
搜索按钮也在相近位置里，同样在图片里，相当于刚才两个代码可能很多地方会写，所以可以成为一个公用样式：
在 base.css 里写入：
[class^="icon_"]
在做精灵图的时候有一个规律：
给每一个 class 起的都是以 icon 开头，当使用精灵图的时都以 icon 开头，然后在 bass.css 里找到了所有以 icon 下划线开头的类，然后写入：
background: url("../images/ sprites.png" ) no-repeat;
background-size: 200px 200px;
所有的以 icon 开头的都认为是用了精灵图，并且都进行了压缩。这两个代码经常会用。
接着在 [class^="icon_"] 后写入：
[class*=" icon_"] 只要包含了 icon_，也用了这张精灵图。
意思是 class 可能有两种情况：
cLass="icon_xxx" 和 class="red icon_xx×"
只要找到这两种情况，就涵盖了所有使用 icon_ 的样式，都可以用这两句代码。
还有一个搜索图标：测量图标定位大概是
-60px-109px
所以写入：
background-position: -60px -109px;
