视网膜分辨率的图形使用什么技术?什么情况下，用translate()而不用绝对定位？

视网膜分辨率的图形？当中使用什么技术？

1.使用高分辨率的图形（显示尺寸的两倍）来处理视网膜显示，也就是使用2倍图。

2.更好的做法是使用媒体查询，像@media only screen and (min-device-pixel-ratio: 2) { ... }，然后改变background-image，不同分辨率的屏幕使用不同的图片。

3.对于图标类的图形，我会尽可能使用 svg 和字体图标，因为它们在任何分辨率下都不会失真。

4.还有一种方法是在检查了window.devicePixelRatio的值后，利用 JavaScript 将<img>的src属性修改，用更高分辨率的版本进行替换。

• https://www.sitepoint.com/css-techniques-for-retina-displays/

什么情况下，用translate()而不用绝对定位？什么时候，情况相反。

1.translate()是transform的一个值。改变transform或opacity不会触发浏览器重新布局（reflow）或重绘（repaint），只会触发复合（compositions）。而改变绝对定位会触发重新布局，进而触发重绘和复合。

2.transform使浏览器为元素创建一个 GPU 图层，但改变绝对定位会使用到 CPU。 因此translate()更高效，可以缩短平滑动画的绘制时间。

3.当使用translate()时，元素仍然占据其原始空间（有点像position：relative），这与改变绝对定位不同。

4.因此，如果要基于元素原来的位置做调整，我们可以使用translate进行平移变化；而如果要把元素放在页面或者父元素的指定位置，我们可以使用绝对定位脱标布局