移动WEB布局使用less语法之视网膜屏幕如何来解决图片像素问题

     我们如果在开发中会遇到美工给我们的图片有类似与这样的明明例如2xbg.jpg，那么我们就知道我们需要根据不同的设备来调整图片的使用了，那么这个场景跟我们的视网膜屏幕又有什么关系呢！

    视网膜屏幕的提出最早来自于iphone4，到底是什么意思呢，就是屏幕的分辨率跟像素不一样，我们以前看到的屏幕是一个分辨率中有一个像素点，而随着用户对界面的体验要求越来越高，一个清晰度的要求也是越来越高了，那么现在我们说的视网膜屏幕分为两个一个是iphone6之前的2x的还有就是到现在iphone7的3x的有时候为了不同的设备一般是搭配两套图片的，但是这样我们当然知道这样对我们的网络传输是相当不利的！

   所以说我们的大前端工程师们想到了利用一张大的图片通过background-size来压缩图片，这个的原理就是，图片由小变大会失真，但是由大到小是不会失真的，

    

.h_list{
		
		height: 44px;
		width: 40px;
		display: block;
		position: absolute;
		background-image: url(../images/sprites.png);
		background-position: -60px 0;
		background-size: 200px 200px;
		padding: 10px 12px;

		background-origin: content-box;
		background-clip: content-box;
		top:0px;
		right: 0px;
	}