我正在使用这个伟大的工具构建一个新的应用程序,我有一个问题需要解决。
处理多个scren和多个设备的imnage大小的最佳方法是什么。
Apple =视网膜和非视网膜 Android = ldpi,mdpi,hdpi,xhdpi,xxhdpi和平板电脑(所有这些都具有多种屏幕分辨率) BlackBerry10 =一个分辨率(但不等于其他分辨率) WindowsPhone8 =一个分辨率(但不等于其他分辨率)
对于这种情况,最好的方法是什么?
使用SVG图像(Optimizacion,性能,应用程序的大小)??
为设备像素比率(CSS Image Replacement)设计CSS标签(设计师可以杀了我:smile:lol)查看列表http://bjango.com/articles/min-device-pixel-ratio/
CSS Sprite表
另一种方式
在做出决定之前,请考虑在所有设备中应用的最佳方式。
提前致谢
答案 0 :(得分:2)
实际上没有一种方法可以做到这一点,因为图像的每次实现都需要根据其目的采用不同的方法。 SVG很棒,但并非所有东西都可以作为SVG使用。
媒体查询将是您的盟友。
请参阅:supporting multiple resolution and density of images in phonegap
这是另一种方法:Angular.js data-bind background images using media queries
对于html5图片元素,还有一些很好的polyfill,你可能会发现它很有用。
请参阅:https://github.com/scottjehl/picturefill
...及其angularjs指令实现https://github.com/tinacious/angular-picturefill