当前位置:首页 > web H5 关于 @1x 和 @2x的图片问题

web H5 关于 @1x 和 @2x的图片问题

发布于 2018-11-03 阅读 65 次 移动端H5

最近切一个H5页面,ui给到的图可以导出@1x 和 @2x两种,就查了下这方面的知识,在segmentfault看到了相关的问题,写出来给大家分享下。
之前都是自己拿ps去切图的,这次UI推荐了蓝湖这个网站,直接导出png,666哒,省不少事情,然后我才知道原来我们之前自己切的都是@1x的图,也就是1倍图,这样的图在ipone6看是没问题的,但是放到更加高清的手机就会失真,这个时候就需要有@2x或者以上的图了。

在高分辨率屏幕上,如果用@1X分辨率的图,会模糊。在低分辨率的屏幕上,如果用@2X分辨率的图,图片相对会稍微大一点,浪费网络资源。

css可以通过媒体查询的“device-pixel-ratio”属性来判断。
JS的话,可以通过window.devicePixelRatio获得设备像素比,获取物理像素与CSS像素之间的比例。
一倍图:当这个比率为1:1时,使用1个物理像素显示1个CSS像素。
二倍图:当这个比率为2:1时,使用4个物理像素显示1个CSS像素,
三倍图:当这个比率为3:1时,使用9(3*3)个物理像素显示1个CSS像素。

最后说一下,ios那边所说的2倍图其实是我们这边的1倍图,不管怎么样都是以750宽的图来说的
750设计图直接ps切出来的图就是ios所说的2倍图了