在 Retina 15 的显示屏下,做 1280*800 的网页设计图时保证输出效果
提供一些解决办法,希望对你有帮助:1. 使用Retina.js | Retina graphics for your website ,在Retina屏幕下自动切换@2x的高清图片2.图标尽量使用矢量的,比如SVG或图标font,如果不方便,就要输出两倍大小的图片3. 使用类似的响应式CSS代码来适配高分辨率图片@mediascreen and (-webkit-min-device-pixel-ratio: 1.5),screen and (-moz-min-device-pixel-ratio: 1.5),screen and (min-device-pixel-ratio: 1.5) {\t#img {\t\tbackground-image: url(img@2x.jpg);\t}}
4.请更新你的Photoshop至最新版本,会有ratina屏的支持,HiDPI and Retina Display Support,Adobe的产品,特别是图像处理产品在R屏下的支持会不断更新换代,各大软件公司也在解决这个问题。5.所有素材图片一律使用智能对象,方便变换尺寸输出至于web的设计尺寸,依然使用72dpi来设计!因为使用其它的dpi会增加单位换算的复杂程度,不是非常熟练的话使用大的DPI将增加前端切图和web规范的难度,大大降低工作效率。我们只要在设计过程中保证图片的输出质量就OK。如果觉得在R屏下设计不方便,建议外接一个大的显示屏来进行设计,如果不出门,我一般笔记本都另外配一个显示屏做,比较方便。
■网友
是会遇到问题的,在rMBP的高分屏下,普通网页中的图片素材等会因为屏幕分辨率太高而被放大,以避免网页过小导致的用户看不清,进而就会出现模糊的现象。基于这种情况一直没有敢入手,苹果太超前了,希望有好的解决方案出现。
■网友
我是楼主。经过试验,我是这样解决这个问题的:按照原有长宽分辨率乘以2来作设计图,做完后,在图像大小里更改尺寸(除以2)然后另存为文件,把这份PSD文件给前端,貌似可以解决(用貌似这个词,是因为不知道是不是错觉,总觉得有点不对劲)。不过楼主测试过,以形状为例,除以2后,完全不模糊,比例正好。希望大家能提供一些不同的方案,谢谢了。
■网友
我和匿名用户是一个办法,p把“以低分辨率打开”关掉,出1280*800的图就直接做2560*1600的,图标全用形状画,做完了以后缩到一半大小,不是形状画出来的视觉元素要重新调整过,再给前端。以低分辨率打开的话,缩放是方便了,但是字体显示太折磨人了。乘以2这个方法的痛苦之处就是文件越来越大机器会越来越卡。。。做web的好方法同求高人指点啊。(rMBP的高分辨率做移动APP确实效率很高,不用像过去一样频繁地把图片输出到手机里查看效果。)
推荐阅读
- 一汽红旗|红旗重量级SUV亮相,帝王金镶嵌+超大显示屏,奢华感媲美迈巴赫!
- CINNO|会员动态|德国肖特携全新显示屏解决方案,亮相2020年深圳全触展
- Retina MacBook Pro15配Dell u2414h屏幕咋样本人是做平面的
- 怎样评价「苹果公司将自主开发显示屏」?
- 有没有可能外部遥控操纵电子显示屏
- 汽车|全新高尔夫外形年轻运动,换装液晶显示屏幕,搭载1.4T发动机
- 台式机显示屏咋挑
- 家庭入户处的显示屏到底具备哪些功能才会真正地给居家生活带来方便传统的只是开单元门而已,用处不大。
- Kindle 所使用的电子墨水屏和一般的显示屏相比真的更对眼睛伤害更小吗
- retina@2x@3x的照片是咋来的